Morphos

@morphos/icons

Changelog for @morphos/icons.

1.0.1

  • Test coverage for Icon's structured-shape rendering (circle, rect, line, polyline, ellipse, and unrecognized tags) and for IconProvider's error path when a decorated source's resolver was unregistered before use. No behavior change.

1.0.0

Breaking redesign around a single Icon component that resolves icons by name, plus a provider system for choosing which icon set name resolves against:

  • Breaking: LucideIcon and PhosphorIcon are removed. Icon no longer takes a svg/icon data prop — it now takes a typed name, resolved against the configured icon provider. lucide is a real peerDependency — its icon data is read live (import { icons } from "lucide"), no per-icon data wiring needed.
  • Breaking: IconProvider is now mandatory. There is no default provider — not even for "lucide". Every app must apply @IconProvider(...) somewhere, or Icon logs a warning and renders nothing.
  • IconProvider — a class decorator, same pattern as @Router, applied directly to the root component to configure the app-wide provider. Takes an IconSource class directly (not a string), or an array to register several at once, defaulting to the first. Runs at class-decoration time, before the class is ever instantiated, so there's no ordering caveat to work around. setIconProvider / getIconProvider do the same thing without decorating a class.
  • RegisterIconProvider + IconSource — registers a custom icon provider as a class, decorator-first, consistent with every other Morphos/PraxisJS component. Takes an optional second argument, defaultIcons (Record<name, svg>, or a glob path string via @morphos/icons/vite's iconsPlugin()) — resolve no longer needs implementing for the common case. Icon's provider prop and setIconProvider take the registered name, exactly like the built-in "lucide"; RegisterIconProvider also tags the class itself so IconProvider can read the name back.
  • "lucide" isn't special-cased anywhere: it's LucideSource, a built-in IconSource — a pre-configured wrapper, registered and activated the same way a custom provider is (@IconProvider(LucideSource), never automatic). resolve can return structured { nodes, viewBox? } data — the same [tag, attrs][] format lucide uses — instead of an { svg } string, for any provider whose source data is already shaped that way.
  • IconInstance — a PraxisJS Composable wrapping getIconProvider/setIconProvider, for changing the provider from inside a component via @Compose(IconInstance), same pattern as @praxisjs/composables' WindowSize.
  • provider (on Icon/setIconProvider) and Icon's name are typed as LiteralUnions — autocomplete still suggests the known values, but any string is accepted, so custom provider names and their icon names type-check too.

0.1.0

Initial release.

  • Icon — generic, framework-agnostic SVG icon primitive for raw markup.
  • LucideIcon — renders icon data from the lucide package's [tag, attrs][] node format.
  • PhosphorIcon — renders a raw SVG asset from @phosphor-icons/core, with mirrored support.

On this page