morphicons 1.2.0 → 1.4.0

package/README.md

@@ -36,7 +36,7 @@ The usual icon morphs either interpolate raw coordinates (shapes shrink and shea
 bun add morphicons        # or npm install / pnpm add
 ```
 
-ESM only. `react` (>= 18) and `vue` (>= 3.3) are optional peers — only needed for `morphicons/react` and `morphicons/vue`.
+ESM only. `react` (>= 18), `vue` (>= 3.3), `svelte` (>= 5) and `react-native` (>= 0.71) + `react-native-svg` (>= 14) are optional peers — only needed for `morphicons/react`, `morphicons/vue`, `morphicons/svelte` and `morphicons/react-native`.
 
 ## Usage
 
@@ -88,6 +88,60 @@ const morph = ref<MorphHandle | null>(null);
 
 Same surface as the React binding: presentation props (`size`, `strokeWidth`, `absoluteStrokeWidth`, `color`; `class`, `style` and the rest of the `<svg>` attrs fall through), the same accessibility defaults (`aria-hidden` unless you pass `label`) and the same clean SSR — works with Nuxt out of the box: the server emits the exact static SVG and the runtime is born on hydration. The binding is a plain render function; no SFC compiler or JSX involved.
 
+### Svelte — same three modes
+
+```svelte
+<script lang="ts">
+  import { MorphIcon, type MorphHandle } from "morphicons/svelte";
+  import { Menu, X, Check } from "lucide"; // data, not components
+
+  let open = $state(false);
+  let morph = $state<MorphHandle>();
+  // morph?.morphTo(Check)  → animates
+  // morph?.set(X)          → jumps without animating
+</script>
+
+<!-- 1. Uncontrolled (90% of uses): change the prop and morphicons animates -->
+<MorphIcon icon={open ? X : Menu} spring="snappy" />
+
+<!-- 2. Controlled (gestures, scroll): explicit progress, no spring -->
+<MorphIcon from={Menu} to={X} progress={dragProgress} />
+
+<!-- 3. Imperative (sequences): bind:this → morphTo / set -->
+<MorphIcon bind:this={morph} icon={Menu} />
+```
+
+Same surface again: presentation props, `class`/`style`/rest-attr fall-through — fully typed via `svelte/elements`, so SVG attrs, events and ARIA autocomplete and typos fail the build, like lucide-svelte — the same accessibility defaults and the same clean SSR — works with SvelteKit out of the box. Svelte 5 (runes); the component ships as `.svelte` source and your bundler compiles it via the `svelte` export condition, like every Svelte library.
+
+### React Native — same three modes
+
+```tsx
+import { MorphIcon, type MorphHandle } from "morphicons/react-native";
+import { Menu, X, Check } from "lucide"; // data, not components
+
+// 1. Uncontrolled (90% of uses): change the prop and morphicons animates
+<MorphIcon icon={open ? X : Menu} spring="snappy" />
+
+// 2. Controlled (gestures, scroll): explicit progress, no spring
+<MorphIcon from={Menu} to={X} progress={dragProgress} />
+
+// 3. Imperative (sequences)
+const ref = useRef<MorphHandle>(null);
+<MorphIcon ref={ref} icon={Menu} />
+ref.current?.morphTo(Check); // animates
+ref.current?.set(X);         // jumps without animating
+```
+
+The DOM-free core beyond the browser: the dom driver is reused verbatim as the engine (React Native has a global `requestAnimationFrame`, and `PathEl` is structural), so the whole platform difference is a shim that forwards the per-frame `d` write to `Path.setNativeProps` of react-native-svg — outside the React render, exactly like the web mutation. Same surface as the React binding (`size`, `strokeWidth`, `absoluteStrokeWidth`, `color`, plus the native `Svg` props: `testID`, touch handlers…), same accessibility defaults (`aria-hidden` unless you pass `label` → `role="img"` + `aria-label`). Reduced motion comes from `AccessibilityInfo` (best-effort: the query is async; a `reduceMotionChanged` subscription keeps it exact from then on). Requires Metro with package `exports` resolution — default since React Native 0.79; on older versions enable `unstable_enablePackageExports`.
+
+### Lifecycle contract (all four bindings)
+
+The four components share one contract, pinned by mirrored client-mount tests:
+
+- **Lazy driver.** Mounting without any icon is fine — SSR emits `<path d="">` and the driver is born with the FIRST icon that shows up, whether a late `icon` prop (data that loads async), a late `from`/`to` pair, or an imperative `set`/`morphTo`. The first icon paints without animating; `morphTo` before the driver exists behaves as `set` (there is nothing to fly from).
+- **Controlled wins.** While `from` AND `to` are both present, the pair owns the path: `icon` changes are ignored, no spring fires. Drop the pair and the current `icon` takes over (animated). Mixing the modes is not an error — the precedence is just explicit.
+- **Clean re-entry.** Any exit from controlled mode (an imperative call or an icon takeover) invalidates the frozen pair, so returning to the same `from`/`to` re-bases on `from` and renders exactly like a clean mount at that `progress`.
+
 ### Vanilla (no React)
 
 ```ts
@@ -131,7 +185,7 @@ morphicons has no per-library adapters — any icon set that meets these require
    const bell   = fitIcon(teenySmallBell, 15); // also "0 0 15 15" or [0, 0, 15, 15]
    ```
 
-   It returns a plain `d`, so it goes anywhere an icon is accepted. Call it at module scope, not per render. Skipping it doesn't throw — Procrustes is similarity-invariant, so the grid mismatch never reads as false rotation; it lands in σ as an unwanted zoom, and the target draws outside the canvas. The React and Vue bindings default to `viewBox="0 0 24 24"`, overridable via props.
+   It returns a plain `d`, so it goes anywhere an icon is accepted. Call it at module scope, not per render. Skipping it doesn't throw — Procrustes is similarity-invariant, so the grid mismatch never reads as false rotation; it lands in σ as an unwanted zoom, and the target draws outside the canvas. The React, Vue and Svelte bindings default to `viewBox="0 0 24 24"`, overridable via props.
 4. **Uniform stroke.** Cosmetic rather than structural: a consistent stroke width and round caps/joins make in-flight shapes look native. These live on the `<svg>`, not in morphicons.
 
 Beyond the libraries in the playground, sets known to qualify on the 24×24 grid — no fitting needed: **Heroicons** (outline style), **Iconoir** (1.5px stroke), **Akar Icons**, **Untitled UI** and **Hugeicons** (stroke style). Off-grid packs work through `fitIcon`: **Teenyicons** (15×15), **Carbon** (32×32), **Heroicons solid** (20×20).
@@ -142,7 +196,7 @@ This also covers the [shadcn registry](https://www.shadcn.io/icons), which re-pu
 
 ```
 ┌─────────────────────────────────────────────┐
-│  bindings   react · vue                     │  thin: ref + createMorph
+│  bindings   react · vue · svelte · rn      │  thin: ref + createMorph
 ├─────────────────────────────────────────────┤
 │  drivers    dom (setAttribute + rAF)        │  singleton scheduler
 ├─────────────────────────────────────────────┤
@@ -153,7 +207,7 @@ This also covers the [shadcn registry](https://www.shadcn.io/icons), which re-pu
 └─────────────────────────────────────────────┘
 ```
 
-The hard rule: **the core never touches the DOM**. Pure functions consume icon data and produce `d` strings. Direct consequence: a React Native driver over `react-native-svg` + Reanimated is just another adapter, not a rewrite. One package with subpath exports (`.` core, `./dom`, `./react`, `./vue`), ESM only, `sideEffects: false`.
+The hard rule: **the core never touches the DOM**. Pure functions consume icon data and produce `d` strings. Direct consequence: the React Native binding over `react-native-svg` is just another adapter, not a rewrite — it reuses the dom driver verbatim through a `setNativeProps` shim. One package with subpath exports (`.` core, `./dom`, `./react`, `./react-native`, `./vue`, `./svelte`), ESM only, `sideEffects: false`.
 
 The plan is the central artifact:
 
@@ -293,8 +347,11 @@ CI budget (size-limit, gzip) as an anti-regression tripwire — gates carry ~10%
 |---|---|---|
 | `morphicons` (core) | 6.60 KB | 7 KB |
 | `morphicons/dom` (core + driver) | 7.04 KB | 7.5 KB |
-| `morphicons/react` (all, react external) | 7.77 KB | 8.5 KB |
-| `morphicons/vue` (all, vue external) | 7.81 KB | 8.5 KB |
+| `morphicons/react` (all, react external) | 7.89 KB | 8.5 KB |
+| `morphicons/react-native` (all, react/rn/rnsvg external) | 8.25 KB | 9 KB |
+| `morphicons/vue` (all, vue external) | 7.93 KB | 8.5 KB |
+| `morphicons/svelte` TS half (all, svelte external) | 7.54 KB | 8 KB |
+| `MorphIcon.svelte` (ships as source, consumer-compiled) | 1.25 KB | 1.4 KB |
 
 ## Playground
 
@@ -307,27 +364,15 @@ bun run play   # → http://localhost:3000
 ## Development
 
 ```bash
-bun test          # 92 tests / ~13,500 asserts
-bun run typecheck # strict ×4: core+dom without lib DOM, playground, react, vue
+bun test          # 156 tests / ~13,700 asserts
+bun run typecheck # strict ×6: core+dom without lib DOM, playground, react, react-native, vue, svelte
 bun run format    # biome
-bun run build     # tsdown → dist/ (entries index, dom, react, vue)
+bun run build     # tsdown → dist/ + scripts/build-svelte.ts (svelte entry)
 bun run size      # size gates
 ```
 
 Icons shown in the playground belong to their authors: [Lucide](https://lucide.dev) (ISC), [Feather](https://feathericons.com) (MIT), [Tabler](https://tabler.io/icons) (MIT).
 
-## Star history
-
-<p align="center">
-  <a href="https://star-history.com/#guillermolg00/morphicons&Date">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=guillermolg00/morphicons&type=Date&theme=dark">
-      <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=guillermolg00/morphicons&type=Date">
-      <img alt="Star history chart of morphicons" src="https://api.star-history.com/svg?repos=guillermolg00/morphicons&type=Date" width="640">
-    </picture>
-  </a>
-</p>
-
 ---
 
 MIT © [Guillermo](https://guillermolg.com) — made by [guillermolg.com](https://guillermolg.com)

package/dist/MorphIcon.svelte

@@ -0,0 +1,86 @@
+<!-- Svelte 5 binding: MorphIcon with the three modes — uncontrolled (change
+  the `icon` prop and morphicons animates), controlled (`from`/`to`/`progress`,
+  no spring) and imperative (`bind:this` → { morphTo, set }).
+
+  Clean SSR by construction: the initial `d` is computed ONCE with the pure
+  core at init (server and client produce the same string → hydration without
+  mismatch) and stays a plain const, so Svelte never rewrites the attribute —
+  the morph mutates it externally via createMorph. Thin shell on purpose: all
+  logic lives in shared.ts (typechecked); this file is only compiled.
+  Drop-in with lucide-svelte: same presentation props. -->
+<script lang="ts">
+import { onMount, untrack } from "svelte";
+import {
+  computeInitialD,
+  createController,
+  type IconInput,
+  type MorphIconProps,
+  type MorphOptions,
+  type SpringPreset,
+} from "./svelte-shared.js";
+
+let {
+  icon,
+  from,
+  to,
+  progress,
+  spring,
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  absoluteStrokeWidth = false,
+  label,
+  ...rest
+}: MorphIconProps = $props();
+
+// svelte-ignore state_referenced_locally — mount-time value on purpose: the
+// initial d must stay a constant so Svelte never rewrites the attribute.
+const initialD = computeInitialD({ icon, from, to, progress });
+
+let pathEl: SVGPathElement | undefined = $state();
+// svelte-ignore state_referenced_locally — init-time values on purpose: they
+// seed the controller's watch baselines so the first $effect run is a no-op.
+const ctrl = createController({ icon, from, to, progress });
+
+onMount(() => {
+  if (pathEl) ctrl.mount(pathEl, { icon, from, to, progress });
+  return () => ctrl.destroy();
+});
+
+// Prop changes: one watcher owns the mode logic (controlled wins — change
+// detection and precedence live in shared.ts).
+$effect(() => {
+  const next = { icon, from, to, progress, spring };
+  untrack(() => ctrl.watch(next));
+});
+
+export function morphTo(i: IconInput, s?: SpringPreset | MorphOptions): void {
+  ctrl.morphTo(i, s ?? spring);
+}
+
+export function set(i: IconInput): void {
+  ctrl.set(i);
+}
+
+const sw = $derived(
+  absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth,
+);
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke={color}
+  stroke-width={sw}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  role={label ? "img" : undefined}
+  aria-hidden={label ? undefined : "true"}
+  {...rest}
+>
+  {#if label}<title>{label}</title>{/if}
+  <path bind:this={pathEl} d={initialD} />
+</svg>

package/dist/react-native.d.ts

@@ -0,0 +1,31 @@
+import { a as Sampled, c as SpringPreset, n as IconInput, r as IconNode } from "./types-JAF3s76Y.js";
+import { Morph, MorphOptions, PathEl } from "./dom.js";
+import { SvgProps } from "react-native-svg";
+//#region src/react-native/index.d.ts
+/** Imperative surface exposed via ref. */
+interface MorphHandle {
+  morphTo(icon: IconInput, spring?: SpringPreset | MorphOptions): void;
+  set(icon: IconInput): void;
+}
+interface MorphIconProps extends Omit<SvgProps, "from" | "to"> {
+  /** Uncontrolled mode: the current icon; changing the prop animates. */
+  icon?: IconInput;
+  /** Controlled mode: source endpoint of the pair. */
+  from?: IconInput;
+  /** Controlled mode: target endpoint of the pair. */
+  to?: IconInput;
+  /** Controlled mode: 0..1 progress of the frozen morph (no spring). */
+  progress?: number;
+  /** Physics for uncontrolled/imperative mode: preset or custom spring. */
+  spring?: SpringPreset | MorphOptions;
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+  /** Like lucide: stroke width does not scale with `size`. */
+  absoluteStrokeWidth?: boolean;
+  /** Accessibility: with label → role="img" + aria-label; without → aria-hidden. */
+  label?: string;
+}
+declare const MorphIcon: import("react").ForwardRefExoticComponent<MorphIconProps & import("react").RefAttributes<MorphHandle>>;
+//#endregion
+export { type IconInput, type IconNode, type Morph, MorphHandle, MorphIcon, MorphIconProps, type MorphOptions, type PathEl, type Sampled, type SpringPreset };

package/dist/react-native.js

@@ -0,0 +1,180 @@
+import { a as buildPlan, f as interpPolar, l as serialize, r as resampleIcon, u as allocOutputs } from "./spring-BTcHiHR5.js";
+import { canonicalD, createMorph } from "./dom.js";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AccessibilityInfo } from "react-native";
+import Svg, { Path } from "react-native-svg";
+//#region src/react-native/index.tsx
+const useIsoLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+let reduced = false;
+let rmInit = false;
+function initReducedMotion() {
+	if (rmInit) return;
+	rmInit = true;
+	try {
+		AccessibilityInfo.isReduceMotionEnabled().then((value) => {
+			reduced = value;
+		}, () => {});
+		AccessibilityInfo.addEventListener("reduceMotionChanged", (value) => {
+			reduced = value;
+		});
+	} catch {}
+}
+/** Frozen shape of the from→to pair at t, using the pure core. At exact
+*  endpoints returns the canonical `d` (real curves, not polyline). */
+function frozenD(from, to, t) {
+	if (t <= 0) return canonicalD(from);
+	if (t >= 1) return canonicalD(to);
+	const plan = buildPlan(resampleIcon(from), resampleIcon(to));
+	const out = allocOutputs(plan);
+	interpPolar(plan, t, out);
+	return serialize(out, plan.items.map((it) => it.closed));
+}
+const MorphIcon = forwardRef(function MorphIcon(props, ref) {
+	const { icon, from, to, progress, spring, size = 24, color = "currentColor", strokeWidth = 2, absoluteStrokeWidth, label, ...rest } = props;
+	const controlled = from !== void 0 && to !== void 0;
+	const initialIcon = icon ?? from ?? to;
+	const [initialD] = useState(() => {
+		if (controlled) return frozenD(from, to, progress ?? 0);
+		return initialIcon !== void 0 ? canonicalD(initialIcon) : "";
+	});
+	const pathRef = useRef(null);
+	const morphRef = useRef(null);
+	const springRef = useRef(spring);
+	springRef.current = spring;
+	const prevIcon = useRef(icon);
+	const prevControlled = useRef(controlled);
+	const dead = useRef(false);
+	const based = useRef(false);
+	const pair = useRef(null);
+	/** The PathEl shim: createMorph only ever writes `d`, and Path forwards
+	*  it to the native view without re-rendering. Stable identity. */
+	const el = useRef({ setAttribute: (name, value) => {
+		if (name === "d") pathRef.current?.setNativeProps({ d: value });
+	} });
+	/** morphTo that honors the OS reduce-motion setting (best-effort). */
+	const fly = (m, i, s) => {
+		if (reduced) m.set(i);
+		else m.morphTo(i, s);
+	};
+	const flyRef = useRef(fly);
+	flyRef.current = fly;
+	/** Driver birth, lazy included (#1 of the lifecycle contract): an
+	*  iconless mount keeps the element and the FIRST icon to show up (prop
+	*  or imperative) creates the driver, already showing it — no flight.
+	*  Stable across renders: closes over refs only. */
+	const ensure = useCallback((birth) => {
+		if (morphRef.current) return morphRef.current;
+		if (dead.current || !pathRef.current) return null;
+		morphRef.current = createMorph(el.current, birth);
+		return morphRef.current;
+	}, []);
+	useIsoLayoutEffect(() => {
+		dead.current = false;
+		initReducedMotion();
+		if (pathRef.current && initialIcon !== void 0) {
+			const m = createMorph(el.current, controlled ? from : initialIcon);
+			morphRef.current = m;
+			if (controlled) {
+				pair.current = [from, to];
+				const t = progress ?? 0;
+				if (t <= 0) m.set(from);
+				else if (t >= 1) m.set(to);
+				else {
+					m.seek(to, t);
+					based.current = true;
+				}
+			}
+		}
+		return () => {
+			dead.current = true;
+			morphRef.current?.destroy();
+			morphRef.current = null;
+			based.current = false;
+			pair.current = null;
+		};
+	}, []);
+	useEffect(() => {
+		const left = prevControlled.current && !controlled;
+		prevControlled.current = controlled;
+		const changed = icon !== prevIcon.current;
+		prevIcon.current = icon;
+		if (controlled) return;
+		if (icon === void 0 || !changed && !left) return;
+		pair.current = null;
+		based.current = false;
+		const m = morphRef.current;
+		if (m) flyRef.current(m, icon, springRef.current);
+		else ensure(icon);
+	}, [
+		icon,
+		controlled,
+		ensure
+	]);
+	useEffect(() => {
+		if (!controlled) return;
+		const m = morphRef.current ?? ensure(from);
+		if (!m) return;
+		const t = progress ?? 0;
+		if (!pair.current || pair.current[0] !== from || pair.current[1] !== to) {
+			pair.current = [from, to];
+			based.current = false;
+		}
+		if (t <= 0) {
+			m.set(from);
+			based.current = false;
+		} else if (t >= 1) {
+			m.set(to);
+			based.current = false;
+		} else {
+			if (!based.current) {
+				m.set(from);
+				based.current = true;
+			}
+			m.seek(to, t);
+		}
+	}, [
+		controlled,
+		from,
+		to,
+		progress,
+		ensure
+	]);
+	useImperativeHandle(ref, () => ({
+		morphTo: (i, s) => {
+			pair.current = null;
+			based.current = false;
+			const m = morphRef.current;
+			if (m) flyRef.current(m, i, s ?? springRef.current);
+			else ensure(i);
+		},
+		set: (i) => {
+			pair.current = null;
+			based.current = false;
+			const m = morphRef.current;
+			if (m) m.set(i);
+			else ensure(i);
+		}
+	}), [ensure]);
+	const sw = absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth;
+	return /* @__PURE__ */ jsx(Svg, {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: color,
+		strokeWidth: sw,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		role: label ? "img" : void 0,
+		"aria-label": label,
+		"aria-hidden": label ? void 0 : true,
+		...rest,
+		children: /* @__PURE__ */ jsx(Path, {
+			ref: pathRef,
+			d: initialD
+		})
+	});
+});
+//#endregion
+export { MorphIcon };

package/dist/react.js

@@ -1,6 +1,6 @@
 import { a as buildPlan, f as interpPolar, l as serialize, r as resampleIcon, u as allocOutputs } from "./spring-BTcHiHR5.js";
 import { canonicalD, createMorph } from "./dom.js";
-import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/index.tsx
 const useIsoLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
@@ -26,42 +26,68 @@ const MorphIcon = forwardRef(function MorphIcon(props, ref) {
 	const morphRef = useRef(null);
 	const springRef = useRef(spring);
 	springRef.current = spring;
-	const firstIcon = useRef(true);
+	const prevIcon = useRef(icon);
+	const prevControlled = useRef(controlled);
+	const dead = useRef(false);
 	const based = useRef(false);
 	const pair = useRef(null);
+	/** Driver birth, lazy included (#1 of the lifecycle contract): an
+	*  iconless mount keeps the element and the FIRST icon to show up (prop
+	*  or imperative) creates the driver, already showing it — no flight.
+	*  Stable across renders: closes over refs only. */
+	const ensure = useCallback((birth) => {
+		if (morphRef.current) return morphRef.current;
+		const el = pathRef.current;
+		if (dead.current || !el) return null;
+		morphRef.current = createMorph(el, birth);
+		return morphRef.current;
+	}, []);
 	useIsoLayoutEffect(() => {
+		dead.current = false;
 		const el = pathRef.current;
-		if (!el || initialIcon === void 0) return;
-		const m = createMorph(el, controlled ? from : initialIcon);
-		morphRef.current = m;
-		if (controlled) {
-			pair.current = [from, to];
-			const t = progress ?? 0;
-			if (t <= 0) m.set(from);
-			else if (t >= 1) m.set(to);
-			else {
-				m.seek(to, t);
-				based.current = true;
+		if (el && initialIcon !== void 0) {
+			const m = createMorph(el, controlled ? from : initialIcon);
+			morphRef.current = m;
+			if (controlled) {
+				pair.current = [from, to];
+				const t = progress ?? 0;
+				if (t <= 0) m.set(from);
+				else if (t >= 1) m.set(to);
+				else {
+					m.seek(to, t);
+					based.current = true;
+				}
 			}
 		}
 		return () => {
-			m.destroy();
+			dead.current = true;
+			morphRef.current?.destroy();
 			morphRef.current = null;
 			based.current = false;
 			pair.current = null;
 		};
 	}, []);
 	useEffect(() => {
-		if (icon === void 0) return;
-		if (firstIcon.current) {
-			firstIcon.current = false;
-			return;
-		}
-		morphRef.current?.morphTo(icon, springRef.current);
-	}, [icon]);
-	useEffect(() => {
+		const left = prevControlled.current && !controlled;
+		prevControlled.current = controlled;
+		const changed = icon !== prevIcon.current;
+		prevIcon.current = icon;
+		if (controlled) return;
+		if (icon === void 0 || !changed && !left) return;
+		pair.current = null;
+		based.current = false;
 		const m = morphRef.current;
-		if (!m || !controlled) return;
+		if (m) m.morphTo(icon, springRef.current);
+		else ensure(icon);
+	}, [
+		icon,
+		controlled,
+		ensure
+	]);
+	useEffect(() => {
+		if (!controlled) return;
+		const m = morphRef.current ?? ensure(from);
+		if (!m) return;
 		const t = progress ?? 0;
 		if (!pair.current || pair.current[0] !== from || pair.current[1] !== to) {
 			pair.current = [from, to];
@@ -84,12 +110,25 @@ const MorphIcon = forwardRef(function MorphIcon(props, ref) {
 		controlled,
 		from,
 		to,
-		progress
+		progress,
+		ensure
 	]);
 	useImperativeHandle(ref, () => ({
-		morphTo: (i, s) => morphRef.current?.morphTo(i, s ?? springRef.current),
-		set: (i) => morphRef.current?.set(i)
-	}), []);
+		morphTo: (i, s) => {
+			pair.current = null;
+			based.current = false;
+			const m = morphRef.current;
+			if (m) m.morphTo(i, s ?? springRef.current);
+			else ensure(i);
+		},
+		set: (i) => {
+			pair.current = null;
+			based.current = false;
+			const m = morphRef.current;
+			if (m) m.set(i);
+			else ensure(i);
+		}
+	}), [ensure]);
 	const sw = absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth;
 	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",

package/dist/svelte-shared.d.ts

@@ -0,0 +1,68 @@
+import { a as Sampled, c as SpringPreset, n as IconInput, r as IconNode } from "./types-JAF3s76Y.js";
+import { Morph, MorphOptions, PathEl } from "./dom.js";
+import { SVGAttributes } from "svelte/elements";
+//#region src/svelte/shared.d.ts
+/** Imperative surface exposed on the component instance (`bind:this`). */
+interface MorphHandle {
+  morphTo(icon: IconInput, spring?: SpringPreset | MorphOptions): void;
+  set(icon: IconInput): void;
+}
+/** Rest props fall through to the `<svg>` fully typed (class, style, data-*,
+ *  events, ARIA…) via svelte/elements, like lucide-svelte — typos in an SVG
+ *  attr fail the build. `from`/`to` are omitted because the SMIL animation
+ *  attributes of the same name collide with the controlled-mode pair. */
+interface MorphIconProps extends Omit<SVGAttributes<SVGSVGElement>, "from" | "to"> {
+  /** Uncontrolled mode: the current icon; changing the prop animates. */
+  icon?: IconInput;
+  /** Controlled mode: source endpoint of the pair. */
+  from?: IconInput;
+  /** Controlled mode: target endpoint of the pair. */
+  to?: IconInput;
+  /** Controlled mode: 0..1 progress of the frozen morph (no spring). */
+  progress?: number;
+  /** Physics for uncontrolled/imperative mode: preset or custom spring. */
+  spring?: SpringPreset | MorphOptions;
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+  /** Like lucide-svelte: stroke width does not scale with `size`. */
+  absoluteStrokeWidth?: boolean;
+  /** Accessibility: with label → role="img" + <title>; without → aria-hidden. */
+  label?: string;
+}
+type ModeProps = Pick<MorphIconProps, "icon" | "from" | "to" | "progress">;
+type WatchProps = ModeProps & {
+  spring?: SpringPreset | MorphOptions;
+};
+/** The initial d is constant for Svelte: computed once from the mount-time
+ *  props (server and client produce the same string → hydration without
+ *  mismatch) and from then on only the driver mutates it outside the template. */
+declare function computeInitialD({ icon, from, to, progress }: ModeProps): string;
+/** Per-instance driver state — the exact logic of the React/Vue bindings
+ *  (mount, mode watch, controlled seek with re-basing, imperative). Takes the
+ *  init-time props: they seed the watch baselines so the first `$effect` run
+ *  (which fires on mount in Svelte, unlike Vue's `watch`) is a no-op. All
+ *  change detection lives HERE, under tsc — the .svelte shell only wires
+ *  runes to these methods.
+ *
+ *  Lifecycle contract (shared verbatim by the three bindings):
+ *  - Lazy driver: an iconless mount keeps the element and births the driver
+ *    on the FIRST icon that shows up (prop or imperative). `morphTo` with no
+ *    driver behaves as `set` — there is nothing to fly from.
+ *  - Controlled wins: while `from` and `to` are both present the pair owns
+ *    the path and `icon` changes are ignored; dropping the pair hands the
+ *    path back to `icon`.
+ *  - Every exit from controlled mode (imperative call or icon takeover)
+ *    invalidates the frozen pair, so returning to it re-bases on `from`. */
+declare function createController({ icon, from, to, progress }: ModeProps): {
+  mount(mountEl: PathEl, { icon, from, to, progress }: ModeProps): void;
+  destroy(): void;
+  /** Prop watcher: ONE owner decides per run — the controlled pair while it
+   *  is fully present, `icon` otherwise (mount doesn't fire thanks to the
+   *  init-time baselines). */
+  watch({ icon, from, to, progress, spring }: WatchProps): void;
+  morphTo(icon: IconInput, spring?: SpringPreset | MorphOptions): void;
+  set(icon: IconInput): void;
+};
+//#endregion
+export { type IconInput, type IconNode, type Morph, MorphHandle, MorphIconProps, type MorphOptions, type PathEl, type Sampled, type SpringPreset, computeInitialD, createController };

package/dist/svelte-shared.js

@@ -0,0 +1,146 @@
+import { a as buildPlan, f as interpPolar, l as serialize, r as resampleIcon, u as allocOutputs } from "./spring-BTcHiHR5.js";
+import { canonicalD, createMorph } from "./dom.js";
+//#region src/svelte/shared.ts
+/** Frozen shape of the from→to pair at t, using the pure core (SSR-safe).
+*  At exact endpoints returns the canonical `d` (real curves, not polyline). */
+function frozenD(from, to, t) {
+	if (t <= 0) return canonicalD(from);
+	if (t >= 1) return canonicalD(to);
+	const plan = buildPlan(resampleIcon(from), resampleIcon(to));
+	const out = allocOutputs(plan);
+	interpPolar(plan, t, out);
+	return serialize(out, plan.items.map((it) => it.closed));
+}
+/** The initial d is constant for Svelte: computed once from the mount-time
+*  props (server and client produce the same string → hydration without
+*  mismatch) and from then on only the driver mutates it outside the template. */
+function computeInitialD({ icon, from, to, progress }) {
+	if (from !== void 0 && to !== void 0) return frozenD(from, to, progress ?? 0);
+	const first = icon ?? from ?? to;
+	return first !== void 0 ? canonicalD(first) : "";
+}
+/** Per-instance driver state — the exact logic of the React/Vue bindings
+*  (mount, mode watch, controlled seek with re-basing, imperative). Takes the
+*  init-time props: they seed the watch baselines so the first `$effect` run
+*  (which fires on mount in Svelte, unlike Vue's `watch`) is a no-op. All
+*  change detection lives HERE, under tsc — the .svelte shell only wires
+*  runes to these methods.
+*
+*  Lifecycle contract (shared verbatim by the three bindings):
+*  - Lazy driver: an iconless mount keeps the element and births the driver
+*    on the FIRST icon that shows up (prop or imperative). `morphTo` with no
+*    driver behaves as `set` — there is nothing to fly from.
+*  - Controlled wins: while `from` and `to` are both present the pair owns
+*    the path and `icon` changes are ignored; dropping the pair hands the
+*    path back to `icon`.
+*  - Every exit from controlled mode (imperative call or icon takeover)
+*    invalidates the frozen pair, so returning to it re-bases on `from`. */
+function createController({ icon, from, to, progress }) {
+	let el = null;
+	let dead = false;
+	let morph = null;
+	let based = false;
+	let pair = null;
+	let prevIcon = icon;
+	let prevControlled = from !== void 0 && to !== void 0;
+	let prevFrom = from;
+	let prevTo = to;
+	let prevProgress = progress;
+	/** Driver birth, lazy included: the first icon to show up creates it. */
+	const ensure = (birth) => {
+		if (morph) return morph;
+		if (dead || !el) return null;
+		morph = createMorph(el, birth);
+		return morph;
+	};
+	/** Controlled mode: freeze the pair at `progress` via seek (no spring). */
+	const applyPair = (from, to, progress) => {
+		const m = morph;
+		if (!m) return;
+		const t = progress ?? 0;
+		if (!pair || pair[0] !== from || pair[1] !== to) {
+			pair = [from, to];
+			based = false;
+		}
+		if (t <= 0) {
+			m.set(from);
+			based = false;
+		} else if (t >= 1) {
+			m.set(to);
+			based = false;
+		} else {
+			if (!based) {
+				m.set(from);
+				based = true;
+			}
+			m.seek(to, t);
+		}
+	};
+	return {
+		mount(mountEl, { icon, from, to, progress }) {
+			el = mountEl;
+			const controlled = from !== void 0 && to !== void 0;
+			const initialIcon = icon ?? from ?? to;
+			if (initialIcon === void 0) return;
+			const m = createMorph(el, controlled ? from : initialIcon);
+			morph = m;
+			if (controlled) {
+				pair = [from, to];
+				const t = progress ?? 0;
+				if (t <= 0) m.set(from);
+				else if (t >= 1) m.set(to);
+				else {
+					m.seek(to, t);
+					based = true;
+				}
+			}
+		},
+		destroy() {
+			dead = true;
+			el = null;
+			morph?.destroy();
+			morph = null;
+			based = false;
+			pair = null;
+		},
+		/** Prop watcher: ONE owner decides per run — the controlled pair while it
+		*  is fully present, `icon` otherwise (mount doesn't fire thanks to the
+		*  init-time baselines). */
+		watch({ icon, from, to, progress, spring }) {
+			const controlled = from !== void 0 && to !== void 0;
+			const left = prevControlled && !controlled;
+			const iconChanged = icon !== prevIcon;
+			const pairChanged = from !== prevFrom || to !== prevTo || progress !== prevProgress;
+			prevControlled = controlled;
+			prevIcon = icon;
+			prevFrom = from;
+			prevTo = to;
+			prevProgress = progress;
+			if (controlled) {
+				if (!pairChanged) return;
+				if (!(morph ?? ensure(from))) return;
+				applyPair(from, to, progress);
+				return;
+			}
+			if (icon === void 0 || !iconChanged && !left) return;
+			pair = null;
+			based = false;
+			if (morph) morph.morphTo(icon, spring);
+			else ensure(icon);
+		},
+		morphTo(icon, spring) {
+			pair = null;
+			based = false;
+			if (morph) morph.morphTo(icon, spring);
+			else ensure(icon);
+		},
+		set(icon) {
+			pair = null;
+			based = false;
+			if (morph) morph.set(icon);
+			else ensure(icon);
+		}
+	};
+}
+//#endregion
+export { computeInitialD, createController };

package/dist/svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from "svelte";
+import type { MorphHandle, MorphIconProps } from "./svelte-shared.js";
+export declare const MorphIcon: Component<MorphIconProps, MorphHandle>;
+export type { MorphHandle, MorphIconProps };
+export type {
+  IconInput,
+  IconNode,
+  Morph,
+  MorphOptions,
+  PathEl,
+  Sampled,
+  SpringPreset,
+} from "./svelte-shared.js";

package/dist/svelte.js

@@ -0,0 +1 @@
+export { default as MorphIcon } from "./MorphIcon.svelte";

package/dist/vue.js

@@ -72,8 +72,21 @@ const MorphIcon = defineComponent({
 		})();
 		const pathEl = shallowRef(null);
 		let morph = null;
+		let dead = false;
 		let based = false;
 		let pair = null;
+		let prevIcon = props.icon;
+		let prevControlled = props.from !== void 0 && props.to !== void 0;
+		/** Driver birth, lazy included (#1 of the lifecycle contract): an
+		*  iconless mount keeps the element and the FIRST icon to show up (prop
+		*  or imperative) creates the driver, already showing it — no flight. */
+		const ensure = (birth) => {
+			if (morph) return morph;
+			const el = pathEl.value;
+			if (dead || !el) return null;
+			morph = createMorph(el, birth);
+			return morph;
+		};
 		onMounted(() => {
 			const el = pathEl.value;
 			const { icon, from, to, progress } = props;
@@ -94,22 +107,39 @@ const MorphIcon = defineComponent({
 			}
 		});
 		onBeforeUnmount(() => {
+			dead = true;
 			morph?.destroy();
 			morph = null;
 			based = false;
 			pair = null;
 		});
-		watch(() => props.icon, (icon) => {
-			if (icon !== void 0) morph?.morphTo(icon, props.spring);
+		watch(() => [
+			props.icon,
+			props.from,
+			props.to
+		], () => {
+			const { icon, from, to } = props;
+			const controlled = from !== void 0 && to !== void 0;
+			const left = prevControlled && !controlled;
+			prevControlled = controlled;
+			const changed = icon !== prevIcon;
+			prevIcon = icon;
+			if (controlled) return;
+			if (icon === void 0 || !changed && !left) return;
+			pair = null;
+			based = false;
+			if (morph) morph.morphTo(icon, props.spring);
+			else ensure(icon);
 		});
 		watch(() => [
 			props.from,
 			props.to,
 			props.progress
 		], () => {
-			const m = morph;
 			const { from, to, progress } = props;
-			if (!m || from === void 0 || to === void 0) return;
+			if (from === void 0 || to === void 0) return;
+			const m = morph ?? ensure(from);
+			if (!m) return;
 			const t = progress ?? 0;
 			if (!pair || pair[0] !== from || pair[1] !== to) {
 				pair = [from, to];
@@ -130,8 +160,18 @@ const MorphIcon = defineComponent({
 			}
 		});
 		expose({
-			morphTo: (i, s) => morph?.morphTo(i, s ?? props.spring),
-			set: (i) => morph?.set(i)
+			morphTo: (i, s) => {
+				pair = null;
+				based = false;
+				if (morph) morph.morphTo(i, s ?? props.spring);
+				else ensure(i);
+			},
+			set: (i) => {
+				pair = null;
+				based = false;
+				if (morph) morph.set(i);
+				else ensure(i);
+			}
 		});
 		return () => {
 			const sw = props.absoluteStrokeWidth ? Number(props.strokeWidth) * 24 / Number(props.size) : props.strokeWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morphicons",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Universal morphing for stroke-based icons with spring physics — zero runtime dependencies",
   "license": "MIT",
   "author": "Guillermo (https://guillermolg.com)",
@@ -29,8 +29,12 @@
     "shadcn",
     "feather",
     "react",
+    "react-native",
+    "lucide-react-native",
     "vue",
     "lucide-vue-next",
+    "svelte",
+    "lucide-svelte",
     "icon-animation"
   ],
   "type": "module",
@@ -51,19 +55,40 @@
       "types": "./dist/react.d.ts",
       "default": "./dist/react.js"
     },
+    "./react-native": {
+      "types": "./dist/react-native.d.ts",
+      "default": "./dist/react-native.js"
+    },
     "./vue": {
       "types": "./dist/vue.d.ts",
       "default": "./dist/vue.js"
+    },
+    "./svelte": {
+      "types": "./dist/svelte.d.ts",
+      "svelte": "./dist/svelte.js",
+      "default": "./dist/svelte.js"
     }
   },
   "peerDependencies": {
     "react": ">=18",
+    "react-native": ">=0.71",
+    "react-native-svg": ">=14",
+    "svelte": ">=5",
     "vue": ">=3.3"
   },
   "peerDependenciesMeta": {
     "react": {
       "optional": true
     },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
     "vue": {
       "optional": true
     }
@@ -73,11 +98,11 @@
   ],
   "scripts": {
     "test": "bun test",
-    "typecheck": "tsc --noEmit && tsc -p playground --noEmit && tsc -p tsconfig.react.json --noEmit && tsc -p tsconfig.vue.json --noEmit",
+    "typecheck": "tsc --noEmit && tsc -p playground --noEmit && tsc -p tsconfig.react.json --noEmit && tsc -p tsconfig.react-native.json --noEmit && tsc -p tsconfig.vue.json --noEmit && tsc -p tsconfig.svelte.json --noEmit",
     "play": "bun ./playground/index.html",
     "lint": "biome check .",
     "format": "biome check --write .",
-    "build": "tsdown",
+    "build": "tsdown && bun scripts/build-svelte.ts",
     "size": "size-limit",
     "prepublishOnly": "bun run build"
   },
@@ -106,6 +131,18 @@
       "limit": "8.5 KB",
       "gzip": true
     },
+    {
+      "name": "core + dom + react-native (MorphIcon, react/rn/rnsvg external)",
+      "path": "dist/react-native.js",
+      "import": "*",
+      "ignore": [
+        "react",
+        "react-native",
+        "react-native-svg"
+      ],
+      "limit": "9 KB",
+      "gzip": true
+    },
     {
       "name": "core + dom + vue (MorphIcon, vue external)",
       "path": "dist/vue.js",
@@ -115,20 +152,44 @@
       ],
       "limit": "8.5 KB",
       "gzip": true
+    },
+    {
+      "name": "core + dom + svelte TS half (svelte external)",
+      "path": "dist/svelte-shared.js",
+      "import": "*",
+      "ignore": [
+        "svelte"
+      ],
+      "limit": "8 KB",
+      "gzip": true
+    },
+    {
+      "name": "svelte component (ships as source, consumer-compiled)",
+      "path": "dist/MorphIcon.svelte",
+      "disablePlugins": [
+        "@size-limit/esbuild"
+      ],
+      "limit": "1.4 KB",
+      "gzip": true
     }
   ],
   "devDependencies": {
     "@biomejs/biome": "^2.5.6",
+    "@happy-dom/global-registrator": "^20.11.1",
     "@size-limit/preset-small-lib": "^13.0.3",
     "@tabler/icons": "^3.46.0",
     "@types/bun": "^1.3.14",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
     "feather-icons": "^4.29.2",
+    "happy-dom": "^20.11.1",
     "lucide": "^1.28.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "react-native": "^0.86.2",
+    "react-native-svg": "^15.15.5",
     "size-limit": "^13.0.3",
+    "svelte": "^5.56.8",
     "tsdown": "^0.22.14",
     "typescript": "^7.0.2",
     "vue": "^3.5.40"