Vue 项目踩坑记录之 SVG

1. 在安装了 svg-sprite-loader 后直接在项目中引入 icon 报错怎么办？
2. icon 无法换色？
3. 报错： ts svg not found moddle？
4. 代码提交 eslint 报错

解决问题一：

• 在一个 .d.ts 的文件中声明 .svg 的类型。
• 在 webpack 中配置 svg-sprite-loader。但是由于没有 webpack 文件所以只能在 vue.config.js 中配置，因此需要翻译。

解决问题二：

当 icon 默认使用了 fill 属性设置颜色导致无法换色，这是 SVG 自带的 fill 属性的问题。

• 安装 svgo-loader 自动删除 fill 属性 。

如下结果

// shims-vue.d.ts

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

// 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()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({ extract: false })
      .end()
      .use("svgo-loader")
      .loader("svgo-loader")
      .tap((options) => ({
        ...options,
        plugins: [{ removeAttrs: { attrs: "fill" } }],
      }))
      .end();

    config
      .plugin("svg-sprite")
      .use(require("svg-sprite-loader/plugin"), [{ plainSprite: true }]);
    config.module.rule("svg").exclude.add(dir);
  },
};

解决问题三：

• ts 无法识别 .svg 为后缀的文件，因此需要声明。
• 在 shims-vue.d.ts 添加如下代码

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

用 require 代替 import 导入 svg 更方便

• 使用 import x from 'xx.svg'
• body 页面出现 svg 结构，但是 svg 未渲染出来
• 得使用 xx.svg ，svg 才能正常起作用
• 譬如： console.log(x) 因此 require 是更优之选

解决问题四：

• eslint 报错，指向的是 require 导入问题。
• 在 .eslintrc.js 文件中找到 rules 模块添加以下内容

"@typescript-eslint/no-var-requires": 0

配置相关原理可参照：如何在 React 项目中优雅的使用 SVG