vue3+vite使用svg图片方式
作者：zh814l
这篇文章主要介绍了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" rel="external nofollow" />
</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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。