Name: lucide-icons
Rating: 76
Author: cedrosdev

RULES:

•install: lucide
•import only needed icons (tree-shake)
•create icon HTML via createElement(Icon).outerHTML
•pass icon HTML string to constructo prop
•use CSS for color (icons inherit text color)
•for SSR use lucide-static

BASIC:

import { createElement, Home } from "lucide";

const homeIcon = createElement(Home, { size: 20 }).outerHTML;

html

<winnetou>
  <span class="icon">{{icon}}</span>
</winnetou>

new $navItem({ icon: homeIcon, text: "Home" }).create("#menu");

ICON CUSTOM:

const alertIcon = createElement(AlertCircle, {
  size: 18,
  strokeWidth: 2,
  color: "#e74c3c",
}).outerHTML;

CSS COLOR:

css

.icon svg {
  width: 1em;
  height: 1em;
}
.icon-danger {
  color: #e74c3c;
}

LIBRARY PATTERN:

import { createElement, Home, Settings } from "lucide";

export const icons = {
  home: (s = 20) => createElement(Home, { size: s }).outerHTML,
  settings: (s = 20) => createElement(Settings, { size: s }).outerHTML,
};

SSR:

// Node
const { Home } = require("lucide-static");
const icon = Home; // raw SVG string

BEST PRACTICES:

•cache icon HTML if reused
•keep sizes consistent
•provide labels for icon-only buttons

TROUBLESHOOT:

•icon missing: use .outerHTML
•wrong prop: ensure {{icon}} matches prop name
•color wrong: set parent color or .icon svg