• 网络资产 @box/blueprint-web-assets
• 安装
• 使用量
  • 键
  • 资产
• 如何更新资产和债券
• 项目脚本

网络资产 @box/blueprint-web-assets

@box/blueprint-web-assets 是Box 资产(相册、插图)和符号(颜色、字体、间隔等)的综合集合。 你可以检查我们现有的资产 门户。 。 。 .

安装

yarn add @box/blueprint-web-assets

使用量

键

单位 scss 文件 :

如果可能,请使用 Css 变量:

@use '@box/blueprint-web-assets/tokens/tokens-css-vars.scss';
...

.component {
    background-color: var(--background-background);
}

否则,你可以使用scss符号,但记住,这种方法是 已贬值数字 :

@use '@box/blueprint-web-assets/tokens/tokens.scss'; // or @import if you're not using dart sass

...

.component {
    background-color: tokens.$background-background;
}

单位 tsx 文件 :

import { BackgroundBackground } from '@box/blueprint-web-assets/tokens/tokens';

...

<Checkmark color={BackgroundBackground} />

目前,我们还分发“ @box/blueprint-web-assets/tokens/px-tokens” - js文件,其中包含像素值中的符号。 只有当您的使用案例不支持 rem 单位时,例如,你才应该使用它. 电子邮件客户端。 。 。 .

资产

可以使用所有图标作为正则反应组件.

import { InfoBadge } from '@box/blueprint-web-assets/icons/Line';

...

<InfoBadge />

要改变图标颜色, 您可以使用 color 道具 :

import { Alert } from '@box/blueprint-web-assets/icons/Fill';
import { IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
...

<Alert color={IconIconErrorOnLight} />

图标路径定义图标样式 :

import { InfoBadge } from '@box/blueprint-web-assets/icons/Line';
import { Alert } from '@box/blueprint-web-assets/icons/Fill';
import { FileAudio } from '@box/blueprint-web-assets/icons/Content';
import { BoxLogo } from '@box/blueprint-web-assets/icons/Logo';
import { Compass } from '@box/blueprint-web-assets/icons/Multitone';

如何更新资产和债券

yarn exec nx run blueprint-web-assets:build-assets

将更改推向新分支 。 合并后将发布新版本的软件包.

项目脚本

• nx test blueprint-web-assets 通过 欢乐
• nx lint blueprint-web-assets 要通过 ESLint 语录