Spectrum Workflow Icons
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:
npm login --scope a4uto authenticate with the internal repositoryyarn add -D @a4u/a4u-s2-icon-global-set-open-source-processedto install the latest version of the internal repository- Do not commit the updated
package.jsonwith the new version of@a4u/a4u-s2-icon-global-set-open-source-processedas 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.