插件工具 | 在vue中引入svg图标

前言

1、基于 vue-cli3
2、使用插件 svg-sprite-loader

在 src/icons/svg文件夹下放入一个 svg 并引用组件SvgIcon就能使用 svg 图标
要在vue.config.js做一下配置

onst 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/icons'))
        .end()
  }
}

vue-cli 3 基于 webpack-chain ，使用了 file-loader，并且把路径指定为在img文件夹下;

但我们的svg 并不在img文件夹，而且svg-sprite-loader已经自带了file-loader的功能;

所以，我们可以在我们自定义的 vue.config.js 文件下将 rule(svg) 清除(config.module.rule('svg').uses.clear()),然后加上自定义的 svg rule;

原文地址