SVG Icon 使用规范

Vue3 + Vite项目

标准

在 Vue3 + Vite项目中使用 SVG 图标，推荐使用官方插件 vite-svg-loader ，完成图标以组件形式导入。同时，针对特殊场景，可以切换到 url 或者 raw 导入模式。

vite-svg-loader 安装

在项目中安装并配置插件：

npm install vite-svg-loader --save-dev

配置文件例：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-svg-loader';

export default defineConfig({
  plugins: [
    vue(),
    svgLoader(), // 导入 vite-svg-loader
  ],
});

使用方式

1. 组件形式导入：
   导入 SVG 文件作为 Vue 组件：

2. 作为 URL 形式导入：
   导入 SVG 图标的网站资源地址：

   import myIconUrl from '@/assets/icons/my-icon.svg?url';
   console.log(myIconUrl); // 返回 SVG 文件的地址

3. 作为原始文本导入：
   导入原始的 SVG 文本：

   import myIconRaw from '@/assets/icons/my-icon.svg?raw';
   console.log(myIconRaw); // 返回 SVG 文件的原始内容

特殊场景

在下列场景中，可以使用不同导入模式：

1. 需要将 SVG 转为 Base64 格式作为背景图标时，可使用 url 导入。
2. 在系统动态加载图标或分析内容时，可使用 raw 导入。
3. 团队内部实施图标规范，组件形式作为主要方式，对于导入模式做进一步限制。

最佳实践

1. 精简化图标设计：
   尽量使用简单的图标设计，减少优化成本和导入处理处的复杂性。

2. 共用和统一：
   将全部 SVG 文件放在突出的目录，如 src/assets/icons/ ，便于统一管理。

3. 清除无用图标：
   尽量清除项目中不再使用的 SVG 文件，减少本地文件的资源与空闲占用。

4. 分类和命名：
   图标的命名优先采用下列格式：

   • 名称规范：icon-[功能名称] （例如：icon-user）
   • 分类策略：按功能或用途分类文件夹，例如 auth-icons 和 nav-icons

5. 测试和验证：
   使用导入后，确保 SVG 正常显示，包括其样式和与组件的选择器匹配。

PS

如果使用<img />标签来显示SVG icon，那么将失去通过CSS自定义部分样式（如描边颜色等）的功能，因为会被作为一张图片处理，而不是原始的SVG结构。