diff --git a/package.json b/package.json
index 7011f283f5..ebb9dba2e2 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,9 @@
"postinstall": "yarn get-ready",
"spectrum-vars": "node ./scripts/spectrum-vars.js; npx pretty-quick --pattern 'packages/**/*.css'",
"process-spectrum": "node ./scripts/process-spectrum-css.js && npx pretty-quick --pattern 'packages/**/*.css'",
- "process-icons": "node ./scripts/process-icons.js; npx pretty-quick --pattern 'packages/**/*.svg.ts'",
+ "process-icons": "run-p icons:ui icons:workflow",
+ "icons:ui": "node ./scripts/process-icons.js; npx pretty-quick --pattern 'packages/**/*.svg.ts'",
+ "icons:workflow": "lerna run --scope @spectrum-web-components/icons-workflow build",
"build": "gulp css && tsc --build packages/**/tsconfig.json",
"build:watch": "tsc --build packages/**/tsconfig.json -w",
"build:tests": "tsc --build test/tsconfig.json && tsc --build test/tsconfig-node.json",
diff --git a/packages/bundle/README.md b/packages/bundle/README.md
index d758853185..bf1c38b7f2 100644
--- a/packages/bundle/README.md
+++ b/packages/bundle/README.md
@@ -11,3 +11,17 @@ npm install @spectrum-web-components/bundle
yarn add @spectrum-web-components/bundle
```
+
+### Icons - Workflow
+
+While this bundle directly re-exports the majority of functionality as they would be exported from their own packages, `@spectrum-web-components/icons-workflow` is renamed to `IconsWorkflow` when leveraging the bundle. This means that you can use workflow icons in your demonstration code by importing them from `@spectrum-web-components/bundle` like the following:
+
+```
+import { IconsWorkflow } from '@spectrum-web-components/bundle';
+
+console.log(IconsWorkflow.CircleIcon());
+
+/***
+TemplateResult {strings: Array[1], values: Array[0], type: "html", processor: DefaultTemplateProcessor, constructor: Object}
+***/
+```
diff --git a/packages/bundle/package.json b/packages/bundle/package.json
index 2602aeecbd..46d67de353 100644
--- a/packages/bundle/package.json
+++ b/packages/bundle/package.json
@@ -51,6 +51,7 @@
"@spectrum-web-components/dropzone": "^0.2.4",
"@spectrum-web-components/icon": "^0.4.4",
"@spectrum-web-components/icons": "^0.2.3",
+ "@spectrum-web-components/icons-workflow": "^0.0.1",
"@spectrum-web-components/iconset": "^0.1.7",
"@spectrum-web-components/illustrated-message": "^0.1.8",
"@spectrum-web-components/link": "^0.3.0",
diff --git a/packages/bundle/src/index.ts b/packages/bundle/src/index.ts
index 9df589ceb8..f9af63ee82 100644
--- a/packages/bundle/src/index.ts
+++ b/packages/bundle/src/index.ts
@@ -22,6 +22,8 @@ export * from '@spectrum-web-components/dropdown';
export * from '@spectrum-web-components/dropzone';
export * from '@spectrum-web-components/icon';
export * from '@spectrum-web-components/icons';
+import * as WorkflowIcons from '@spectrum-web-components/icons-workflow';
+export { WorkflowIcons };
export * from '@spectrum-web-components/illustrated-message';
export * from '@spectrum-web-components/link';
export * from '@spectrum-web-components/menu';
diff --git a/packages/bundle/tsconfig.json b/packages/bundle/tsconfig.json
index c5e4e5f34a..d7b937a520 100644
--- a/packages/bundle/tsconfig.json
+++ b/packages/bundle/tsconfig.json
@@ -20,6 +20,7 @@
{ "path": "../dropzone" },
{ "path": "../icon" },
{ "path": "../icons" },
+ { "path": "../icons-workflow" },
{ "path": "../iconset" },
{ "path": "../illustrated-message" },
{ "path": "../link" },
diff --git a/packages/icons-workflow/.gitignore b/packages/icons-workflow/.gitignore
new file mode 100644
index 0000000000..4de8104801
--- /dev/null
+++ b/packages/icons-workflow/.gitignore
@@ -0,0 +1,2 @@
+src/icons
+src/icons.ts
\ No newline at end of file
diff --git a/packages/icons-workflow/README.md b/packages/icons-workflow/README.md
new file mode 100644
index 0000000000..3081a271ee
--- /dev/null
+++ b/packages/icons-workflow/README.md
@@ -0,0 +1,106 @@
+## Description
+
+[Spectrum Workflow Icons](https://spectrum.adobe.com/page/icons/) delivered in a flexible template tag so that they can be leveraged across various frameworks. The default export of this package pre-applies the `html` template tag from `lit-html` for ease of use in the Spectrum Web Components library. Please remember to consult Spectrum's [Iconography Guidelines](https://spectrum.adobe.com/page/iconography/) when planning how to leverage these icons in the visual delivery of your application. For technical information on using these iconos in projects powered by various javascript frameworks, check out the "Extended use cases" sectino below.
+
+### Installation
+
+```
+npm install @spectrum-web-components/icons-workflow
+
+# or
+
+yarn add @spectrum-web-components/icons-workflow
+```
+
+### Usage
+
+With the default exports of the packages prepared with the `html` template tag from `lit-html`, the default value of an icon export will be as follows:
+
+```js
+import { LitElement, html } from 'lit-element';
+import '@spectrum-web-components/icon';
+import { CircleIcon } from '@spectrum-web-components/icons-workflow';
+
+class ElementWithIcon extends LitElement {
+ protected render(): TemplateResult {
+ return html`
+
+ ${CircleIcon()}
+
+ `
+ }
+}
+
+customElements.define('element-with-icon', ElementWithIcon);
+```
+
+Every icons can be customized via the following options:
+
+```js
+{
+ width: 24, // number outlining the width to deliver the SVG element with
+ height: 24, // number outlining the height to delivery the SVG element with
+ hidden: false, // boolean representing whether to apply the `aria-hidden` attribute
+ title: 'Icon title', // string of the title to deliver the icon with
+}
+```
+
+### Extended use cases
+
+The default exports of this package are pre-wrapped via `setCustomTemplateLiteralTag` in the `html` template tag from `lit-html`, and work liek the following::
+
+```js
+import { CircleIcon } from '@spectrum-web-components/icons-workflow';
+
+console.log(CircleIcon());
+
+/***
+TemplateResult {strings: Array[1], values: Array[0], type: "html", processor: DefaultTemplateProcessor, constructor: Object}
+***/
+```
+
+When working in the context of other frameworks, it is possible to import the icons with a generic template tag as follows:
+
+```js
+import { CircleIcon } from '@spectrum-web-components/icons-workflow/lib/icons.js';
+
+console.log(CircleIcon());
+
+/***
+
+***/
+```
+
+What's more, if you're already working with a specific parser in your project, you can assign it as the one to use when delivering the icons in order to be sure that the SVG content is delivered as parsed content to your final template. The means if you were working with Preact via the `htm` tag as bound to the provided hyperscript function:
+
+```js
+import {
+ CircleIcon,
+ setCustomTemplateLiteralTag,
+} from '@spectrum-web-components/icons-workflow/lib/icons.js';
+import htm from 'htm';
+import { h } from 'preact';
+
+const hPreact = htm.bind(h);
+
+setCustomTemplateLiteralTag(hPreact);
+
+console.log(CircleIcon());
+
+/***
+VNode {nodeName: "svg", children: Array[1], attributes: Object, key: undefined, constructor: Object}
+***/
+```
+
+In this way the icons exported by `@spectrum-web-components/icons-workflow` can be leveraged in projects powered by the the likes of hyperHTML, lighterhtml, lit-html, Preact, React, Vanilla JS, Vue.js, and more!
diff --git a/packages/icons-workflow/bin/build.js b/packages/icons-workflow/bin/build.js
new file mode 100644
index 0000000000..36fc65e72c
--- /dev/null
+++ b/packages/icons-workflow/bin/build.js
@@ -0,0 +1,154 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+const fs = require('fs');
+const glob = require('glob');
+const path = require('path');
+const cheerio = require('cheerio');
+const prettier = require('prettier');
+const Case = require('case');
+
+const rootDir = path.join(__dirname, '../../../');
+
+const iconsPath = process.argv.slice(2)[0];
+const keepColors = process.argv.slice(2)[1];
+
+const disclaimer = `
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/`;
+
+glob(`${rootDir}/node_modules/${iconsPath}/**.svg`, (err, icons) => {
+ if (!fs.existsSync(`${rootDir}packages/icons-workflow/src`)) {
+ fs.mkdirSync(`${rootDir}packages/icons-workflow/src`);
+ }
+ if (!fs.existsSync(`${rootDir}packages/icons-workflow/src/icons`)) {
+ fs.mkdirSync(`${rootDir}packages/icons-workflow/src/icons`);
+ }
+ fs.writeFileSync(
+ path.join(rootDir, 'packages', 'icons-workflow', 'src', 'icons.ts'),
+ disclaimer,
+ 'utf-8'
+ );
+
+ icons.forEach((i) => {
+ const svg = fs.readFileSync(i, 'utf-8');
+ const id = path
+ .basename(i, '.svg')
+ .replace('S_', '')
+ .replace('_22_N', '');
+ const ComponentName = id === 'github' ? 'GitHub' : Case.pascal(id);
+ const $ = cheerio.load(svg, {
+ xmlMode: true,
+ });
+ const title = Case.capital(id);
+ const fileName = `${id}.ts`;
+ const location = path.join(
+ rootDir,
+ 'packages/icons-workflow/src/icons',
+ fileName
+ );
+
+ if (!Number.isNaN(Number(ComponentName[0]))) {
+ return;
+ }
+
+ $('*').each((index, el) => {
+ if (el.name === 'svg') {
+ $(el).attr('aria-hidden', '...');
+ $(el).attr('role', 'img');
+ if (keepColors !== 'keep') {
+ $(el).attr('fill', 'currentColor');
+ }
+ $(el).attr('aria-label', '${title}');
+ $(el).removeAttr('id');
+ }
+ if (el.name === 'defs') {
+ $(el).remove();
+ }
+ Object.keys(el.attribs).forEach((x) => {
+ if (x === 'class') {
+ $(el).removeAttr(x);
+ }
+ if (keepColors !== 'keep' && x === 'stroke') {
+ $(el).attr(x, 'currentColor');
+ }
+ if (keepColors !== 'keep' && x === 'fill') {
+ $(el).attr(x, 'currentColor');
+ }
+ if (el.name === 'svg') {
+ if (x === 'width' || x === 'height') {
+ $(el).attr(x, '${' + x + '}');
+ }
+ }
+ });
+ });
+
+ const iconLiteral = `
+ ${disclaimer}
+
+ import {tag as html, TemplateResult} from '../custom-tag.js';
+
+ export {setCustomTemplateLiteralTag} from '../custom-tag.js';
+ export const ${ComponentName}Icon = ({
+ width = 24,
+ height = 24,
+ hidden = false,
+ title = '${title}',
+ } = {},): string | TemplateResult => {
+ return html\`${$('svg')
+ .toString()
+ .replace(
+ 'aria-hidden="..."',
+ "aria-hidden=\"${hidden ? 'true' : 'false'}\""
+ )}\`;
+ }
+ `;
+
+ const icon = prettier.format(iconLiteral, {
+ printWidth: 100,
+ tabWidth: 2,
+ useTabs: false,
+ semi: true,
+ singleQuote: true,
+ trailingComma: 'all',
+ bracketSpacing: true,
+ jsxBracketSameLine: false,
+ arrowParens: 'avoid',
+ parser: 'typescript',
+ });
+
+ fs.writeFileSync(location, icon, 'utf-8');
+
+ const exportString = `export {${ComponentName}Icon} from './icons/${id}.js';\r\n`;
+ fs.appendFileSync(
+ path.join(rootDir, 'packages', 'icons-workflow', 'src', 'icons.ts'),
+ exportString,
+ 'utf-8'
+ );
+ });
+
+ const exportString = `\r\nexport { setCustomTemplateLiteralTag } from './custom-tag.js';\r\n`;
+ fs.appendFileSync(
+ path.join(rootDir, 'packages', 'icons-workflow', 'src', 'icons.ts'),
+ exportString,
+ 'utf-8'
+ );
+});
diff --git a/packages/icons-workflow/package.json b/packages/icons-workflow/package.json
new file mode 100644
index 0000000000..eb74972687
--- /dev/null
+++ b/packages/icons-workflow/package.json
@@ -0,0 +1,57 @@
+{
+ "name": "@spectrum-web-components/icons-workflow",
+ "publishConfig": {
+ "access": "public"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/adobe/spectrum-web-components.git",
+ "directory": "packages/icons-workflow"
+ },
+ "bugs": {
+ "url": "https://github.com/adobe/spectrum-web-components/issues"
+ },
+ "homepage": "https://adobe.github.io/spectrum-web-components/components/icons-workflow",
+ "keywords": [
+ "spectrum css",
+ "web components",
+ "lit-element",
+ "lit-html"
+ ],
+ "version": "0.0.1",
+ "description": "",
+ "main": "lib/index.js",
+ "module": "lib/index.js",
+ "type": "module",
+ "files": [
+ "custom-elements.json",
+ "/lib/",
+ "/src/"
+ ],
+ "scripts": {
+ "build": "node ./bin/build @adobe/spectrum-css-workflow-icons/dist/18"
+ },
+ "author": "",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@spectrum-web-components/iconset": "^0.1.7",
+ "tslib": "^1.10.0"
+ },
+ "devDependencies": {
+ "@adobe/spectrum-css-workflow-icons": "^1.0.0",
+ "@spectrum-web-components/icon": "^0.4.4",
+ "@spectrum-web-components/iconset": "^0.1.7",
+ "case": "^1.6.1",
+ "cheerio": "^1.0.0-rc.2",
+ "feather-icons": "^4.14.0",
+ "fs": "^0.0.1-security",
+ "glob": "^7.1.3",
+ "http-server": "^0.11.1",
+ "path": "^0.12.7",
+ "prettier": "^1.16.1"
+ },
+ "peerDependencies": {
+ "lit-element": "^2.1.0",
+ "lit-html": "^1.0.0"
+ }
+}
diff --git a/packages/icons-workflow/src/custom-tag.ts b/packages/icons-workflow/src/custom-tag.ts
new file mode 100644
index 0000000000..6a1a517f1b
--- /dev/null
+++ b/packages/icons-workflow/src/custom-tag.ts
@@ -0,0 +1,41 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { html, TemplateResult } from 'lit-html';
+export { TemplateResult } from 'lit-html';
+
+export type GenericTemplateLiteralTagType = (
+ strings: TemplateStringsArray,
+ ...values: unknown[]
+) => string;
+type TemplateLiteralTagType = GenericTemplateLiteralTagType | typeof html;
+let customTemplateLiteralTag: TemplateLiteralTagType;
+
+export const tag = function (
+ strings: TemplateStringsArray,
+ ...values: unknown[]
+): string | TemplateResult {
+ if (customTemplateLiteralTag) {
+ return customTemplateLiteralTag(strings, ...values);
+ }
+ return values.reduce(
+ (acc: string, v, idx) =>
+ (acc as string) + (v as string) + strings[idx + 1],
+ strings[0]
+ );
+};
+
+export const setCustomTemplateLiteralTag = (
+ tag: TemplateLiteralTagType
+): void => {
+ customTemplateLiteralTag = tag;
+};
diff --git a/packages/icons-workflow/src/index.ts b/packages/icons-workflow/src/index.ts
new file mode 100644
index 0000000000..8b8c8b47ab
--- /dev/null
+++ b/packages/icons-workflow/src/index.ts
@@ -0,0 +1,19 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { html } from 'lit-html';
+import { setCustomTemplateLiteralTag } from './custom-tag.js';
+
+setCustomTemplateLiteralTag(html);
+
+export { setCustomTemplateLiteralTag };
+export * from './icons.js';
diff --git a/packages/icons-workflow/stories/icons-workflow.stories.ts b/packages/icons-workflow/stories/icons-workflow.stories.ts
new file mode 100644
index 0000000000..e37f34ad89
--- /dev/null
+++ b/packages/icons-workflow/stories/icons-workflow.stories.ts
@@ -0,0 +1,68 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import '../';
+import '../../icon';
+import '../../iconset/lib/icons-demo';
+import { html, color, select } from '@open-wc/demoing-storybook';
+import { TemplateResult } from 'lit-html';
+
+import '../';
+import * as icons from '../';
+
+export default {
+ title: 'Icons',
+};
+
+export const Workflow = (): TemplateResult => {
+ const iconTemplates: {
+ template: typeof html;
+ name: string;
+ }[] = [];
+ for (const icon in icons) {
+ if (icon === 'setCustomTemplateLiteralTag') continue;
+ iconTemplates.push({
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ template: (icons as any)[icon],
+ name: icon,
+ });
+ }
+ const size = select(
+ 'Icon Size',
+ ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+ 'm',
+ 'Element'
+ );
+ return html`
+
+
+ ${iconTemplates.map(
+ (icon) => html`
+