Default Library (Bootstrap Icons via CDN)
The default library resolves icons from Bootstrap Icons on jsDelivr. Use the
name attribute to specify which icon.
Colors
Icons inherit color from their context. Use CSS to control the color.
Sizing
Icons are sized using font-size. They default to 1em so they
match surrounding text.
Labels (Accessibility)
Set the label attribute to make an icon accessible to assistive devices.
Without a label the icon gets aria-hidden="true".
label="Favorite"
role=img, aria-label
no label
aria-hidden="true"
Custom src
Use src to load an icon from any URL. This example uses an inline data URI.
Custom Library Registration
Register custom icon libraries with registerIconLibrary(). This example
registers Lucide Icons via CDN.
import { registerIconLibrary } from '/src/components/t1-icon/index.ts';
registerIconLibrary('lucide', {
resolver: name => `https://cdn.jsdelivr.net/npm/[email protected]/icons/${name}.svg`,
mutator: svg => svg.setAttribute('stroke-width', '1.5'),
});