Vue3+ts+webpack 使用 svg-sprite-loader 实现 svg 图标加载

1. 将file.svg文件放在目录@/assets/svgIcons/svg下

<svg
  t="1660287923432"
  class="icon"
  viewBox="0 0 1024 1024"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  p-id="26345"
  width="200"
  height="200"
><path
    d="M328.99 488.44l-1.01 1.01-183.41 183.68c-22.46 22.53-33.86 52.52-33.86 83.12 0 30.2 11.4 60.19 33.93 82.71l1.22 1.83c22.53 21.44 52.25 32.64 81.77 32.64 30.06 0 59.98-11.67 83.32-34.47l206.96-207.5 1.08-0.2 222.77-223.31a51.562 51.562 0 0 0 15.25-36.61c0-13.75-5.49-26.93-15.25-36.61a51.587 51.587 0 0 0-36.51-14.39c-13.72-0.29-26.97 5-36.71 14.66L348.27 656.03c-14.53 13.79-37.31 13.79-51.84 0a36.214 36.214 0 0 1-10.84-25.85c0-9.73 3.91-19.04 10.84-25.85l320.61-320.82A123.97 123.97 0 0 1 705.25 247c32.09 0 63.71 12.21 87.94 36.51 24.36 24.29 36.23 56.18 36.23 88.01 0 31.48-11.87 63.85-36.23 88.21l-222.97 222.7-0.54 0.75-0.54 0.48L362.17 890.4a188.955 188.955 0 0 1-134.55 55.37c-48.18 0-95.68-17.64-132.46-53.26l-2.03-2.03a187.989 187.989 0 0 1-55.37-134.29c0-48.65 18.11-98.05 55.37-134.82l207.16-207.43 1.36-0.61 260.76-260.77a246.205 246.205 0 0 1 175.41-72.94c63.1 0 126.82 24.43 174.93 73.01 48.65 47.57 72.47 111.28 72.47 174.59 0 63.65-23.82 127.02-72.47 175.47L553.66 861.77c-6.79 6.81-16 10.63-25.62 10.63-9.61 0-18.83-3.82-25.62-10.63a35.988 35.988 0 0 1-10.86-25.75c0-9.7 3.92-18.98 10.86-25.75l359.09-359.08c67.68-68.69 67.68-178.99 0-247.67-68.64-67.92-179.17-67.92-247.81 0L328.99 488.5"
    fill="#323333"
    p-id="26346"
  /></svg>

2. 安装 svg-sprite-loader

npm i svg-sprite-loader

3. 配置 vue.config.js

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
  transpileDependencies: ["@enn/ency-design"],
  chainWebpack: (config) => {
    // 内置的svg处理排除指定目录下的文件
    config.module.rule('svg').exclude.add(resolve('src/assets/svgIcons')).end()
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/svgIcons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  }
});

4. 新建 index.vue 文件放在目录@/assets/svgIcons下，这里可传入 name 属性控制图标类型，传入 size 属性控制图标大小，传入 color 属性控制图标颜色

<template>
  <svg
    class="svg-icon"
    :style="{
      width: props.size + 'px',
      height: props.size + 'px',
      color: props.color
    }"  >
    <use :xlink:href="`#icon-${props.name}`" :fill="props.color" />
  </svg>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "SvgIcon",
  props: {
    name: {
      type: String,
      required: true,
      default: ""
    },
    size: {
      type: Number,
      default: 32
    },
    color: {
      type: String,
      default: "#000"
    }
  },
  setup(props) {
    return {
      props
    };
  }
});
</script>

5. 新建 index.ts文件放在目录@/assets/svgIcons下

import SvgIcon from "@/assets/svgIcons/index.vue";

const componentPlugin: any = {
  install: function(vue: any, options: any) {
    if (
      options &&
      options.imports &&
      Array.isArray(options.imports) &&
      options.imports.length > 0
    ) {
      // 按需引入图标
      const { imports } = options;
      imports.forEach((name: any) => {
        require(`@/assets/svgIcons/svg/${name}.svg`);
      });
    } else {
      // 全量引入图标
      const ctx = require.context("@/assets/svgIcons/svg", false, /\.svg$/);
      ctx.keys().forEach(path => {
        const temp = path.match(/\.\/([A-Za-z0-9\-_]+)\.svg$/);
        if (!temp) return;
        const name = temp[1];
        require(`@/assets/svgIcons/svg/${name}.svg`);
      });
    }
    vue.component(SvgIcon.name, SvgIcon);
  }
};
export default componentPlugin;

6. 在main.ts中引入上面的 index 文件

import svgIcon from "@/assets/svgIcons/index";

const app = createApp(App);
app.use(svgIcon);

7. 图标组件的使用

<SvgIcon name="file" :size="24" color="#777" />