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.tsvite.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. 使用图标

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

  2. 在组件中使用:

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

相关推荐
妮妮喔妮2 分钟前
图片上传 el+node后端+数据库
javascript·数据库·vue.js
求知若渴,虚心若愚。3 小时前
Error reading config file (/home/ansible.cfg): ‘ACTION_WARNINGS(default) = True
linux·前端·ansible
LinDaiuuj4 小时前
最新的前端技术和趋势(2025)
前端
paopaokaka_luck4 小时前
婚纱摄影管理系统(发送邮箱、腾讯地图API、物流API、webSocket实时聊天、协同过滤算法、Echarts图形化分析)
vue.js·spring boot·后端·websocket·算法·echarts
一只小风华~4 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟5 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
若梦plus6 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉6 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A6 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6667 小时前
React与Rudex的合奏
前端·react.js·前端框架