项目集成 SVG 图标

在项目开发过程中，我们经常会用到 SVG 矢量图标，相比传统的 img 图片，SVG 图标具有以下优势：

• 更小的体积，减少资源占用，提升页面性能。
• 支持 CSS 颜色、大小修改，无需重新加载资源。
• 可作为组件使用，支持动态变化，扩展性更强。

在 Vue3 + Vite 项目中，我们可以使用 vite-plugin-svg-icons 插件来高效管理 SVG 图标库，并封装成 全局组件 供项目使用。

---

1. 安装 SVG 插件

首先，我们需要安装 vite-plugin-svg-icons 这个 Vite 插件：

pnpm install vite-plugin-svg-icons -D

如果你的项目使用 npm 或 yarn，可以使用：

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

📌 说明

• vite-plugin-svg-icons 允许我们将 SVG 文件 作为 组件 直接使用，而不需要额外的 img 标签。

---

2. 在 Vite 中配置 SVG 插件

我们需要在 vite.config.ts 中注册插件并指定 SVG 图标的存放目录。

修改 vite.config.ts

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({
      // 指定存放 SVG 图标的目录
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 定义 symbolId 格式
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});

📌 说明

• iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')]
  

  • 指定存放 SVG 图标 的目录，所有 SVG 图标文件必须放入 src/assets/icons/ 目录下。

• symbolId: 'icon-[dir]-[name]'
  

  • 生成的 <symbol> ID 规则

    ，例如

    src/assets/icons/user.svg
    

    在 HTML 里会被注册为：

    <symbol id="icon-user"></symbol>
    

---

3. 在项目入口 main.ts 中引入插件

在 main.ts 中，我们需要注册 SVG 图标库，让 vite-plugin-svg-icons 生效。

修改 main.ts

import { createApp } from 'vue';
import App from './App.vue';
import 'virtual:svg-icons-register'; // 引入 vite-plugin-svg-icons 生成的图标
const app = createApp(App);
app.mount('#app');

📌 说明

• 'virtual:svg-icons-register' 这个虚拟模块用于加载 SVG 图标，必须在入口文件 main.ts 中引入。

---

4. 创建 SVG 全局组件

为了让 SVG 图标在项目中更加易用、可复用，我们可以封装成全局组件。

创建 src/components/SvgIcon/index.vue

<template>
  <svg :style="{ width: width, height: height }">
    <use :xlink:href="prefix + name" :fill="color"></use>
  </svg>
</template>

<script setup lang="ts">
defineProps({
  // SVG 图标的前缀（vite-plugin-svg-icons 生成）
  prefix: {
    type: String,
    default: '#icon-'
  },
  // SVG 图标名称
  name: {
    type: String,
    required: true
  },
  // 颜色
  color: {
    type: String,
    default: ''
  },
  // 宽度
  width: {
    type: String,
    default: '16px'
  },
  // 高度
  height: {
    type: String,
    default: '16px'
  }
});
</script>

<style scoped></style>

📌 说明

• prefix: '#icon-' 需要与 vite-plugin-svg-icons 配置的 symbolId 规则一致。
• 组件支持 传递颜色、大小，以便适应不同需求。

---

5. 全局注册 SVG 组件

为了在项目的任意组件中都能使用 SvgIcon，我们需要全局注册它。

创建 src/components/index.ts

import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';

// 需要全局注册的组件
const components: { [name: string]: Component } = { SvgIcon };

export default {
  install(app: App) {
    Object.keys(components).forEach((key: string) => {
      app.component(key, components[key]);
    });
  },
};

在 main.ts 中安装全局组件

import globalComponent from './components/index';
app.use(globalComponent);

---

6. 在 Vue 组件中使用 SVG 图标

完成以上步骤后，我们可以在任何组件中 直接使用 SvgIcon。

<template>
  <div>
    <SvgIcon name="user" width="30px" height="30px" color="blue" />
    <SvgIcon name="home" width="40px" height="40px" color="red" />
  </div>
</template>

📌 说明

• name="user" 表示 src/assets/icons/user.svg
• width="30px" 设置 SVG 宽度
• color="blue" 设置 SVG 颜色