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

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python