如何在Vue中使用SVG作为图标

1.安装svg-sprite-loader

yarn add svg-sprite-loader  -D

2.src/ 后缀为.d.ts的文件内

如在shims-vue.d.ts

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

3.vue.config.js

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

    config.module
      .rule("svg-sprite")  //添加规则
      .test(/\.svg$/)     //匹配正则
      .include.add(dir)
      .end()              //只包含dir中icons 这个目录
      .use("svg-sprite-loader")    //选择使用的loader
      .loader("svg-sprite-loader")  //确定使用这个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); // 其他 svg loader 排除 icons 目录
  }
}

其中svgo-loader需要安装

4.Icon组件内，引入整个SVG文件夹内容，接收参数调取内容

const importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
  requireContext.keys().forEach(requireContext);
try {
  importAll(require.context("../assets/icons", true, /\.svg$/));
} catch (err) {
  console.log(err);
}

通过参数接收文件名

export default { props: ["name"], name: "Icon" };

v-bind缩写为：，使用

<use :xlink:href="'#'+name" />

5. 调用组件时，参数传入SVG文件名

<Icon name="money" />