smart-icon
v5.0.0TypeScript
A hot-swappable icon loader for component libraries and themeable apps
0/weekUpdated 1 years agoApache-2.0Unpacked: 182.0 KB
Published by ericmantooth
npm install smart-icon
A hot-swappable icon loader for component libraries and themeable apps
Example
``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 Alternatives
$3
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.