vue3 + js + vite创建的项目中配置svg图

安装

npm install vite-plugin-svg-icons
npm install fast-glob

vite.config.js文件中配置如下内容

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default defineConfig({plugins: [vue(),createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],symbolId: 'icon-[name]'})]
})

自定义组件，在项目中自定义一个名为svgIcon.vue的组件，该组件的内容如下

<template><div><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" :fill="color" /></svg></div>
</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(() => `#icon-${props.iconClass}`)const svgClass = computed(() => props.className ? `svg-icon ${props.className}` : 'svg-icon')</script>
<style scoped>.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>

全局引入svgIcon组件

在main.js中全局引入如下内容

import 'virtual:svg-icons-register'
import SvgIcon from './components/svgIcon.vue'
const app = createApp(App)
app.component('svg-icon', SvgIcon)
app.use(router)
app.mount('#app')

使用svgIcon组件

这里假设在组件index.vue中使用

<template><div><svg-icon icon-class="vue"/></div>
</template>
<script setup></script>
<style scoped>
</style>

icon-class="vue"绑定的vue，其实就是在“src/assets/icons/vue.svg”这个图片