@ecoportal/相册
国家预防机制 EcoPortal React 图标在设计系统中的软件包. 软件包。 。 。 .
发展
添加/删除图标
图标集由 src/icons 目录。 里面的任何图标都会通过 yarn icons要添加或删除图标,只需添加或删除.svg文件.
图标准则
所有图标 src/icons 目录应在顶端 Category 文件夹例如. Buildings/building-single.svg。图标通过 svg 文件提供。 如果一个svg是用所有单一颜色制作的 path因此,它们不应该有一套填充装置,以便可以方便地在进口的任何地方进行造型.
不出版的链接
如果您希望在软件包中添加图标并测试它们, 而不在此 repo 运行中发布 npm link 在您的机器上创建全局链接。 然后,导航到另一个项目消耗 @ecoportal/icons 运行 npm link @ecoportal/icons 在那个项目。 这将在本地构建此套件与其它项目所消耗的东西之间形成一个并联. 一次快乐的出版.
生态门户图标
为EcoPortal设计系统所收藏的SVG图标,为树摇所优化.
安装
npm install @ecoportal/icons
# or
yarn add @ecoportal/icons
使用量
导入图标有三种方法,每种方法对捆绑大小有不同的影响:
1. 标准进口
从主入口导入全部图标 :
import {
EpBusinessCalendarFill,
EpCommunicationChatFill,
} from "@ecoportal/icons";
const MyComponent = () => (
<div>
<EpBusinessCalendarFill />
<EpCommunicationChatFill />
</div>
);
虽然这种方法是方便的,但如果只使用几个图标,可能会产生更大的捆绑尺寸.
2. 类别导入(推荐来自同类的多图标)
如果您需要同一类别中的多个图标,可以导入整个类别 :
import * as BusinessIcons from "@ecoportal/icons/Business";
const MyComponent = () => (
<div>
<BusinessIcons.EpBusinessCalendarFill />
<BusinessIcons.EpBusinessBriefcaseFill />
</div>
);
这种方法大大降低了捆绑大小,因为它只包括特定类别的图标.
3. 直接部件进口(建议最佳捆绑尺寸)
为了实现最大优化,您可以直接从其类别中导入每个图标:
import EpBusinessCalendarFill from "@ecoportal/icons/Business/EpBusinessCalendarFill";
const MyComponent = () => (
<div>
<EpBusinessCalendarFill />
</div>
);
这种方法可以确保最小的捆绑大小,因为它只导入所需的确切图标.
套装大小比较
| 导入方法 | 套装大小 | 节省对标准导入 |
|---|---|---|
| 标准导入 | ~3.5 甲基溴 | - 说吧 |
| 类别导入 | ~250 KB 键 | ~93% (中文(简体) ) |
| 直接导入 | ~3 KB 键 | 约99.9% |
图标属性
所有图标都接受标准的SVG和React道具:
<EpBusinessCalendarFill
color="red"
size={24}
className="my-icon-class"
onClick={() => console.log("Icon clicked")}
/>
图标命名公约
所有图标都遵循一致的命名模式:
Ep[Category][Name][Style]
例如:
EpBusinessCalendarFill- 来自商业类的已填充日历图标EpCommunicationChatLine- 来自通信类别的概要聊天图标
可用类别
- 行动
- 大楼
- 商业
- 通讯
- 自定义
- 设计
- 发展
- 设备
- 文档
- 编辑器
- 财务
- 卫生
- 日志
- 地图
- 媒体
- 其他人员
- 系统
- 用户
- 天气
发展
要在软件包中添加新图标 :
- 在相应的目录中添加 SVG 文件
src/icons/ - 增加软件包版本
package.json - 运行
yarn build来编译软件包 - 使用
yarn test测试树摇动的效果 - (备选) 添加新映射到
iconMapping.js(仅限角名)
发布
- 运行
yarn build以捆绑图标以供发布. - 运行
yarn publish向国家预防机制公布新的图标.
注:只运行 yarn publish 修改经过审查后。 软件包版本会在发布后更改.