svg-icon组件使用

1. npm i svg-sprite-loader -D 或者yarn add svg-sprite-loader -D

2. 新增svg-icon组件

<!--
 * @Author: DDY
 * @Date: 2021-09-06 15:32:54
 * @use: <svg-icon iconClass="home"></svg-icon>
-->
<template>
  <svg
    class="svg-icon"
    :style="{
      width: props.size + 'px',
      height: props.size + 'px',
      color: props.color
    }"
    @mousedown="clickIcon"
  >
    <use :xlink:href="`#icon-${props.name}`" :fill="props.color" />
  </svg>
</template>

<script lang="ts">
import { defineComponent } from "vue";
/**
 * @description: svg图标组件
 * @use {*} <SvgIcon name="home" :size="14" color="red" />
 */
export default defineComponent({
  name: "SvgIcon",
  props: {
    name: {
      type: String,
      required: true,
      default: "email"
    },
    size: {
      type: Number,
      default: 32
    },
    color: {
      type: String,
      default: "#000"
    }
  },
  setup(props) {
    return {
      props
    };
  }
});
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}
</style>

3. 在 该文件夹中创建 plugin.js 文件。在assets下创建svg文件夹存放svg图标

import SvgIcon from "./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/svg/${name}.svg`);
            });
        } else {
            // 全量引入图标
            const ctx = require.context("@/assets/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/svg/${name}.svg`);
            });
        }
        vue.component(SvgIcon.name, SvgIcon);
    }
};
export default componentPlugin;

4. 在 main.js 中导入plugin.ts

import plugin from "./components/SvgIcon/plugin";
createApp(App).use(plugin, { imports: [] }) //imports按需  ['home','apple']

5. 修改 vue.config.js

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule.exclude.add(/node_modules/);
    svgRule
      .test(/\.svg$/)
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
   }).end();
    //或者
    config.module.rule('svg')  //找个配置rule规则里面的svg
      .exclude.add(resolve('src/assets/svg'))  //排除src/assets/svg下的.svg文件
      .end();
    config.module.rule('icons') //配置rule规则里面新增的icons规则
      .test(/\.svg$/) //icons规则里匹配到.svg结尾的文件
      .include.add(resolve('src/assets/svg')) //包含src/assets/svg下的.svg文件
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({  symbolId: 'icon-[name]'})
      .end()
  }
};