A hot-swappable icon loader for component libraries and themeable apps

Example

import { define, SVGUseAdapter } from "smart-icon";

// Define your icon name and configuration
define("my-icon", {
    adapter: SVGUseAdapter,
    resolvePath: (name) => `/icons/${name}.svg#icon`
});

// Render it
<p>Hello <my-icon name="world"></my-icon></p>

Why

A generic component library should strive to integrate well into any existing design system or application. Typically this means leaving styling (CSS) up to the consumer of the library, but until now there was no simple, flexible, and framework-agnostic way to keep icons decoupled from JavaScript. smart-icon is a tiny web component that dynamically resolves an icon’s name to a path at runtime with support for a variety of icon formats and loading methods.

Adapters

SVGUseAdapter

This adapter is great for loading SVGs directly into the DOM by leveraging the <use /> element. It allows icons to be stylable via CSS, such as changing the fill color on hover for example, and is flexible with both SVG sprite sheets or (preferably for performance reasons) standalone SVG icons.

Alternatives

no-js support

If you don’t want to require JavaScript support for your application, you can use SSR (not yet documented) to directly render the output of smart-icon into HTML. You will lose the flexibility of runtime path resolution, but this allows you to wait until build time to configure the icon pack that’s used.