- Blueprint Web assets
@box/blueprint-web-assets
- Installation
- Usage
- How to update assets and tokens
- Project scripts
@box/blueprint-web-assets
is a comprehensive collection of Box assets(icons, illustrations) and tokens (color, font, spacing, etc..). You can check available assets in our Portal.
yarn add @box/blueprint-web-assets
In scss
files:
If possible, use css variables:
@use '@box/blueprint-web-assets/tokens/tokens-css-vars.scss';
...
.component {
background-color: var(--background-background);
}
Otherwise, you can use scss tokens, but bear in mind that this method is deprecated:
@use '@box/blueprint-web-assets/tokens/tokens.scss'; // or @import if you're not using dart sass
...
.component {
background-color: tokens.$background-background;
}
In tsx
files:
import { BackgroundBackground } from '@box/blueprint-web-assets/tokens/tokens';
...
<Checkmark color={BackgroundBackground} />
Currently we also distribute '@box/blueprint-web-assets/tokens/px-tokens' - js file containing tokens in pixel values. You should use it only if your use case doesn't support rem units, e.g. e-mail clients.
You can use all icons as regular React components.
import { InfoBadge } from '@box/blueprint-web-assets/icons/Line';
...
<InfoBadge />
To change icon color you can use color
prop:
import { Alert } from '@box/blueprint-web-assets/icons/Fill';
import { IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
...
<Alert color={IconIconErrorOnLight} />
Icon path defines icon style:
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';
yarn nx build-local-all blueprint-web-assets
yarn nx lint blueprint-web-assets --fix
yarn nx format blueprint-web-assets
Push changes to a new branch. New version of package will be released after merge.