vue3+vite使用svg图片

一、下载插件

yarn add vite-plugin-svg-icons -D

// or

npm i vite-plugin-svg-icons -D

二、配置

1、vite.config.ts

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

2、在src/assets目录中添加icon/svg目录，svg格式的图片放在src/assets/icon/svg/下

3、src/components目录下创建icon/icon-component.vue文件，代码：

<template>
    <!-- aria-hidden：默认为false，设置为true表示会把整个元素包括子元素从可访问树（AOM）上移除，但是在DOM树上还是存在的 -->
    <!-- fill：如果在动画接收还需要保持动画的值，可用于设置颜色 -->
    <svg :class="'svg-icon ' + ($attrs.iconClass ? $attrs.iconClass : '')" aria-hidden="true">
        <use class="svg-use" :href="'#' + $attrs.iconName" />
    </svg>
</template>
 
<script setup>
import { defineComponent, computed } from 'vue'
// 可以打印所有注册的svg图标
// import ids from 'virtual:svg-icons-names'
 
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>

4、main.ts

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


const app = createApp(App);

app.component('svg-icon', SvgIcon)
app.mount('#app')

三、使用svg图片

<svg-icon iconName="svg图片的名字"></svg-icon>