1、创建vue项目
vue create my-project
image.png
2、在vue项目中安装 svg-sprite-loader
npm install svg-sprite-loader --save-dev
3、在src文件夹下创建组件 components/Svg.vue
<template>
<svg class="svg-icon" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<style>
.svg-icon {
width: 1.5em;
height: 1.5em;
}
</style>
<script>
export default {
props: {
iconClass: {
type: String,
required: true
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
}
}
}
</script>
4、新建 /src/icons 和 /src/icons/svg 目录，把.svg文件都放到 /src/icons/svg 或者/src/icons/mainSvg目录里
5、新建 /src/icons/index.js 文件并编辑
import Vue from 'vue'
import Svg from '@/components/Svg'
Vue.component('svg-icon', Svg)
/**
* require.context 的参数说明
* './svg' 代表要查找的文件路径
* false 代表是否查找子目录
* /\.svg$/ 代表要匹配文件的正则
*
*/
const req = require.context('./svg', false, /\.svg$/)
const reqa = require.context('./mainSvg', false, /\.svg$/)
// https://zhuanlan.zhihu.com/p/59564277
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
requireAll(reqa)
6、修改根目录配置文件 vue.config.js ,没有就手动创建，修改配置记得要重新 npm run serve 一下。
// 注意 'icon-[name]' 前缀需要跟Svg.vue中`#icon-${this.iconClass}`前缀一致
const path = require('path')
function resolve(dir) {
return path.join(__dirname, './', dir)
}
module.exports = {
chainWebpack(config) {
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
7、全局引入cons，main.js可以引入
import Vue from 'vue'
import App from './App.vue'
import './icons'
8、应用 App.vue
<template>
<div id="app">
<svg-icon icon-class="jinxingzhong"></svg-icon>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
具体demo项目可以查看：https://gitlab.com/public-hjn/svg-demo
