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”这个图片