vue3+vite项目中显示SVG图片

使用vite显示本地svg图标

vite-plugin-svg-icons是一个Vite插件，其作用是将SVG图标文件转换为Vue组件，以便在Vue项目中使用。

使用vite-plugin-svg-icons插件，可以将SVG图标文件导入到项目中，并将其转换为可复用的Vue组件。这样，就可以像使用普通Vue组件一样使用这些SVG图标，包括在模板中直接使用、传递属性、绑定事件等。

该插件还提供了一些额外的功能，如自动按需引入图标、支持图标的自定义命名、支持指定图标大小等。

总之，vite-plugin-svg-icons插件的作用是简化在Vue项目中使用SVG图标的过程，提供了更加灵活和方便的方式来管理和使用这些图标。

vite-plugin-svg-icons 安装

node version: >=12.0.0

vite version: >=2.0.0

npm i vite-plugin-svg-icons -D
// 或者
yarn add vite-plugin-svg-icons -D
// 或者
pnpm install vite-plugin-svg-icons -D

配置使用vite-plugin-svg-icons

vite.config.ts 中的配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'export default () => {return {plugins: [createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd(), 'src/icons')],// 指定symbolId格式symbolId: 'icon-[dir]-[name]',/*** 自定义插入位置* @default: body-last*/inject?: 'body-last' | 'body-first'/*** custom dom id* @default: __svg__icons__dom__*/customDomId: '__svg__icons__dom__',}),],}
}

在 src/main.ts 内引入注册脚本

import 'virtual:svg-icons-register'

到这里 svg 已经引入可以使用

如何在Vue 组件使用

/src/components/SvgIcon.vue

<template><svg aria-hidden="true"><use :xlink:href="symbolId" :fill="color" /></svg>
</template><script>
import { defineComponent, computed } from 'vue'export default defineComponent({name: 'SvgIcon',props: {prefix: {type: String,default: 'icon',},name: {type: String,required: true,},color: {type: String,default: '#333',},},setup(props) {const symbolId = computed(() => `#${props.prefix}-${props.name}`)return { symbolId }},
})
</script>

icons 目录结构

# src/icons- icon1.svg
- icon2.svg
- icon3.svg
- dir/icon1.svg

/src/App.vue

<template><div><SvgIcon name="icon1"></SvgIcon><SvgIcon name="icon2"></SvgIcon><SvgIcon name="icon3"></SvgIcon><SvgIcon name="dir-icon1"></SvgIcon></div>
</template><script>
import { defineComponent, computed } from 'vue'import SvgIcon from './components/SvgIcon.vue'
export default defineComponent({name: 'App',components: { SvgIcon },
})
</script>