Skills4History

add-iconscore

Add new SVG icons to @loke/icons. Covers SVG file placement (PascalCase filename in src/meta/), running bun run gen to generate components, JSON metadata (tags, categories, aliases with deprecation support), schema validation (icon.schema.json with 39 category enum, dependentRequired deprecation fields, aliasDeprecationReasons enum). SVGs should follow lucide-react constraints (24x24 viewBox, stroke-based). Activate when contributing a new icon or managing icon metadata and aliases.

258 lines

create-custom-iconscore

Build one-off icon components when no @loke/icons library icon fits. Covers createLokeIcon(name, iconNode) factory, Icon base component with iconNode prop, IconNode type ([SVGElementType, attrs][] with attrs as Record<string, string>), supported SVG elements (circle, ellipse, g, line, path, polygon, polyline, rect), LokeIcon and LokeProps exported types. Always check existing icons and aliases first. Activate only when creating a custom icon not available in the library.

221 lines

find-iconscore

Discover which @loke/icons are available. Covers the full icon list (107 PascalCase exports), alias system (PascalCaseIcon suffix, Material UI-style names like Close for X, Error for AlertCircle, Add for Plus), 39 categories, per-icon tags, naming conventions (PascalCase exports, kebab-case files). Icon gallery at https://design.loke.global/docs/icons/gallery. Activate when searching for an icon by name, meaning, or category, or when verifying an icon exists before importing.

147 lines

use-iconscore

Import and render @loke/icons components in React. Covers LokeProps (size, color, strokeWidth, absoluteStrokeWidth, className), SVG passthrough attributes, accessibility (aria-hidden auto-behavior, aria-label for interactive icons), aliases (PascalCaseIcon suffix, Material UI names like Close, Error, Add), and forwardRef support. Activate when using icon components from @loke/icons in a React application.

226 lines