# @deriv/quill-icons 中文文档 规范地址：https://npmcn.com/package/%40deriv/quill-icons/ 版本：2\.14\.10 npm 元数据更新时间：2026-10-27T05:20:55.323Z 中文译文更新时间：2026-11-12T00:34:57.702Z 软件包许可：ISC 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40deriv/quill-icons 原文对照：https://npmcn.com/package/%40deriv/quill-icons/?lang=original 项目主页：https://github.com/deriv-com/quill-icons#readme 源码仓库：https://github.com/deriv-com/quill-icons ## 关键信息（来自 npm 元数据） - 包体积（解压后）：23.5 MB，16286 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：react \>= 16，react-dom \>= 16 - 首次发布：2023-09-20T07:23:11.591Z - 最新版本发布：2026-10-27T05:20:55.006Z - 近 30 天下载量：23894（2026-10-12 至 2026-11-10，npm 官方下载统计） - 已发布版本数：213（近 12 个月 35 个） ## 中文简介 这是从 figma 设计文件导出 quill 图标的中央寄存器 ## 安装 ```sh npm install @deriv/quill-icons ``` 也可以使用：`pnpm add @deriv/quill-icons`、`yarn add @deriv/quill-icons`、`bun add @deriv/quill-icons` ## README ![Deriv Quill Icons](https://npmcn.com/package/%40deriv/quill-icons/svg/Logo/LogoBrandDerivLogoCoral.svg) # [衍生基尔图标](https://quill-icons-park.pages.dev/) [![npm](https://img.shields.io/npm/v/@deriv/quill-icons.svg?style=flat-square)](https://www.npmjs.com/package/@deriv/quill-icons) 探索和整合来自 [衍生](https://deriv.com/) 带有易用回放组件. 这些图标是从一个Figma图标项目导出. ## 创建此库的动机 我们开发了Deriv Quill Icons图书馆,以解决我们各个项目的若干关键考虑: 1. **我们所有项目的一致性:** 通过创建Deriv Quill Icons,我们确保所有应用程序使用一致的设计语言。 所有图标都将具有相近的风格,大小和颜色. 2. **简单维护 :** 在中央图书馆管理所有图标,使得更新或修改它们更容易. 如果我们决定改变设计或添加新的图标,我们只需要在一个地方进行修改,更新将反映在我们所有的应用中. 3. **重复使用和效率:** 我们可以轻松地在应用程序的不同组件和页面中重复使用同一套图标。 这促进了代码可重复性并减少了冗余性,因为我们不需要重复图标资产或样式. 4. **自定义 :** 它使我们能够定制全球的图标。 例如,我们可以在一个地方改变所有图标的颜色方案,大小,或其他视觉方面,而不修改单个组件. 我们还可以很容易地把优化应用到我们的所有图标上. 5. **开发者生产率 :** 它能提高我们开发者的生产力。 开发者可以很容易地找到和使用他们所需要的图标,而无需每次搜索或创建新资产. ## 安装 ```bash npm i @deriv/quill-icons ``` 已发布的软件包是 **仅限无害环境管理** (单一) `dist/` 构建, 无普通JS `require`) (中文(简体) ). 使用 `import` 用于解析 `exports` 字段. **说明** 组件渲染 `` 标签由 **网络P** 资产(Figma PNG制成的被转换为WebP;复杂的3D美术不内含为SVG). 图标,标志等类别仍为最优化的SVG React组件. **使用量** ```jsx import { CurrencyAlgoIcon } from '@deriv/quill-icons'; const TestComponent = () => (

Lets go for a ?

); ``` ## 可用的图标类别 | 类别 | 构成部分 | 导入路径 | 说明 | | --- | --- | --- | --- | | **账户** | 22个 | `@deriv/quill-icons/Accounts` | 交易账户类型图标(DMT5, DXTrade等) | | **货币** | 第76条 | `@deriv/quill-icons/Currencies` | 密码货币和有价货币图标,包括多链USDC/USDT变体 | | **旗帜** | 页:1 | `@deriv/quill-icons/Flags` | 国家旗帜图标 | | **说明** | 294号 | `@deriv/quill-icons/Illustration` | 衍生光线主题插图(网络P后置) `` 包括: | | **说明** | 123国道 | `@deriv/quill-icons` | 中等大小的示例图标 | | **标签** | 4 625个 | `@deriv/quill-icons/LabelPaired` | 5 个大小的 UI 图标( Caption QQl) × 3 个重 (Regular, Bold, Fill) — 329 个独特的图标 | | **遗产** | 326号 | `@deriv/quill-icons/Legacy` | 为后向兼容性保留遗留图标集 | | **标记** | 641个 | `@deriv/quill-icons/Logo` | 衍生品牌、分品牌和支付方法标志 | | **市场** | 292 (英语) | `@deriv/quill-icons/Markets` | 金融市场和工具图标 | | **支付方法** | 第87条 | `@deriv/quill-icons/PaymentMethods` | 支付提供者和方法图标 | | **社会** | 第32条 | `@deriv/quill-icons/Social` | 社交媒体和平台图标 | | **独立** | 925 (中文(简体) ) | `@deriv/quill-icons/Standalone` | 可缩放的 UI 图标通过 `iconSize` 道具(xs-2xl)——329个跨正则,粗体,填充重量的独特图标 | | **贸易类** | 页:1 | `@deriv/quill-icons/TradeTypes` | 内置颜色的交易合同类型图标 | **树摇:** 插图模块导入一个 WebP并导出一个组件, 因此 `package.json` 套装 `"sideEffects": false`. Bundlers 然后放弃未使用的插图及其WebP文件. A 类 `**/Illustration/**` 边效果条目将每个插图资产保存在捆绑中. **类别范围进口(小桶至剖面):** ```jsx import { LabelPairedUserMdRegularIcon } from '@deriv/quill-icons/LabelPaired'; import { StandaloneArrowLeftRegularIcon } from '@deriv/quill-icons/Standalone'; import { TradeTypesVanillaCallIcon } from '@deriv/quill-icons/TradeTypes'; import { CurrencyUsdcEthereumIcon } from '@deriv/quill-icons/Currencies'; import { DerivLightWalletIcon } from '@deriv/quill-icons/Illustration'; ``` * * * # 贡献准则 ## 先决条件 我们用 [@figma-导出](https://www.npmjs.com/package/@figma-export/cli) 为导出 [图像组件](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma#:~:text=Components%20are%20elements%20you%20can,icons%2C%20layouts%2C%20and%20more.) 所以,请阅读他们的文件 并尝试适应他们的概念. 与 [@figma-导出](https://www.npmjs.com/package/@figma-export/cli) 我们导出到处理 `SVG` 为每个创建 `Figma Component` 并随 [变换- svg- with- svgo](https://github.com/marcomontalbano/figma-exporter/blob/HEAD/packages/cli/packages/transform-svg-with-svgo) 我们优化导出 `SVG`s. 这是变压器, 您可以添加/ 重新移动/ 更新 `SVG` 属性. ## 输出器 - [@figma-导出/输出-组件-s-svg](https://github.com/marcomontalbano/figma-exporter/blob/HEAD/packages/cli/packages/output-components-as-svg)数字 : 我们用这个生成 `SVG` 文档,您可以查看 `svg` 文件夹. - [@figma-export/output- 组件- as- svgr](https://github.com/marcomontalbano/figma-exporter/blob/HEAD/packages/cli/packages/output-components-as-svgr)数字 : 我们用这个生成 `React` 基于 `transformed (optimized) SVG` 文档。 你可以去检查他们 `src/react` 文件夹. - `npm run export:icons` 财务报告和审定财务报表 `npm run export:logos` 使用上面的 SVG/SVGR 输出器 - **所有图标和标志类别仍为 SVG React 组件**。 。 。 . - `npm run export` 从Figma取出 **没有擦去** `src/react`, (中文(简体) ), `svg`,或 `webp`,则 `finalize:figma` 仅为新文件添加桶/目录条目, 并删除已存在名称的日志副本 `PaymentMethods`。未更改的图标不要使用 git diff / PR . - **只说明(海关WebP管道)** - 那个 `Illustration` 类别不包括在 `export:icons` 导出为 **网络P** (法文) `sharp`),而不是SVG: (中文(简体) ) - `npm run export:illustrations` - 从Figma获取PNG制式(`scripts/export-illustrations-png.ts`),转换为WebP,写入为 `webp/Illustration/` 财务报告和审定财务报表 `src/react/Illustration/assets/`,然后写 `` 重现包装 `src/react/Illustration/`。 。 。 . - `npm run export:illustrations:3d` ——仅再出口账户/货币3D硬币图标(与其他插图相同为1×相片出处大小). - `npm run migrate:illustrations:png` ——下行后退:将已存在的光栅化 `svg/Illustration/*.svg` 输入 WebP 资产(需要磁盘上的 SVG 源). - `npm run sync:illustration:components` ——从已有的再生回形包装 `src/react/Illustration/assets/*.webp` 没有法格玛. - `npm run build` 将 WebP 资产复制到 `dist/react/Illustration/assets/` 供出版. 导入插图为 WebP 支持的组件 : ```jsx import { DerivLightWalletIcon } from '@deriv/quill-icons/Illustration'; ; ``` ## 安装前 - 节点18.0.0 - npm =\\ 9.0.0 (韩语) - git(用于 `contribution`(中文(简体) ) - Figma Token (选中) [这个](https://www.figma.com/developers/api#authentication) 为了自己而设) - Figma 文件标识 - 图片图标页面 ## 快开始 1. **输入工程目录** ```sh cd quill-icons ``` 2. 创建一个 `.env` 内部文件 `quill-icons` 含有此内容的文件夹 : ``` FIGMA_TOKEN=your_figma_access_token ``` 3. **安装您的依赖 :** ```sh npm ci ``` 4. **导出** (所需经费) `FIGMA_TOKEN` 内 `.env`: ```sh npm run export ``` 图标和标志导出为优化的 SVG React 组件; 插图导出为 WebP 资产通过 `export:illustrations` (列入 `export` 编号 : `rebuild`) (中文(简体) ). 只有 Git 记录 **新建或修改** 图标文件; Figma 未更改的现有图标未被更改. 5. **构建** (供当地出版或链接): ```sh npm run build ``` ## 命名公约 在奎尔设计系统中,我们利用命名惯例来方便地储存和定位其各自组中的组件. 命名公约之间略有不同 **Quill 图标**, (中文(简体) ), **Quill 日志** 财务报告和审定财务报表 **奎尔说明**这是专门满足他们的具体需要. ### 奎尔图标: \[分类名\]/\[标\]/\[标\]/\[标\] - **"类名"** 指图标所居住的类别,如货币、旗帜和市场图标等. - _(仅在适用的情况下)_ 这个 **"规模"** 只有在图标以多个不同大小提供时,才会添加命名公约的一部分. - **"Icon名称"** 是区分一个图标和另一个图标的每个图标的不同名称. - _(仅在适用的情况下)_ 适用于有变化的图标——如正则/粗放和白色/黑色. **使用此命名公约的图标示例 :** 1. **示例 / md / 衍生- md** = \[类别名\]/\[标\]/\[标\] 2. **旗帜/ 旗帜- malysia** = \[类名\] / \[类名\] 3. **独立 / sm / 抓取- dots- 垂直- sm / 常规** = \[类名\]/\[标\]/\[标\]/\[标\] ### 奎尔·洛戈斯: \[分类名\]/ \[子类名\]/ \[洛戈名\]/ \[Style\] - **"类名"** 指将所有标志都封装起来的普通类,因此取名"logo". - **"子类名称"** 指将标识进一步分为品牌、分品牌和支付方法等具体类别. - **"罗哥名"** 是一个标志与另一个标志的不同名称. - **"史诗"** 是指标志在颜色、对齐等方面的变化. **使用这种命名公约的标志实例:** 1. **标志/品牌/衍生词/珊瑚** = \[类名\] / \[子类名\] / \[洛戈名\] / \[斯通\] 2. **标识/支付方法/签证/品牌** = \[类名\] / \[子类名\] / \[洛戈名\] / \[斯通\] ### 克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克去克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克来克 - **"类名"** 指囊括了所有插图的普通类,因此取出"llustation"之名. - **"子类名称"** 指将插图进一步划分的具体类别. - **"史诗"** 是插图在颜色、主题等方面的变化. - **"说明名"** 每个插图的单独名称将一个插图与另一个插图区分开来. **使用这种命名公约的示例:** 1. **插图 / 衍生 / 光 / 对** = \[分类名\]/ \[子类名\]/ \[标\]/ \[标\]名 2. **插图 / 衍生出 / 轻/ ic- cashier- 锁定** = \[分类名\]/ \[子类名\]/ \[标\]/ \[标\]名 3. **插图/出自/ 暗/ 位置- 历史** = \[分类名\]/ \[子类名\]/ \[标\]/ \[标\]名 ## 导出新图标 要导出新图标, 请运行 `npm run export` (或 `npm run rebuild` )),并编译. 图像输出已写入, 那么 `finalize:figma` 更新桶和 `allIconsNames` 递增。 提交由此产生的 diff —— 它只应包含新的或实际已更改的图标,加上导出它们所需的管/目录行. GitHub 游戏 `from-figma` 工作流程只使用相同的路径和阶段 `svg/`, (中文(简体) ), `src/react/`, (中文(简体) ), `webp/`,以及 `src/index.ts`。 。 。 . ## 构建和出版 我们用 **[语义释放](https://semantic-release.gitbook.io/semantic-release/)** 用于自动发布工作流程。 提交信件决定发布类型 。 准则参见下表. | 提交信件 | 发行类型 | | --- | --- | | 修补 | **补丁** (Fix发布) | | 构造、 密码、 代码、 样式、 测试 | **补丁** (Fix发布) | | 功绩 | **次要** (自然释放) | | 重设 | **次要** (自然释放) | | 破坏变化 | **少校** (发作放出 | **触发释放** 对于每一个新增的承诺都添加到其中一个放行分支(例如:主,下个,β)上,通过git推取或通过从另一个分支合并拉出请求或合并,一个CI构建被触发并运行语义放行命令,以便在自上次放行以来出现影响套件功能的代码库变化时进行放行. 详情请查看 **[语义释放](https://semantic-release.gitbook.io/semantic-release/)** 文档. ## 常见问题 ### @deriv/quill-icons 是什么？ 这是从 figma 设计文件导出 quill 图标的中央寄存器 ### 如何安装 @deriv/quill-icons？ 在项目目录运行 npm install @deriv/quill-icons，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>= 16）、react-dom（\>= 16）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @deriv/quill-icons 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @deriv/quill-icons 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @deriv/quill-icons 可以商用吗？ @deriv/quill-icons 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @deriv/quill-icons 的下载量有多少？ 根据 npm 官方下载统计，@deriv/quill-icons 在 2026/10/12 – 2026/11/10 这 30 天内被下载 23,894 次，日均约 796 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @deriv/quill-icons 还在维护吗？ 最新版本 2\.14\.10 发布于 2026/10/27（15 天前）；至今共发布 213 个版本，其中过去 12 个月发布了 35 个；首次发布于 2023/09/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。