Vue3+vite使用svg图标

1.安装vite-plugin-svg-icons

yarn add vite-plugin-svg-icons -D

npm i vite-plugin-svg-icons -D

2.在vite.config.js中进行配置

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

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

3.创建svg组件

文件路径：src/components/SvgIcon/index.vue

<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-${props.iconClass}`
})
const svgClass = computed(() => {
    if (props.className) {
        return `svg-icon ${props.className}`
    }
    return 'svg-icon'
})
</script>

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

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

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

const app = createApp(App)

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

app.mount('#app')

5.使用

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