Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:
Spectrum website
Spectrum web components
npm
GitHub
The Icon component contains all of the CSS used for displaying both workflow and UI icons.
The SVG icons used in Spectrum CSS are a part of two different icon sets, "workflow" and "ui". The two sets have different uses and methods of sizing.
The UI icon SVGs are within the Spectrum CSS repository, which has its own package published to NPM:
The workflow icon SVGs are within a separate repository, which is also published to NPM:
UI icons are atomic pieces (e.g., arrows, crosses, etc.) that are used as part of some components. The chevron within the combobox component is one example. For a full list of all icons within this set, see ui icons.
Unlike workflow icons, each UI icon comes in specific numbered sizes. They do not use "t-shirt" sizing. They have unique classes applied that set their size in CSS. For example:
.spectrum-UIIcon-Asterisk300.spectrum-UIIcon-ChevronDown75Different UI icons have different number sizes available. The smallest size for some may be 50, while others may start at 100.
Some have up to a 600 size. Some may only have two different sizes, while others have six.
Because of this, they can't be mapped one-to-one to t-shirt sizes.
The correct UI icon sizes that correspond to each of a component's size options is typically defined in the design spec.
An example of some UI icons in their available sizes is below.
Directional UI icons such as chevron and arrow have classes for each direction. They rotate the same basic icon with a CSS transform: rotate.
For example, the Arrow100.svg icon is used with:
.spectrum-UIIcon-ArrowRight100.spectrum-UIIcon-ArrowLeft100.spectrum-UIIcon-ArrowDown100.spectrum-UIIcon-ArrowUp100The workflow icon set contains several hundred icons to choose from. For a full list of all icons within this set, see workflow icons. These icons can be seen in use within button, action button, menu, and many other components. Here is an example of just a few of these icons:
In Storybook documentation, if a workflow icon name does not exist in the set, the placeholder "Circle" icon will be shown. Missing ui icons will render nothing. The following example purposefully uses an icon name that does not exist to demonstrate this behavior.
An example of a Workflow icon displayed at all sizes, from small to extra-large. Note that the extra-extra-large size is currently not part of the design specifications and may be deprecated in the near future.
The component accepts the following inputs (properties):
| Name | Description | Default |
|---|---|---|
| Content | ||
| Icon set* | string | - |
| Advanced | ||
| Use sprite sheet reference | Storybook only: whether to display an SVG with a <use> reference to the icon within a loaded sprite sheet. This improves Storybook performance, especially for multiple icons. When set to false, the icon file's full markup is used.boolean | - |
| Fill color | string | - |
These are empty CSS custom property hooks available in this component that enable one-off customizations specific to a product implementation.
| Property |
|---|
--mod-icon-block-size |
--mod-icon-color |
--mod-icon-inline-size |
--mod-icon-size |
latestnexts2-foundationsbeta