vue项目使用svg图标

下面是在 Vue 3 项目中完整引入和使用 vite-plugin-svg-icons 的步骤

1、安装插件

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

2、配置 Vite

在 vite.config.ts 或 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/svg')],// 指定symbolId格式symbolId: 'icon-[name]',// 可选配置svgoOptions: {plugins: [{ name: 'removeAttrs', params: { attrs: ['fill'] } } // 移除svg默认颜色]}})]
})

3. 创建 SVG 组件

<script setup>
import { computed } from 'vue'const props = defineProps({name: {type: String,required: true,},className: {type: String,default: '',},size: {type: [Number, String],default: 15,},circle: {type: Boolean,default: false,},color: String,defaultImg: String,
})
const style = computed(() => {const size = typeof props.size === 'string' ? props.size : `${props.size}px`return {width: size,height: size,borderRadius: props.circle ? '50%' : null,color: props.color,}
})
const symbolId = computed(() => `#icon-${props.name}`)
</script>
<template><svg aria-hidden="true" class="svg-icon" :class="className" :style="style"><use :xlink:href="symbolId" /></svg>
</template>
<style scoped>
.svg-icon {/* width: 30px;height: 30px; */display: inline-block;vertical-align: -2px;fill: currentColor;
}
</style>

4. 全局注册组件

在 main.js 中：

import { createApp } from 'vue'
import App from './App.vue'
import 'virtual:svg-icons-register' // 引入注册脚本
import SvgIcon from '@/components/SvgIcon.vue' // 引入组件const app = createApp(App)// 全局注册svg组件
app.component('SvgIcon', SvgIcon)app.mount('#app')

5. 使用图标

将 SVG 文件放入 src/assets/svg 目录

在组件中使用：

<div class="img-list" v-for="(item, index) in iconlist" :key="index" @click="itemClick(item)">
<div class="default-img"><!-- 在组件中使用 --><SvgIcon :name="item.iconname" size="30" class="svg-icon" />
</div>
</div>
const list = ref([{iconname: 'float-robot',id: 1},{iconname: 'float-wx',id: 2},{iconname: 'float-tell',id: 3},{iconname: 'float-qq',id: 4},{iconname: 'float-message-board',id: 5}
])
<style scoped lang="scss">
.img-list{padding: 20px;background: #fff;display: flex;flex-direction: column;justify-content: space-between;justify-items: center;height: 330px;cursor: pointer;box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.12);border-radius: 34px;box-sizing: border-box;&:hover {.default-img {.svg-icon {color: #005fff; // 默认颜色fill: currentColor; // 继承color颜色transition: color 0.3s ease; // 添加过渡效果}}}
}
</style>

最后看效果：鼠标经过svg图标变蓝色