vue3引入SvgIcon

这里使用vite-plugin-svg-icons插件

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

在vite.config.js处引入插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default defineConfig({
  css: {
  },
  plugins: [
...
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')]
    })
...
  ],
})

在main.js里开启注册

import 'virtual:svg-icons-register'

在components处新建svg组件SvgIcon.vue

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

<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
    prefix: {
        type: String,
        default: 'icon',
    },
    name: {
        type: String,
        required: true,
    },
    color: {
        type: String,
        default: '#333',
    },
})
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
<style scoped lang='scss' >
.svgclass {
    width: 1em;
    height: 1em;
    overflow: hidden;
    vertical-align: top;
}
</style>

在main.js里注册为全局插件

import 'virtual:svg-icons-register'
import SvgIcon from './components/SvgIcon.vue'
app.component('svg-icon', SvgIcon)

就可以在.vue里面使用了

<template>
    <div>
        <SvgIcon name="show"></SvgIcon>
    </div>
</template>