前言
在项目开发中，使用 svg 图标是一种灵活、高效的方式。大多数公司的 UI 设计师通常会提供蓝湖（Lanhu）或 Figma 的设计稿，有时也可能直接将图标上传到 阿里图标库 。然而，这些图标库经常存在以下问题：
- 命名不规范，查找困难
- 部分图标导入后丢失线条或填充
目前，大多数项目使用组件库作为基础 UI 组件，同时也需要根据设计稿或其他图标库补充额外的图标。这些图标可以导出为 svg 格式后，便于在项目中统一使用和管理
图标来源
1、项目组件库
组件库（如 Element Plus、Ant Design Vue 等）通常提供一套配套的图标，可以直接通过 import 的方式使用。如果组件库的图标足够覆盖需求，可以优先选择这些图标
2、设计稿导出
从蓝湖、Figma 等设计工具中，可以将设计稿上的图标导出为 svg 格式文件。这是确保图标与设计稿一致的最直接方式
3、图标库网站
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 32 0 1 0 0-64H128a32 32 0 0 0 0 64"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"></path>
</svg>
通过以上方案，你可以在项目中灵活、高效地管理和使用 SVG 图标，提升开发体验和代码维护性！
