vue2 使用svg图标

记录vue项目中使用svg图标的过程。

使用svg图标有两种方式。

一是使用本地的svg；二是使用iconfont的symbol格式。

• 安装svg-sprite-loader

npm install svg-sprite-loader

• 在vue.config.js做相关配置（这一步很重要，不做这个配置图标出不来）

module.exports = {/* svg 相关配置 */chainWebpack: config => {const svgRule = config.module.rule('svg');// 清空默认svg规则// 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。svgRule.uses.clear();//针对svg文件添加svg-sprite-loader规则svgRule.test( /\.svg$/).use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'});}
}

• 封装svgIcon组件

第一种方式，使用本地的svg

• 在src下面创建icons文件夹

 index.js（引入本地的svg图标），全局注册SvgIcon组件 

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'// svg component// register globally
Vue.component('svg-icon', SvgIcon)const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => {return requireContext.keys().map(requireContext)
}
requireAll(req)

在main.js引入icons文件夹

// 全局注册svgIcon组件
import './icons'

 使用本地的svg，调用SvgIcon组件

 效果图

•  第二种方式，使用iconfont的symbol引入方式

在main.js引入iconfont.js

// 使用iconfont的fontClass
import "./assets/iconfont/iconfont.css"// 使用iconfont的symbol
import "./assets/iconfont/iconfont.js"

使用symbol引入方式，调用SvgIcon组件

 效果图