Vue

Vue-Svg-icon

Vue-Svg-icon

Posted by z9961 on March 10, 2019

在vue.config中配置

const path = require('path');

function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = {
     chainWebpack: config => {
        config.module
            .rule('svg')
            .uses.clear();
        config.module
            .rule('svg1')
            .test(/\.svg$/)
            .use('svg-sprite')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()
            .include
            .add(resolve('src/components/icon/svg'))
            .end()
    }
};

icon配置文件:

import Vue from 'vue'
import SvgIcon from './SvgIcon'// svg组件

Vue.component('svg-icon', SvgIcon);

const req = require.context('./svg', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req);

使用:

 <svg-icon icon-class="我的班级"/>

遇到的坑:

在main.js中

import './components/icon'

这里如果是

import './components/icon/index.js'

会出现图标不显示的问题

参考:

https://www.jianshu.com/p/1150876dfa04

update:19.3.28