Vue 加载 svg

说明: 项目是 vcli 3.x 创建的
注意: 如果需要修改 svg 颜色, 需要把 svg 的 fiil 和 stroke 的颜色值修改为 currentColor, 在 svg-icon 组件里面的 className 的传值对应的 class 里面使用 color 属性, 即可完成变色

1. 安装 svg-sprite-loader
npm install svg-sprite-loader -D
2. 在 vue.config.js 里面配置 loader (注意 这个文件必须和 package.json 在同一个目录, 才会生效, 所以还是切到文件夹检查一遍)

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');
    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear();
    svgRule
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, './src/assets')) // 文件目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      });
    // 修改file对svg的处理，不让它处理
    const fileRule = config.module.rule('file');
    fileRule.uses.clear();
    fileRule
      .test(/\.svg$/)
      .exclude.add(path.resolve(__dirname, './src/assets'))
      .end()
      .use('file-loader')
      .loader('file-loader');
  },
}

3. 编写 svg-icon 组件

4. 在 main.js 里面全局注册上面的组件, 批量引入 svg 文件 ( svg 文件 我直接放到了 assets 下面)

Vue.component('svg-icon',SvgIcon);
//引入svg文件
const requireAll = (requireContext) => requireContext.keys().map(requireContext);
const req = require.context('./assets',false,/\.svg$/);
requireAll(req);