# @ecoportal/icons 中文文档
规范地址：https://npmcn.com/package/%40ecoportal/icons/
版本：3\.5\.0
npm 元数据更新时间：2026-10-18T17:26:43.849Z
中文译文更新时间：2026-11-13T06:17:15.624Z
软件包许可：ISC
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40ecoportal/icons
原文对照：https://npmcn.com/package/%40ecoportal/icons/?lang=original
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：16.2 MB，9292 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=16\.0\.0，react-dom \>=16\.0\.0
- 首次发布：2023-04-19T01:34:46.466Z
- 最新版本发布：2026-10-18T17:26:43.660Z
- 近 30 天下载量：2729（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：79（近 12 个月 27 个）
## 中文简介
生态门户设计系统的图标
## 安装
```sh
npm install @ecoportal/icons
```
也可以使用：`pnpm add @ecoportal/icons`、`yarn add @ecoportal/icons`、`bun add @ecoportal/icons`
## README
# @ecoportal/相册
国家预防机制 EcoPortal React 图标在设计系统中的软件包. [软件包](https://www.npmjs.com/package/@ecoportal/icons)。 。 。 .
## 发展
### 添加/删除图标
图标集由 `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图标,为树摇所优化.
## 安装
```bash
npm install @ecoportal/icons
# or
yarn add @ecoportal/icons
```
## 使用量
导入图标有三种方法,每种方法对捆绑大小有不同的影响:
### 1\. 标准进口
从主入口导入全部图标 :
```jsx
import {
EpBusinessCalendarFill,
EpCommunicationChatFill,
} from "@ecoportal/icons";
const MyComponent = () => (
);
```
虽然这种方法是方便的,但如果只使用几个图标,可能会产生更大的捆绑尺寸.
### 2\. 类别导入(推荐来自同类的多图标)
如果您需要同一类别中的多个图标,可以导入整个类别 :
```jsx
import * as BusinessIcons from "@ecoportal/icons/Business";
const MyComponent = () => (
);
```
这种方法大大降低了捆绑大小,因为它只包括特定类别的图标.
### 3\. 直接部件进口(建议最佳捆绑尺寸)
为了实现最大优化,您可以直接从其类别中导入每个图标:
```jsx
import EpBusinessCalendarFill from "@ecoportal/icons/Business/EpBusinessCalendarFill";
const MyComponent = () => (
);
```
这种方法可以确保最小的捆绑大小,因为它只导入所需的确切图标.
## 套装大小比较
| 导入方法 | 套装大小 | 节省对标准导入 |
| --- | --- | --- |
| 标准导入 | ~3.5 甲基溴 | \- 说吧 |
| 类别导入 | ~250 KB 键 | ~93% (中文(简体) ) |
| 直接导入 | ~3 KB 键 | 约99.9% |
## 图标属性
所有图标都接受标准的SVG和React道具:
```jsx
console.log("Icon clicked")}
/>
```
## 图标命名公约
所有图标都遵循一致的命名模式:
`Ep[Category][Name][Style]`
例如:
- `EpBusinessCalendarFill` - 来自商业类的已填充日历图标
- `EpCommunicationChatLine` - 来自通信类别的概要聊天图标
## 可用类别
- 行动
- 大楼
- 商业
- 通讯
- 自定义
- 设计
- 发展
- 设备
- 文档
- 编辑器
- 财务
- 卫生
- 日志
- 地图
- 媒体
- 其他人员
- 系统
- 用户
- 天气
## 发展
要在软件包中添加新图标 :
1. 在相应的目录中添加 SVG 文件 `src/icons/`
2. 增加软件包版本 `package.json`
3. 运行 `yarn build` 来编译软件包
4. 使用 `yarn test` 测试树摇动的效果
5. (备选) 添加新映射到 `iconMapping.js` (仅限角名)
## 发布
1. 运行 `yarn build` 以捆绑图标以供发布.
2. 运行 `yarn publish` 向国家预防机制公布新的图标.
注:只运行 `yarn publish` 修改经过审查后。 软件包版本会在发布后更改.
## 常见问题
### @ecoportal/icons 是什么？
生态门户设计系统的图标
### 如何安装 @ecoportal/icons？
在项目目录运行 npm install @ecoportal/icons，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.0\.0）、react-dom（\>=16\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @ecoportal/icons 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @ecoportal/icons 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @ecoportal/icons 可以商用吗？
@ecoportal/icons 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @ecoportal/icons 的下载量有多少？
根据 npm 官方下载统计，@ecoportal/icons 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,729 次，日均约 91 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @ecoportal/icons 还在维护吗？
最新版本 3\.5\.0 发布于 2026/10/19（25 天前）；至今共发布 79 个版本，其中过去 12 个月发布了 27 个；首次发布于 2023/04/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。