@spectrum-web-components/iconset

Description

Extend either the Iconset or IconsetSVG exports of this package to supply your application with a custom icon set to power the use of <sp-icon> elements throughout. Give your new icon set a custom name, and you'll be ready to supply them as <sp-icon name="custom-icons:icon"> across your application.

Usage

yarn add @spectrum-web-components/iconset

import { TemplateResult } from 'lit-element';
import { IconsetSVG } from '@spectrum-web-components/iconset/src/iconset-svg.js';

import { CustomIconSet } from 'your-icon-set.js';

export class IconsLarge extends IconsetSVG {
    public constructor() {
        super();
        this.name = 'custom-icons'; // default iconset name for these icons
    }

    protected renderDefaultContent(): TemplateResult {
        return CustomIconSet;
    }
}

Deprecated

Iconsets have been deprecated and will be removed from the project in an upcoming version. Using a technique that ensures only the icons actually leveraged in your application are present in your build, like UI Icons (../icons-ui/) or Workflow Icons (../icons-workflow/), will ensure smaller bundles and higher performance for you visitor. For non-Spectrum icons, you can still slot SVG and image content into an sp-icon element or sanitize the SVG to a template literal so that it can be returned from the render() method in an extension of IconBase to create your own named icon element.

Changelog

0.42.5 (2024-05-24)

Bug Fixes

• coachmark,overlay: adjust imports of overlay and coachmark (#4455) (39706da)
• number-field: select full value when using Tab to enter a field with a unit (#4340) (a9d5cef)
• overlay: ensure hint Overlays within shadow roots open as expected (#4443) (7dd64b9)
• overlay: ensure that passing "open" to the directive manages a single strategy (#4474) (15d6ac7)
• overlay: persist "host" in directive rendered Overlay content (#4475) (5d189c2)