svg-sprite-loader在vue项目中的使用

在项目中安装svg-sprite-loader依赖包

npm install svg-sprite-loader -S

vue.config.js中书写相关的配置

 const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)

module.exports = {  
    productionSourceMap: false,  
    chainWebpack: (config) => {  
    const svgRule = config.module.rule('svg')    
    svgRule.uses.clear()    
    svgRule
        .test(/\.svg$/)      
        .include.add(resolve('./src/assets/icons'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({symbolId: 'icon-[name]'})
    config.module.rule('images')
        .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
        .exclude.add(resolve('./src/assets/icons'))  
    }
}

自定义一个SvgIcon的组件

在组件中使用自定义组件SvgIcon

首先利用require.context将components下面的所有自定义组件都注册成为全局组件

然后在App.vue中使用自定义组件SvgIcon

注意：

1.传递给svg-icon组件的icon属性值必须是你已有的svg图片的名称；

2.自定义组件的name属性值就是你自定义组件的名称，不能为空。