1.下载插件 vite-plugin-svg-icons

npm i vite-plugin-svg-icons -D

2.配置vite插件

        vite.config.ts文件配置vite-plugin-svg-icons插件

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'    // 封装svg图标

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
    }),
    //......
  ],

    //......
})

3.引入插件

        main.tsx文件引入vite-plugin-svg-icons插件

import 'virtual:svg-icons-register'

4.封装组件

        新建SvgIcon.tsx文件封装组件

import { useMemo } from "react"

interface propsInterface {
  name:string
  size?:string
  color?:string
  profix?:string
}

export default function SvgIcon(props:propsInterface) {
  const size = props.size ?? "36px"
  const color = props.color ?? ""
  const profix = props.profix ?? "icon"

  const iconName = useMemo<string>(()=>{
    return `#${profix}-${props.name}`
  },[profix,props.name])

  return (
    <svg style={{height:size,width:size}}>
      <use href={iconName} fill={color} />
    </svg>
  )
}

5.组件的使用

        将svg文件存放在/src/assets/icons文件夹中，使用时传递文件名称作为name参数调用SvgIcon组件。size参数指定图标大小，color参数指定图标颜色。

import SvgIcon from "@/components/SvgIcon/SvgIcon"

export default function App() {
  return (
    <div>
      <SvgIcon name="user" size="20"/>
    </div>
  )
}

附：

iconfont-阿里巴巴矢量图标库