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 目录

在组件中使用：

html 复制代码

<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图标变蓝色