在项目中引入svg图标
1.在项目中创建icons文件夹
2.在 icons 文件夹下创建 index.js 文件
内容如下
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
// register globally
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
3. 创建 svg 引入方式 工具类
内容如下
4. 将 svg 配置到 webpack
内容如下
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
},
5.在vue中引入 svg
在 main.js 入口文件
import '@/icons' // icon 6. 使用 1