持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

因为想从头搭建一个系统，侧边栏的话从后端返回的路由信息里面的icon字段带的，but众所周知 element-plus字体图标库的现在的用法变了，需要单独导入，而又不可能把所有的都注册，所以自己封装了一个

1. 使用的是 vite ,所以需要下载 vite-plugin-svg-icons

npm i fast-glob@3.2.11 -D
npm i vite-plugin-svg-icons@2.0.1 -D

2. 创建一个文件夹来存放图标，这个文件夹后面有用

项目创建 src/assets/icons 文件夹，存放 iconfont 下载的 SVG 图标

3. main.ts 引入注册脚本

// main.ts
import 'virtual:svg-icons-register';

4. vite.config.ts 插件配置

// vite.config.ts
import {UserConfig, ConfigEnv, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

export default ({command, mode}: ConfigEnv): UserConfig => {
    // 获取 .env 环境配置文件
    const env = loadEnv(mode, process.cwd())

    return (
        {
            plugins: [
                vue(),
                createSvgIconsPlugin({
                    // 指定需要缓存的图标文件夹 
                    // 在当前文件夹下找到 src/assets/icons 下的文件
                    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
                    // 指定symbolId格式 icon的格式
                    symbolId: 'icon-[dir]-[name]',
                })
            ]
        }
    )
}

1. loadEnv: 加载 envDir 中的 .env 文件。默认情况下只有前缀为 VITE_ 会被加载，除非更改了 prefixes 配置。 就是读取 .env.development和.env.production这样的文件，类似这样

//  .env.development
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV='development'

VITE_APP_TITLE = 'vue3+vite+ts'

VITE_APP_PORT = 8080

VITE_APP_BASE_URL = '/api'

2. process.cwd(): 项目根目录（index.html 文件所在的位置）。可以是一个绝对路径，或者一个相对于该配置文件本身的相对路径。

5. 组件封装(文件路径在注释下写的 =》 components/SvgIcon/SvgIcon.vue）

// components/SvgIcon/SvgIcon.vue
<template>
  <div>
    <svg aria-hidden="true" class="svg-icon">
      <use :xlink:href="symbolId" :fill="color" />
    </svg>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps({
  prefix: {
    type: String,
    default: 'icon'
  },
  iconClass: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: ''
  }
})
const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`)
</script>
<style scoped>
.svg-icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  overflow: hidden;
  fill: currentColor;
  margin-left: 10px;
  margin-right: 10px;
}
</style>

6. 因为经常使用，所以在 components 文件夹下创建一个 index.js 全局注册

import SvgIcon from '@/components/SvgIcon/index.vue'
export default {
  install(app) {
    app.component('SvgIcon', SvgIcon)
  }
}

** 在 main.js 里面引入

// main.js
// 全局组件的注册
import globalComponents from '@/components'
app.use(globalComponents)

7. 使用 （使用前需要在iconfont组件库里面下载svg图标，并且放在 第二步创建的文件夹下 src/assets/icons）

<template>
  <svg-icon icon-class="menu"/>
</template>
<script setup lang="ts">
	import SvgIcon from '@/components/SvgIcon/index.vue';
</script>