@adobe/react-spectrum-workflow

Spectrum-CSS Workflow Icons

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

Setup

yarn install

For external user

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. Run yarn serve:react to see the mini-site for the React version of icons.

For adobe user

• Make sure connect to corp network.
• Run yarn upgrade --scope @a4u --latest to update the icon set from Adobe corp artifactory.
• Run yarn build-icons to rebuild the icons/ folder.
• Follow the external user steps for building and previewing results.

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	Cleans the dist directory, copies website assets and then brings in the rsp, express, and workflow icons into dist	yarn build
build:icons	Deletes and rebuilds the icon folder, can only be run by an Adobe employee with access	yarn build:icons
serve	Builds and opens a localhost of the preview website to view the SVG and express icons	yarn serve
serve:react	Builds and opens a localhost of the preview website to view the React icons	yarn serve:react

Contributing

Contributions are welcomed! Read the Contributing guide for more information.

Licensing

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