A hot-swappable icon loader for component libraries and themeable apps
npm install smart-icon``jsx
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
Hello
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
$3
This adapter is great for loading SVGs directly into the DOM by leveraging the ` 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.