使用vite+ts开发vue3项目 怎么使用svg图标比较好

在项目开发中，svg图标的使用是非常常见的，可以在代码中直接引入svg图标，但是svg图标是一串很长的字符串，直接在代码中使用对阅读代码不友好，影响代码直观性，所以可以使用vite插件 vite-plugin-svg-icons封装成SvgIcon组件

1.项目安装 vite-plugin-svg-icons 依赖 注：为了解决vite运行时报错，还需要安装 fast-glob

yarn add fast-glob yarn add vite-plugin-svg-icons 或者 npm install fast-glob npm install vite-plugin-svg-icons

2.vite.config.ts 中配置

import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig(() => {
  return {
    plugins: [
      vue(),
      createSvgIconsPlugin({
        // 指定存放svg的文件夹路径
        iconDirs: [resolve(process.cwd(), 'src/assets/svg/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[name]',
      }),
    ],
    ...
  }
})

3.在项目中创建存放svg文件夹 例如：src/assets/svg/icons，将svg图标存储到该文件夹下面即可

4.在svg项目下创建index.vue文件

<script lang="ts" setup>
import { computed } from 'vue'
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: '',
  },
})
const iconName = computed(() => `#icon-${props.name}`)
const svgClass = computed(() => {
  if (props.name) return `svg-icon icon-${props.name}`
  return 'svg-icon'
})
</script>
<template>
  <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
     <!-- use 元素在 SVG 文档内取得目标节点，并在别的地方复制它们 -->
    <use :xlink:href="iconName"></use>
  </svg>
</template>
<style lang="less">
.svg-icon {
  width: 1em;
  height: 1em;
  // 图标基线问题
  vertical-align: middle;
  // 定义svg图标颜色，currentColor是一个变量，表示当前元素的color值，如果当前元素未设置color值，则从父元素继承
  fill: currentColor;
  overflow: hidden;
}
</style>

5.在main.ts中引入

// svg引入
import svgIcon from '@/assets/svg/index.vue'
// 虚拟模块的引入方式，用于给脚手架插件在打包和开发时做相应的处理，如果没有这行代码，svg图标将无法正常展示
import 'virtual:svg-icons-register'
import App from './App.vue'
const app = createApp(App)
// 注册为全局组件
app.component('svg-icon', svgIcon)

6.在组件中使用，name是对应的svg图标文件名称，color是图标显示的颜色

<template>
  <svg-icon name="addUser" color="#eee" />
</template>