svg图片在vue项目中的应用

svg图片在vue项目中的应用

一、安装 svg-sprite-loader 插件

 npm install svg-sprite-loader

二、基于 vue-cli2.x 项目 webpack 配置

配置build文件夹中的 webpack.base.conf.js 文件

 //注意 url-loader 中要将 icons 文件夹排除, 不让 url-loader 处理该文件夹
exclude: [resolve('src/icons')],
{
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
}

三、基于 vue-cli3.x 和 cli4.x 项目 webpack 配置

配置根目录中的 vue.config.js 文件

  /* svg 相关配置 */
    chainWebpack: config => {
        const svgRule = config.module.rule('svg');
        // 清空默认svg规则
        svgRule.uses.clear();
        //针对svg文件添加svg-sprite-l