pig-ui/doc/SvgIcon.md

全局组件

• 组件支持四种svg 图标
• 四种图标均支持 color 和 size 属性，使用示例见下文：

# font-awesome的图标，使用 fa 作为前缀（带个空格）
<SvgIcon name="fa fa-pencil" />

# element-plus 的图标，使用 el-icon 作为前缀，图标名称请使用：首字母大写的驼峰语法
<SvgIcon name="ele-icon-Close" color="#8595F4" size="20" />

# 本地`/src/assets/icons`文件夹内的SVG图标，使用 local 作为前缀，文件名作为后缀
# 文件自动加载，新增请重新编译
<SvgIcon name="local-logo" />

# 阿里iconfont的图标，使用 iconfont 作为前缀（带个空格）
<SvgIcon name="iconfont icon-user" size="20" />

有时，Icon 组件会覆盖不了图标的原有颜色或大小，请检查 SVG 文件的源代码。

图标添加与配置

本地图标

1. 将 SVG 图标文件，放入本地/src/assets/icons文件夹，然后重新编译项目。
2. 系统会自动加载该目录下的所有图标文件备用，现在你可以使用Icon组件来显示图标了。
3. 示例：<SvgIcon name="local-SVG的文件名" />
4. 不建议在此文件夹放置非常大、非常多的文件，可能会影响系统加载速度，当确有此方面需求时，请将文件放置到其他位置，并单独导入和使用图标。

font-awesome 图标

1. 此图标库目前 pigx-ui 已经默认加载。加载代码在 /src/utils/setIconfont.ts中的 cssUrls 中。
2. 你可以直接使用 font-awesome 4.7.0 的所有图标，这些图标可以在这里 https://fontawesome.com.cn/faicons/ 找到，当然你也可以直接使用图标选择器寻找图标。
3. 示例：，注意图标名称一定是以 fa 加一个空格开头

element-plus 图标

1. 此图标库目前 pigx-ui 已经默认加载，加载代码在 /src/main.ts 执行的 elementIcons 方法中。
2. 你可以直接使用 element-plus/icons-vue ^2.0.10 的所有图标，在使用 element-plus 图标时，请使用ele 作为前缀，图标名称请使用：首字母大写的驼峰语法。
3. 示例：

iconfont 图标

1. 目前系统未使用任何 iconfont 图标，你可以获取 iconfont 图标库项目的 Font class 链接后，设置到 /src/utils/setIconfont.ts 中的 cssUrls 中，系统会自动加载链接中的所有图标以供使用。
2. 示例：<SvgIcon name="iconfont icon-user" />，注意图标名称一定是以 iconfont 加一个空格开头，以图标名称结尾。