Vue3+vite使用svg图标

1.安装vite-plugin-svg-icons

yarn add vite-plugin-svg-icons -D

npm i vite-plugin-svg-icons -D

2.在中进行配置

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
    plugins:[
        vue(),
        createSvgIconsPlugin({
          // 指定需要缓存的图标文件夹(路径为存放所有svg图标的文件夹不单个svg图标)
          iconDirs: [((), 'src/assets/icons/svg')],
          // 指定symbolId格式
          symbolId: 'icon-[dir]-[name]'
        })
    ]
})

3.创建svg组件

文件路径：src/components/SvgIcon/

<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName" :fill="color"/>
    </svg>
</template>

<script setup>

import { computed } from 'vue'

const props = defineProps({
    iconClass: {
        type: String,
        required: true
    },
    className: {
        type: String,
        default: ''
    },
    color: {
        type: String,
        default: ''
    }
})

const iconName = computed(() => {
    return `#icon-${}`
})
const svgClass = computed(() => {
    if () {
        return `svg-icon ${}`
    }
    return 'svg-icon'
})
</script>

4.在中引入组件和脚本，并挂载组件

import { createApp } from 'vue'
import App from './'

// 引入注册脚本
import 'virtual:svg-icons-register'
// 引入组件
import SvgIcon from '@/components/SvgIcon/'

const app = createApp(App)

// 全局组件挂载
('svg-icon', SvgIcon)

('#app')

5.使用

// icon-class是svg图标名称，class-name是样式类名
<svg-icon class-name="search-icon" icon-class="search" />