Build and publish spectrum-css workflow svg icons and svg sprite sheet for Spectrum CSS.

Setup

yarn install

To build and preview the icons

Run yarn build will generate the ready to publish package in dist/.

Run yarn serve to see the mini-site for all the workflow icons.

Updating the icons

Icons are available from an internal repository that is available only to Adobe employees. If you are an employee with access, follow the steps below:

1. yarn npm login --scope a4u to authenticate with the internal repository
2. yarn add -D @a4u/a4u-s2-icon-global-set-open-source-processed to install the latest version of the internal repository
3. Do not commit the updated package.json with the new version of @a4u/a4u-s2-icon-global-set-open-source-processed as this blocks non-Adobe employees from installing and using the repository.

Once your environment is ready, you can run yarn build to rebuild the icons/ folder. Expect to see changes to the committed content in the icons/ folder.

To preview your updates, run yarn serve.

CSS Custom Properties

Icons include CSS Custom Properties as fill attributes.

Example:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
  <path d="m16.87598,4.84082h-.00098l-5.74902-3.31934c-.69629-.40234-1.55859-.40137-2.25098,0l-5.75098,3.31934c-.69336.40137-1.12402,1.14844-1.12402,1.94922v6.63965c0,.80176.43164,1.54785,1.125,1.94824l5.74902,3.32031c.34766.20117.7373.30078,1.12598.30078.38965,0,.77832-.09961,1.125-.30078l5.75-3.32031c.69336-.40039,1.125-1.14648,1.125-1.94824v-6.63965c0-.80078-.43066-1.54785-1.12402-1.94922Zm-7.25-2.02051c.11523-.06738.24414-.10059.37402-.10059.12891,0,.25879.0332.375.10059l5.28516,3.05151-5.65942,3.12231-5.66431-3.12085,5.28955-3.05298ZM3.875,14.0791c-.23145-.13379-.375-.38281-.375-.64941v-6.30371l5.75,3.16797v6.88892l-5.375-3.10376Zm12.25,0l-5.375,3.10327v-6.8894l5.75-3.17236v6.30908c0,.2666-.14355.51562-.375.64941Z" fill="var(--iconPrimary, #222)"/>
</svg>

Here is the list of properties available:

| Property name | Fallback value | Additional context | | --- | --- | --- | | --iconPrimary | currentColor | Most workflow icons | | --iconRedPrimary | #d31510 | Used in: CloudStateErrorRed_22x20.svg | | --iconFill | #464646 | Express only | | --iconFillMedium | #909090 | Express only |

Tasks

The following tasks are available:

| Command | Description | Examples | | --- | --- | --- | | clean | Cleans all output files in the dist directory | yarn clean | | build | Deletes and rebuilds the icon folder, can only be run by an Adobe employee with access | yarn build | | site | Cleans the dist directory, copies website assets and prepares the dist output for the site preview | yarn site | | serve | Builds the site and opens a localhost of the preview website to view the workflow icons | yarn serve |

Contributing

A very special thank you to all of our contributors without whom this project would not be possible.

Want to join the team? Check out the contributing guidelines to get started.

Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.