icons-workflow

NPM 1.0.1

View Storybook
Overview API Changelog

Overview

Deliver Spectrum Workflow Icons as either:

  • Registered custom elements (<sp-icon-abc>)
  • Unregistered class definitions (IconAbc)
  • Functions with customizable template tags to be used across various frameworks (AbcIcon())

Search a full list of icons to find an icon for your project or find technical information about extended use cases, like consuming this package in various UI frameworks below.

When planning how to leverage these icons in the visual delivery of your application, remember to consult Spectrum's Iconography Guidelines.

Usage

See it on NPM! How big is this package in your project?

yarn add @spectrum-web-components/icons-workflow

Import the side effectful registration of a single element (e.g. <sp-icon-abc>) via:

import '@spectrum-web-components/icons-workflow/icons/sp-icon-abc.js';

Leverage a single icon base class (e.g. IconAbc) as a type, or for extension purposes, do so, via:

import { IconAbc } from '@spectrum-web-components/icons-workflow/src/elements/IconAbc.js';

Find an icon

Search the available Spectrum Workflow icons below.

Alternative usage

You can import raw icons (e.g. AbcIcon()) via:

import { AbcIcon } from '@spectrum-web-components/icons-workflow/src/icons/ABC.js';

@spectrum-web-components/icons-workflow exports all icons. If your build process tree-shakes dependencies, you can import from it directly:

import { AbcIcon } from '@spectrum-web-components/icons-workflow';

These icon literals are prepared with the html template tag from lit-html, the default value of an icon export will be as follows:

import { LitElement, html } from 'lit-element';
import '@spectrum-web-components/icon';
import { AbcIcon } from '@spectrum-web-components/icons-workflow';

class ElementWithIcon extends LitElement {
    protected override render(): TemplateResult {
        return html`
            <sp-icon>
                ${AbcIcon()}
            </sp-icon>
        `
    }
}

customElements.define('element-with-icon', ElementWithIcon);

Every icons can be customized via the following options:

{
    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 like the following::

import { AbcIcon } from '@spectrum-web-components/icons-workflow';

console.log(AbcIcon());

/***
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:

import { AbcIcon } from '@spectrum-web-components/icons-workflow/src/icons.js';

console.log(AbcIcon());

/***
<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 36 36"
    role="img"
    fill="currentColor"
    height="24"
    width="24"
    aria-hidden="false"
    aria-label="Circle"
>
    <path
      d="M4.936 20.484l-1.1 3.322a.235.235 0 01-.259.194H.988c-.172 0-.216-.086-.172-.237 1.143-3.236 2.976-8.543 4.335-12.275a3.813 3.813 0 00.216-1.337.136.136 0 01.151-.151h3.473a.162.162 0 01.173.108c1.575 4.336 3.3 9.276 4.9 13.676.064.151.021.216-.13.216h-2.85a.193.193 0 01-.216-.151L9.66 20.484zm4.055-2.459C8.56 16.558 7.7 14.1 7.265 12.545h-.021c-.324 1.467-1.1 3.732-1.661 5.48z"
    />
    <path
      d="M14.045 10.257c0-.15.022-.193.129-.214.943-.022 2.743-.043 4.565-.043 4.436 0 5.379 1.95 5.379 3.686a3.1 3.1 0 01-2.036 3v.043a3.309 3.309 0 012.572 3.236c0 2.658-2.294 4.029-6.194 4.029-1.65.022-3.386-.021-4.265-.043a.17.17 0 01-.15-.193zm2.979 5.379h1.865c1.714 0 2.25-.707 2.25-1.628 0-1.158-.772-1.629-2.422-1.629-.836 0-1.5.021-1.693.043zm0 5.937c.236 0 .729.042 1.608.042 1.8 0 2.871-.471 2.871-1.8 0-1.114-.686-1.757-2.593-1.757h-1.886zM32.752 10a7.959 7.959 0 012.946.439c.1.063.126.1.126.251v2.21c0 .189-.1.189-.188.147a7.061 7.061 0 00-2.779-.523 4.175 4.175 0 00-4.535 4.43c0 3.427 2.466 4.388 4.514 4.388a8.49 8.49 0 002.925-.5c.1-.042.167 0 .167.125v2.152c0 .147-.021.23-.167.293a8.621 8.621 0 01-3.448.588c-3.74 0-7.041-2.069-7.041-6.958 0-3.991 2.928-7.042 7.48-7.042z"
    />
</svg>
***/

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:

import {
    AbcIcon,
    setCustomTemplateLiteralTag,
} from '@spectrum-web-components/icons-workflow/src/icons.js';
import htm from 'htm';
import { h } from 'preact';

const hPreact = htm.bind(h);

setCustomTemplateLiteralTag(hPreact);

console.log(AbcIcon());

/***
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!

Accessibility

Review the accessibility guidelines for the icon.

Attributes and Properties

Property Attribute Type Default Description label label string '' size size 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | undefined

1.0.1 (2024-11-11)

Bug Fixes

  • icon: remove size300 suffix from chevron and checkmark icons in Spectrum 2 (#4904) (a22f42b)

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.49.0 (2024-10-15)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.47.0 (2024-08-20)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.44.0 (2024-07-15)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.43.0 (2024-06-11)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.42.4 (2024-05-14)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.42.0 (2024-03-19)

Features

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.41.1 (2024-02-22)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.41.0 (2024-02-13)

Features

  • icon: use core tokens (a11ef6b)

0.40.5 (2024-02-05)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.40.3 (2024-01-11)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.39.4 (2023-11-02)

Bug Fixes

  • infield-button: add infield-button package (057b885)

0.39.3 (2023-10-18)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.39.2 (2023-10-13)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.39.1 (2023-10-06)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.39.0 (2023-09-25)

Bug Fixes

  • alert-dialog: add Alert Dialog package (#3501) (1062847)

0.38.0 (2023-09-05)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.37.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.36.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.35.0 (2023-07-31)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.34.0 (2023-07-11)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.31.0 (2023-05-17)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.30.0 (2023-05-03)

Bug Fixes

  • correct @element jsDoc listing across library (c97a632)
  • icon: clean up docs and types for available size values (c38850d)
  • icons-workflow: rename icons/files to avoid ad blocking (842b081)
  • include default export in the "exports" fields (f32407d)
  • include the "types" entry in package.json files (b432f59)
  • remove "type: "module"" in package.json for node 12 (c9f76e2)

Features

  • add and use icons-ui package (d9c3ab2)
  • icons-workflow: add workflow icons package (6b09287)
  • icons-workflow: update spectrum css input (549b4b6)
  • icons-workflow: vend fully registered icon components (941f3a4)
  • leverage "exports" field in package.json (321abd7)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • track the associated Spectrum CSS package (86b1be5)
  • update lit-* dependencies, wip (377f3c8)
  • use latest exports specification (a7ecf4b)

Performance Improvements

  • use "sideEffects" listing in package.json (7271614)

0.9.12 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.9.11 (2023-04-05)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.9.10 (2023-03-22)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.9.9 (2023-03-08)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.9.8 (2023-02-08)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.9.7 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.9.6 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.9.5 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.9.4 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.9.3 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.9.2 (2022-10-28)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.9.1 (2022-10-10)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.9.0 (2022-08-09)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.8.12 (2022-08-04)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.8.11 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.8.10 (2022-06-29)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.8.9 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.8.8 (2022-05-27)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.8.7 (2022-05-12)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.8.6 (2022-04-21)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.8.5 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.8.4 (2022-03-04)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.8.3 (2022-02-22)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.8.2 (2022-01-26)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.8.1 (2021-12-13)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.8.0 (2021-11-08)

Features

  • update lit-* dependencies, wip (377f3c8)

0.7.1 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.7.0 (2021-11-02)

Features

  • track the associated Spectrum CSS package (86b1be5)

0.6.11 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.6.10 (2021-08-24)

Bug Fixes

  • correct @element jsDoc listing across library (c97a632)

0.6.9 (2021-08-03)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.6.8 (2021-07-22)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.6.7 (2021-06-16)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.6.6 (2021-05-12)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.6.5 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.6.4 (2021-03-29)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.6.3 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.6.2 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.6.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.6.0 (2021-03-04)

Bug Fixes

  • icons-workflow: rename icons/files to avoid ad blocking (842b081)

Features

  • use latest exports specification (a7ecf4b)

0.5.3 (2021-02-11)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.5.2 (2021-02-02)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.5.1 (2021-01-28)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.5.0 (2021-01-21)

Bug Fixes

  • icon: clean up docs and types for available size values (c38850d)
  • include the "types" entry in package.json files (b432f59)

Features

  • icons-workflow: update spectrum css input (549b4b6)
  • icons-workflow: vend fully registered icon components (941f3a4)

0.4.0 (2021-01-13)

Bug Fixes

  • include the "types" entry in package.json files (b432f59)

Features

  • icons-workflow: update spectrum css input (549b4b6)
  • icons-workflow: vend fully registered icon components (941f3a4)

0.3.6 (2020-10-12)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.3.5 (2020-10-12)

Bug Fixes

  • include default export in the "exports" fields (f32407d)

0.3.4 (2020-09-25)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.3.3 (2020-08-31)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.3.2 (2020-08-19)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.3.1 (2020-07-24)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.3.0 (2020-07-17)

Features

  • leverage "exports" field in package.json (321abd7)

0.2.2 (2020-06-08)

Note: Version bump only for package @spectrum-web-components/icons-workflow

0.2.1 (2020-05-08)

Bug Fixes

  • remove "type: "module"" in package.json for node 12 (c9f76e2)

0.2.0 (2020-04-16)

Features

  • add and use icons-ui package (d9c3ab2)

Performance Improvements

  • use "sideEffects" listing in package.json (7271614)

0.1.0 (2020-04-07)

Features

  • icons-workflow: add workflow icons package (6b09287)