封装组件
components文件下新建SvgIcon组件 ,内容如下：
1<template>
2 <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
3 <use :xlink:href="iconName" />
4 </svg>
5</template>
6
7<script>
8export default {
9 name: 'SvgIcon',
10 props: {
11 iconClass: {
12 type: String,
13 required: true
14 },
15 className: {
16 type: String,
17 default: ''
18 }
19 },
20 computed: {
21 iconName() {
22 return `#icon-${this.iconClass}`
23 },
24 svgClass() {
25 if (this.className) {
26 return 'svg-icon ' + this.className
27 } else {
28 return 'svg-icon'
29 }
30 }
31 }
32}
33</script>
34
35<style scoped>
36.svg-icon {
37 width: 1em;
38 height: 1em;
39 vertical-align: -0.15em;
40 fill: currentColor;
41 overflow: hidden;
42}
43</style>
44
45
将所需svg文件放置icons的svg文件夹下, icons文件下的index.js文件中的代码如下：
1import Vue from 'vue'
2import SvgIcon from '@/components/SvgIcon'// svg组件
3
4// register globally
5Vue.component('svg-icon', SvgIcon)
6
7const req = require.context('./svg', false, /\.svg$/)
8const requireAll = requireContext => requireContext.keys().map(requireContext)
9requireAll(req)
10
11
main.js中引入icons文件,直接在组件中使用icon-class为svg名字的图标即可
插件安装
安装svg-sprite-loader，yarn add svg-sprite-loader -D
在vue.config.js文件下配置svg-sprite-loader
1const path = require('path')
2function resolve (dir){
3 return path.join(__dirname,dir)
4}
5
6module.exports = {
7 configureWebpack: {
8 resolve: {
9 //路径别名配置
10 alias: {
11 '@': resolve('src'),
12 'assets': resolve('@/assets'),
13 'common': resolve('@/common'),
14 'components': resolve('@/components'),
15 'network': resolve('@/network'),
16 'views': resolve('@/views'),
17 }
18 }
19 },
20
21 chainWebpack: (config) => {
22 //配置 svg-sprite-loader
23 // 第一步：让其他svg loader不要对src/icons进行操作
24 config.module
25 .rule('svg')
26 .exclude.add(resolve('src/icons/svg'))//注意：路径要具体到存放的svg的路径下，不然会报错
27 .end()
28 // 第二步：使用svg-sprite-loader 对 src/icons下的svg进行操作
29 config.module
30 .rule('icons')
31 .test(/\.svg$/)
32 .include.add(resolve('src/icons/svg'))//注意：路径要具体到存放的svg的路径下，不然会报错
33 .end()
34 .use('svg-sprite-loader')
35 .loader('svg-sprite-loader')
36 //定义规则 使用时 <svg class="icon"> <use xlink:href="#icon-svg文件名"></use> </svg>
37 .options({
38 symbolId: 'icon-[name]'
39 })
40 .end()
41 }
42