Lit

Use free, open-source Vadivam SVG icons in Lit templates, shadow roots, and Lit SSR with tree-shakeable imports.

vadivam-lit supports Lit 3. Each icon is a function that returns an SVG template, so it renders inside your own components’ shadow roots and with Lit SSR.

npm install vadivam-lit

Basic usage

import { LitElement, html } from "lit";
import { Activity } from "vadivam-lit";

class StatusBadge extends LitElement {
  render() {
    return html`${Activity({ size: 20, color: "navy", strokeWidth: 1.5, label: "Activity" })} Online`;
  }
}
customElements.define("status-badge", StatusBadge);

Icon functions accept size, color, strokeWidth, absoluteStrokeWidth, class, and label. Without a label the icon is hidden from assistive technology.

Lit templates can’t spread arbitrary attributes, so put IDs, event listeners, and other attributes on a wrapping element.

The root entry point also exports the icons registry, a generic Icon, and createVadivamIcon for custom geometry.

Per-icon imports

import Activity from "vadivam-lit/activity";
import Search from "vadivam-lit/icons/search";

Runtime names

import { DynamicIcon } from "vadivam-lit/dynamic";

html`${DynamicIcon({ name: "activity", size: 20, fallback: "" })}`;

DynamicIcon loads the icon with Lit’s until directive and renders fallback until it arrives, or when the name is unknown. The /dynamic entry point also exports iconNames and dynamicIconImports.

Prefer the <vadivam-icon> element when you only need an icon in plain markup. See Dynamic icons and Accessibility.