Vue3 vite中引入 SVG

1. 安装依赖

首先，需要安装 vite-plugin-svg-icons 插件来处理项目中的 SVG 图标。该插件允许你将多个 SVG 图标合并为一个 symbol，并通过 <use> 标签引用。

npm install vite-plugin-svg-icons -D

依赖说明：

• vite-plugin-svg-icons：该插件可以自动扫描指定目录下的 SVG 文件，并生成一个包含这些图标的 SVG Sprite。

2. 配置 vite.config.js

在 vite.config.js 中配置 vite-plugin-svg-icons 插件，使得项目能够正确处理 SVG 文件。

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/icons')],
      // 指定 symbolId 格式
      symbolId: 'icon-[name]',
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});

配置说明：

• iconDirs：指定需要处理的 SVG 图标文件夹。
• symbolId：为每个 SVG 文件生成唯一的 symbolId，例如 icon-home，以便通过 <use> 标签引用。

3. 创建存放 SVG 图标的文件夹

在项目的 src 目录下创建 icons 文件夹，用于存放你的 SVG 图标。

项目结构示例：

src
├── assets
│   ├── icons
│   │   ├── home.svg
│   │   ├── user.svg
│   │   └── settings.svg
...

重要提示：

将所有需要用作图标的 SVG 文件放在 src/assets/icons 目录下，确保它们能够被正确处理。

4. 创建 SvgIcon 组件

为了方便使用 SVG 图标，我们封装一个 SvgIcon.vue 组件。

<template>
  <svg 
    :class="svgClass" 
    :style="svgStyle"
    aria-hidden="true"
  >
    <use :xlink:href="`#icon-${iconName}`"></use> <!-- 引用 symbolId -->
  </svg>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  // 图标名称，例如：home
  iconName: {
    type: String,
    required: true,
  },
  // 自定义样式类名
  className: {
    type: String,
    default: '',
  },
  // 图标宽度，默认 1em
  width: {
    type: String,
    default: '1em',
  },
  // 图标高度，默认 1em
  height: {
    type: String,
    default: '1em',
  },
  // 颜色，默认继承文本颜色
  color: {
    type: String,
    default: 'currentColor',
  }
});

// 计算 class
const svgClass = computed(() => `svg-icon ${props.className}`);

// 计算内联样式
const svgStyle = computed(() => ({
  width: props.width,
  height: props.height,
  fill: props.color,
}));
</script>

<style scoped>
/* 默认样式 */
.svg-icon {
  display: inline-block;
  vertical-align: middle;
  transition: fill 0.3s;
}
</style>

组件说明：

• ✅ iconName：通过这个 prop 指定要显示的图标名称，对应 symbolId 中的 [name]。
• ✅ 支持 width、height、color 作为 props 传入
• ✅ 默认 fill: currentColor，继承文本颜色
• ✅ 可通过 className 传入额外的 CSS 类名
• ✅ 使用 computed 计算 class 和 style，提高性能
• ✅ 默认 display: inline-block; vertical-align: middle;，确保 SVG 适配文本
• ✅ 添加 transition: fill 0.3s;，让颜色变换更平滑

5. 全局注册 SvgIcon 组件

在 src/main.js 中全局注册 SvgIcon 组件，并自动加载所有 SVG 文件。

import { createApp } from 'vue';
import App from './App.vue';
import SvgIcon from '@/components/SvgIcon.vue'; // 引入 SvgIcon 组件
import 'virtual:svg-icons-register'; // 引入 SVG 图标

const app = createApp(App);

app.component('svg-icon', SvgIcon);

app.mount('#app');

重要说明：

• virtual:svg-icons-register：这是 vite-plugin-svg-icons 插件提供的虚拟模块，用于加载和注册所有的 SVG 图标。

6. 在页面中使用 SVG 图标

1. 在项目中创建一个 svg 文件：

你可以在项目的 src/assets/icons 目录下创建一个任意命名的 SVG 文件，命名随意，如 home.svg。

2. 将 SVG 图标代码复制到文件中：

打开你新建的 SVG 文件，将从设计工具或阿里图标库复制的 SVG 代码粘贴进来。

例如，home.svg 文件内容可能是：

<svg t="1606813019040" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2731" width="200" height="200"><path d="M512 64C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64z" p-id="2732"></path></svg>

3. 项目中引入并使用：

通过在 main.js 中引入配置的方式，所有 src/assets/icons 目录下的 SVG 文件都会自动加载。使用时只需要在模板中引用即可：

<svg-icon icon-name="home"></svg-icon>

这里的 home 对应的是你新建的 home.svg 文件名，不需要带上 .svg 后缀。

注意事项

• 文件名不能重复：不同图标的文件名必须唯一，因为文件名决定了你在使用时的 symbolId。
• SVG 文件内容需要标准：确保粘贴进来的 SVG 代码是标准的 SVG 格式，不然可能会出现渲染问题。

4. 常见报错

使用 vite-plugin-svg-icons 插件时缺少 fast-glob 依赖导致的。vite-plugin-svg-icons 插件依赖于 fast-glob 来处理文件的路径匹配，而你的项目中可能没有自动安装这个依赖。

解决方法：

你可以手动安装 fast-glob 依赖来解决这个问题。

1. 运行以下命令安装 fast-glob：

npm install fast-glob

或者如果你使用的是 yarn：

yarn add fast-glob

2. 安装完成后，重新启动开发服务器：

npm run dev

或者

yarn dev

原因分析：

vite-plugin-svg-icons 依赖 fast-glob 来处理 SVG 图标的路径。如果项目中缺少这个包，Vite 会在启动时抛出 ERR_MODULE_NOT_FOUND 的错误，因为无法找到该包。

7. 使用阿里图标库的 SVG 图标

如果需要使用阿里图标库中的 SVG 图标，可以通过以下两种方式实现：

方式一：下载 SVG 文件

将阿里图标库中的 SVG 图标下载后，放入 src/assets/icons 目录中，按照前面介绍的方式使用即可。

方式二：通过在线链接引入

1. 在 src/assets/svg 目录下新建 iconfont.js 文件，并将阿里图标库的在线地址代码粘贴进去。
2. 在 src/main.js 中引入：

import '@/assets/svg/iconfont.js';

重要提示：

阿里图标库中的图标也可以通过 <use> 标签进行引用，类似前面的 SvgIcon 组件用法。

---

8. 更加简单的方式：通过 class 使用阿里图标库

阿里图标库除了支持通过 <use> 标签使用图标外，还提供了更简单的通过 class 使用图标的方式。

使用步骤：

1. 获取 iconfont.css 文件：

   在 阿里图标库 (opens new window) 上选择你的图标库，点击“下载代码”按钮。下载后的文件中包含一个 iconfont.css 文件。

2. 引入 iconfont.css 文件：

   在你的项目中引入这个 iconfont.css 文件：

   import '@/assets/iconfont/iconfont.css';
   

3. 通过 class 使用图标：

   现在，你可以直接在 HTML 中通过 class 使用图标，而无需使用复杂的 <svg> 和 <use> 语法：

   <i class="iconfont icon-home"></i>
   

   其中，icon-home 是图标在阿里图标库中的类名。

这种方式的优势：

• 简便：无需手动配置 SVG 相关的 loader 和处理逻辑，只需要引入 iconfont.css 文件即可。
• 快速集成：直接通过 class 使用图标，不需要关心 <use> 等复杂的语法，适合大量使用图标的场景。

---

总结

• 简单集成：如果你只需要快速使用图标，推荐使用阿里图标库的 iconfont.css 方式，直接通过 class 引用图标。
• 灵活控制：如果你需要对 SVG 进行更细粒度的控制，推荐使用 <use> 标签和 SVG 组合的方式。