衍生基尔图标

探索和整合来自 衍生 带有易用回放组件. 这些图标是从一个Figma图标项目导出.

创建此库的动机

我们开发了Deriv Quill Icons图书馆,以解决我们各个项目的若干关键考虑:

1. 我们所有项目的一致性: 通过创建Deriv Quill Icons,我们确保所有应用程序使用一致的设计语言。 所有图标都将具有相近的风格,大小和颜色.
2. 简单维护 : 在中央图书馆管理所有图标,使得更新或修改它们更容易. 如果我们决定改变设计或添加新的图标,我们只需要在一个地方进行修改,更新将反映在我们所有的应用中.
3. 重复使用和效率: 我们可以轻松地在应用程序的不同组件和页面中重复使用同一套图标。 这促进了代码可重复性并减少了冗余性,因为我们不需要重复图标资产或样式.
4. 自定义 : 它使我们能够定制全球的图标。 例如,我们可以在一个地方改变所有图标的颜色方案,大小,或其他视觉方面,而不修改单个组件. 我们还可以很容易地把优化应用到我们的所有图标上.
5. 开发者生产率 : 它能提高我们开发者的生产力。 开发者可以很容易地找到和使用他们所需要的图标,而无需每次搜索或创建新资产.

安装

npm i @deriv/quill-icons

已发布的软件包是 仅限无害环境管理 (单一) dist/ 构建, 无普通JS require) (中文(简体) ). 使用 import 用于解析 exports 字段.

说明 组件渲染 <img> 标签由 网络P 资产(Figma PNG制成的被转换为WebP;复杂的3D美术不内含为SVG). 图标,标志等类别仍为最优化的SVG React组件.

使用量

import { CurrencyAlgoIcon } from '@deriv/quill-icons';

const TestComponent = () => (
  <h3>
    Lets go for a <CurrencyAlgoIcon />?
  </h3>
);

可用的图标类别

树摇: 插图模块导入一个 WebP并导出一个组件, 因此 package.json 套装 "sideEffects": false. Bundlers 然后放弃未使用的插图及其WebP文件. A 类 **/Illustration/** 边效果条目将每个插图资产保存在捆绑中.

类别范围进口(小桶至剖面):

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-导出 为导出 图像组件 所以,请阅读他们的文件 并尝试适应他们的概念.

与 @figma-导出 我们导出到处理 SVG 为每个创建 Figma Component 并随 变换- svg- with- svgo 我们优化导出 SVGs. 这是变压器, 您可以添加/ 重新移动/ 更新 SVG 属性.

输出器

• @figma-导出/输出-组件-s-svg数字 : 我们用这个生成 SVG 文档,您可以查看 svg 文件夹.
• @figma-export/output- 组件- 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/,然后写 <img> 重现包装 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 支持的组件 :

import { DerivLightWalletIcon } from '@deriv/quill-icons/Illustration';

<DerivLightWalletIcon width={120} height={120} alt='Wallet' />;

安装前

• 节点18.0.0
• npm =\ 9.0.0 (韩语)
• git(用于 contribution(中文(简体) )
• Figma Token (选中) 这个 为了自己而设)
• Figma 文件标识
• 图片图标页面

快开始

1. 输入工程目录

   cd quill-icons
   

2. 创建一个 .env 内部文件 quill-icons 含有此内容的文件夹 :

   FIGMA_TOKEN=your_figma_access_token
   

3. 安装您的依赖 :

   npm ci
   

4. 导出 (所需经费) FIGMA_TOKEN 内 .env:

   npm run export
   

   图标和标志导出为优化的 SVG React 组件; 插图导出为 WebP 资产通过 export:illustrations (列入 export 编号 : rebuild) (中文(简体) ). 只有 Git 记录 新建或修改 图标文件; Figma 未更改的现有图标未被更改.

5. 构建 (供当地出版或链接):

   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。 。 。 .

构建和出版

我们用 语义释放 用于自动发布工作流程。 提交信件决定发布类型 。 准则参见下表.

触发释放

对于每一个新增的承诺都添加到其中一个放行分支(例如:主,下个,β)上,通过git推取或通过从另一个分支合并拉出请求或合并,一个CI构建被触发并运行语义放行命令,以便在自上次放行以来出现影响套件功能的代码库变化时进行放行.

详情请查看 语义释放 文档.