vue项目引入svg踩坑

1、引入svg

在vue项目中的shims-vue.d.ts文件: 主要用于 TypeScript 识别.vue 文件，Ts 默认并不支持导入 vue 文件，因此我们也需要然Ts能够识别svg图片，

declare module "*.svg" {
  const content: string;
  export default content;
}

2、我们需要使用svg-sprite-loader插件因此需要运行以下命令安装

yarn add svg-sprite-loader -D

svg-sprite-loader会把svg变成symbol，symbol对应的id为svg的文件名，并在symbol外套一个svg，在body里生成。

3、在vue.config.js文件中写入如下代码

const path = require("path");
module.exports = {
  lintOnSave: false,
  chainWebpack: (config) => {
    const dir = path.resolve(__dirname, "src/assets/icons");

    config.module
      .rule("svg-sprite")
      .test(/\.svg$/)
      .include.add(dir)
      .end() // 包含 icons 目录
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({ extract: false })
      .end();
    config
      .plugin("svg-sprite")
      .use(require("svg-sprite-loader/plugin"), [{ plainSprite: true }]);
    config.module.rule("svg").exclude.add(dir); // 其他 svg loader 排除 icons 目录
  },
};

4、在vue文件中便可以使用svg

<svg>
    <use xlink:href="#xxxxx" />
</svg>

5、由于每有一个svg图片我们都需要import一下，为了减少操作，可以写入如下代码,必须注明语言类型为Ts，否则会先：

<script lang="Ts">
let importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
  requireContext.keys().forEach(requireContext);
try {
  importAll(require.context("../assets/icons", true, /\.svg$/)); //使用require
} catch (error) {
  console.log(error);
}
export default {};
</script>

svg图标无法换颜色是因为自带了fill属性已经填充了颜色

1、方法一：在阿里巴巴矢量图标库中将需要的图标添加到项目中，点击批量操作，勾选批量去色，再下载到本地，相当于提前就将fill属性删除了。
2、方法二：安装 svgo-loader

yarn add --dev svgo-loader

在 vue.config.js 文件中，config.module 代码后加上 svgo-loader 代码( svg 后的 o 是“优化”英文首字母)

.use('svgo-loader').loader('svgo-loader')
.tap(options =>({...options,plugins:[{removeAttrs:{attrs:'fill'}}]}))

意思就是移除fill属性
3、直接点击svg文件找到fill属性然后手动删除