前言

在项目开发中，使用svg图标是一种灵活、高效的方式。大多数公司的UI设计师通常会提供蓝湖（Lanhu）或Figma的设计稿，有时也可能直接将图标上传到阿里图标库。然而，这些图标库经常存在以下问题：

命名不规范，查找困难部分图标导入后丢失线条或填充

目前，大多数项目使用组件库作为基础UI组件，同时也需要根据设计稿或其他图标库补充额外的图标。这些图标可以导出为svg格式后，便于在项目中统一使用和管理

图标来源1、项目组件库

组件库（如ElementPlus、AntDesignVue等）通常提供一套配套的图标，可以直接通过import的方式使用。如果组件库的图标足够覆盖需求，可以优先选择这些图标

2、设计稿导出

从蓝湖、Figma等设计工具中，可以将设计稿上的图标导出为svg格式文件。这是确保图标与设计稿一致的最直接方式

3、图标库网站阿里图标库：国内常用的图标库，支持导出SVG文件。不过，下载的图标需要手动清理无用属性，避免影响动态样式设置Iconify：提供丰富的开源图标集，支持多种格式，适合直接使用4、自定义命名与分类

将下载的图标进行适当命名，统一存放在项目的src/assets/svg-icons目录下，方便管理和使用

如何使用1、新增图标

将准备好的svg图标文件放入项目的src/assets/svg-icons目录，确保文件命名规范（例如：Search.svg、User.svg）

2、封装SvgIcon组件

项目中可以创建一个SvgIcon组件，用于动态加载和渲染图标文件

3、使用组件

项目中的SvgIcon是全局组件，可以在任意.vue文件中用以下方式使用

<SvgIcon name="Search"/><SvgIcon name="User" size="36"/><SvgIcon name="Delete" size="48" color="#ff0000"/>

name：指定图标文件名（无需扩展名）size：设置图标的宽高（支持px数值）name：设置图标颜色（默认使用currentColor）注意事项1、图标属性清理

下载或导出的svg文件可能包含多余的属性，如width、height、fill、class等。这些属性可能会干扰SvgIcon组件的动态样式绑定，应尽量清理

2、动态颜色与大小

图标文件中不应设置固定颜色（fill）或大小（width、height），以便通过组件参数动态控制外观样式。

3、命名规范

图标文件应采用大驼峰命名法，每个单词的首字母大写，单词间无分隔符，例如User.svg、Role.svg等等

4、Svg代码示例

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
  <path d="M128 544h768a32 320 100 -64 H128a32 320 0 64"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
  <path d="M480 480V128a32 320 0 164 0v352h352a32 320 11 064 H544v352a32 320 11 -640 V544H128a32 320 0 -64 z"></path>
</svg>

通过以上方案，你可以在项目中灵活、高效地管理和使用SVG图标，提升开发体验和代码维护性！