@adobe/spectrum-css-workflow-icons NPM

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`