一、背景：iconfont网站无法上传图标

二、实现步骤：

1.安装

pnpm install vite-plugin-svg-icons -D

2.配置 vite.config.ts

import viteSvgIcons from 'vite-plugin-svg-icons';
import path from 'path';

export default () => {
  return {
    plugins: [createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
        // 指定symbolId格式
        symbolId: 'icon-[name]',
      })]
  };
};

3.在 src/main.ts 内引入注册脚本

import 'virtual:svg-icons-register';

4.创建组件

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <title>{{ title }}</title>
    <use :xlink:href="iconName" />
  </svg>
</template>

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

export default defineComponent({
  name: 'SvgIcon',
  props: {
    title: {
      type: String,
      default: '',
    },
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    return {
      svgClass: computed(() => {
        if (props.className) {
          return 'svg-icon ' + props.className;
        } else {
          return 'svg-icon';
        }
      }),
      iconName: computed(() => {
        return `#icon-${props.iconClass}`;
      }),
    };
  }
});
</script>

<style scoped>
.svg-icon {
  width: 10em;
  height: 10em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

5.icons 目录结构

src/assets/svg

6.使用

<template>
  <div>
    <SvgIcon icon-class="copy"></SvgIcon>
    <SvgIcon icon-class="undo"></SvgIcon>
    <SvgIcon icon-class="tips"></SvgIcon>
    <SvgIcon icon-class="zoomin"></SvgIcon>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import SvgIcon from './components/SvgIcon.vue';
export default defineComponent({
  name: 'App',
  components: { SvgIcon },
});
</script>

参考博文:

# vue3.0 vite引入SVG iconfont