morphicons 1.1.0 → 1.2.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` is an optional peer (>= 18) — only needed for `morphicons/react`.
+ESM only. `react` (>= 18) and `vue` (>= 3.3) are optional peers — only needed for `morphicons/react` and `morphicons/vue`.
 
 ## Usage
 
@@ -60,6 +60,34 @@ ref.current?.set(X);         // jumps without animating
 
 Drop-in replacement for lucide-react: `size`, `strokeWidth`, `absoluteStrokeWidth`, `color`, `className` and the rest of the `<svg>` props pass straight through. Correct accessibility by default: `aria-hidden` unless you pass `label` (→ `role="img"` + `<title>`). Clean SSR: the server emits the exact static SVG (zero flash, zero layout shift); the runtime is born on hydration. `prefers-reduced-motion` degrades to an instant swap.
 
+### Vue — same three modes
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { MorphIcon, type MorphHandle } from "morphicons/vue";
+import { Menu, X, Check } from "lucide"; // data, not components
+
+const open = ref(false);
+const morph = ref<MorphHandle | null>(null);
+// morph.value?.morphTo(Check)  → animates
+// morph.value?.set(X)          → jumps without animating
+</script>
+
+<template>
+  <!-- 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): template ref → morphTo / set -->
+  <MorphIcon ref="morph" :icon="Menu" />
+</template>
+```
+
+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.
+
 ### Vanilla (no React)
 
 ```ts
@@ -103,7 +131,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 binding defaults 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 and Vue 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).
@@ -114,7 +142,7 @@ This also covers the [shadcn registry](https://www.shadcn.io/icons), which re-pu
 
 ```
 ┌─────────────────────────────────────────────┐
-│  bindings   react                           │  thin: ref + createMorph
+│  bindings   react · vue                     │  thin: ref + createMorph
 ├─────────────────────────────────────────────┤
 │  drivers    dom (setAttribute + rAF)        │  singleton scheduler
 ├─────────────────────────────────────────────┤
@@ -125,7 +153,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`), ESM only, `sideEffects: false`.
+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 plan is the central artifact:
 
@@ -208,7 +236,7 @@ Let `aᶜᵢ = aᵢ − c_A` and `b̃ᵢ = R(−θ*)·(bᵢ − c_B)/σ*` (B bro
 ```
 P(t) = c(t) + σ*ᵗ · R(t·θ*) · [(1−t)·aᶜᵢ + t·b̃ᵢ]
 
-  c(t)  = lerp(c_A, c_B, t)        linear translation
+  c(t)  = lerp(c_A, c_B, t)        linear translation (block transport under the global hybrid — below)
   t·θ*  = linear angle             (θ* is already in (−π, π], short path)
   σ*ᵗ   = exp(t·ln σ*)             log-linear scale (geodesic in ℝ⁺)
 ```
@@ -220,6 +248,14 @@ Exact at both endpoints (max error ~3.6e-15 in tests). Properties:
 - Mixed cases do both simultaneously and continuously.
 - With spring overshoot (t > 1) the formula **extrapolates** naturally: rotation and scale overshoot slightly and come back — free juice.
 
+**Block transport (global hybrid).** When the whole icon is congruent (§4), lerping each subpath centroid reintroduces the chord disease one level up: every part spins with the shared θ*, but an off-center part travels the chord — inside the arc — and drifts toward the center mid-flight. An arrow's head sagged ~1 px toward its shaft at t = 0.5 (`r·(1 − cos(θ/2))` with r = 3.5, θ = 90°) while both parts rotated perfectly. Under the hybrid, each centroid rides the shared similarity around the global centroid `g_A` instead:
+
+```
+c_k(t) = c_{A,k} + t·d_k + (σ*ᵗ·R(t·θ*) − I)·(c_{A,k} − g_A)
+```
+
+`d_k` is fixed once so that `c_k(1) = c_{B,k}` exactly (it absorbs the tiny global residual). Every point of every subpath then moves under ONE similarity per frame: congruent icons are rigid through the whole flight, not only at the endpoints. With θ* = 0, or centroids sitting on `g_A`, or no hybrid at all, the formula degrades continuously to the plain lerp — no thresholds, no special cases.
+
 ### 6. Serialization and canonical snap
 
 In flight, each subpath is emitted as `M x y L x y …` (+ `Z` if the pair is closed↔closed; closed→open flies open, the loop opening at the cut chosen by the circular correspondence) with 2 decimals — invisible at 24px, and the frame's only allocation. On settle, the driver **snaps to the canonical `d`** of the target icon: exact fidelity at rest (real curves, not polylines), subpath count reset after duplications, and the DOM ends up identical to a static icon's. The jump is < 0.02px — imperceptible.
@@ -255,9 +291,10 @@ CI budget (size-limit, gzip) as an anti-regression tripwire — gates carry ~10%
 
 | entry | measured | gate |
 |---|---|---|
-| `morphicons` (core) | 6.45 KB | 7 KB |
-| `morphicons/dom` (core + driver) | 6.92 KB | 7.5 KB |
-| `morphicons/react` (all, react external) | 7.65 KB | 8.5 KB |
+| `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 |
 
 ## Playground
 
@@ -270,15 +307,27 @@ bun run play   # → http://localhost:3000
 ## Development
 
 ```bash
-bun test          # 83 tests / ~13,400 asserts
-bun run typecheck # strict ×3: core+dom without lib DOM, playground, react
+bun test          # 92 tests / ~13,500 asserts
+bun run typecheck # strict ×4: core+dom without lib DOM, playground, react, vue
 bun run format    # biome
-bun run build     # tsdown → dist/ (entries index, dom, react)
+bun run build     # tsdown → dist/ (entries index, dom, react, vue)
 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/dom.js

@@ -1,4 +1,4 @@
-import { a as buildPlan, c as cubicsToPathD, f as interpPolar, l as serialize, n as Spring, r as resampleIcon, s as iconToCubics, t as SPRING_PRESETS, u as allocOutputs } from "./spring-BR0BCAfU.js";
+import { a as buildPlan, c as cubicsToPathD, f as interpPolar, l as serialize, n as Spring, r as resampleIcon, s as iconToCubics, t as SPRING_PRESETS, u as allocOutputs } from "./spring-BTcHiHR5.js";
 //#region src/dom/index.ts
 const tickers = /* @__PURE__ */ new Set();
 let rafId = 0;

package/dist/index.d.ts

@@ -18,6 +18,13 @@ interface PlanItem {
   /** true if both endpoints are closed loops: the subpath flies with Z.
    *  Closed → open flies open: the loop opens at the chosen cut. */
   closed: boolean;
+  /** Block transport (set by the global hybrid, else null): mid-flight the
+   *  centroid rides the shared similarity around the global centroid instead
+   *  of lerping — off = c_A − g_A; drift closes c(1) = c_B exactly. */
+  block: {
+    off: readonly [number, number];
+    drift: readonly [number, number];
+  } | null;
 }
 interface MorphPlan {
   items: PlanItem[];

package/dist/index.js

@@ -1,2 +1,2 @@
-import { a as buildPlan, c as cubicsToPathD, d as interpLinear, f as interpPolar, i as resamplePath, l as serialize, n as Spring, o as fitIcon, r as resampleIcon, s as iconToCubics, t as SPRING_PRESETS, u as allocOutputs } from "./spring-BR0BCAfU.js";
+import { a as buildPlan, c as cubicsToPathD, d as interpLinear, f as interpPolar, i as resamplePath, l as serialize, n as Spring, o as fitIcon, r as resampleIcon, s as iconToCubics, t as SPRING_PRESETS, u as allocOutputs } from "./spring-BTcHiHR5.js";
 export { SPRING_PRESETS, Spring, allocOutputs, buildPlan, cubicsToPathD, fitIcon, iconToCubics, interpLinear, interpPolar, resampleIcon, resamplePath, serialize };

package/dist/react.js

@@ -1,4 +1,4 @@
-import { a as buildPlan, f as interpPolar, l as serialize, r as resampleIcon, u as allocOutputs } from "./spring-BR0BCAfU.js";
+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 { jsx, jsxs } from "react/jsx-runtime";

package/dist/{spring-BR0BCAfU.js → spring-BTcHiHR5.js}

@@ -8,12 +8,21 @@ function interpPolar(plan, t, out) {
 		const it = plan.items[k];
 		const o = out[k];
 		const n = plan.n;
-		const cx = it.ca[0] + (it.cb[0] - it.ca[0]) * t;
-		const cy = it.ca[1] + (it.cb[1] - it.ca[1]) * t;
 		const s = Math.exp(it.lnSigma * t);
 		const ang = it.theta * t;
 		const cos = Math.cos(ang) * s;
 		const sin = Math.sin(ang) * s;
+		let cx;
+		let cy;
+		if (it.block) {
+			const [ox, oy] = it.block.off;
+			const [dx, dy] = it.block.drift;
+			cx = it.ca[0] + dx * t + (ox * cos - oy * sin - ox);
+			cy = it.ca[1] + dy * t + (ox * sin + oy * cos - oy);
+		} else {
+			cx = it.ca[0] + (it.cb[0] - it.ca[0]) * t;
+			cy = it.ca[1] + (it.cb[1] - it.ca[1]) * t;
+		}
 		for (let i = 0; i < n; i++) {
 			const px = it.aC[2 * i] + (it.bT[2 * i] - it.aC[2 * i]) * t;
 			const py = it.aC[2 * i + 1] + (it.bT[2 * i + 1] - it.aC[2 * i + 1]) * t;
@@ -806,7 +815,8 @@ function applyGlobal(items, n) {
 		ga.set(it.a, 2 * n * k);
 		gb.set(it.bO, 2 * n * k);
 	});
-	const g = procrustes(ga, gb, centroid(ga), centroid(gb));
+	const gca = centroid(ga);
+	const g = procrustes(ga, gb, gca, centroid(gb));
 	if (g.res >= GLOBAL_EPS) return;
 	const cos = Math.cos(-g.theta);
 	const sin = Math.sin(-g.theta);
@@ -828,6 +838,17 @@ function applyGlobal(items, n) {
 		it.theta = g.theta;
 		it.lnSigma = Math.log(g.sigma);
 		it.res = nb > 1e-12 ? Math.sqrt(e2 / nb) : 0;
+		const s1 = Math.exp(it.lnSigma);
+		const c1 = Math.cos(it.theta) * s1;
+		const n1 = Math.sin(it.theta) * s1;
+		const ox = it.ca[0] - gca[0];
+		const oy = it.ca[1] - gca[1];
+		const rx = ox * c1 - oy * n1 - ox;
+		const ry = ox * n1 + oy * c1 - oy;
+		it.block = {
+			off: [ox, oy],
+			drift: [it.cb[0] - it.ca[0] - rx, it.cb[1] - it.ca[1] - ry]
+		};
 	}
 }
 /** Builds the morph plan between two lists of sampled subpaths. The plan is
@@ -879,7 +900,8 @@ function buildPlan(srcSubs, dstSubs) {
 			theta: al.theta,
 			lnSigma: Math.log(al.sigma),
 			res: al.res,
-			closed: srcSubs[si].closed && dstSubs[di].closed
+			closed: srcSubs[si].closed && dstSubs[di].closed,
+			block: null
 		};
 	});
 	if (items.length > 1) applyGlobal(items, n);

package/dist/vue.d.ts

@@ -0,0 +1,121 @@
+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 { PropType } from "vue";
+//#region src/vue/index.d.ts
+/** Imperative surface exposed on the component instance (template ref). */
+interface MorphHandle {
+  morphTo(icon: IconInput, spring?: SpringPreset | MorphOptions): void;
+  set(icon: IconInput): void;
+}
+declare const MorphIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** Uncontrolled mode: the current icon; changing the prop animates. */
+  icon: {
+    type: PropType<IconInput>;
+    default: undefined;
+  };
+  /** Controlled mode: source endpoint of the pair. */
+  from: {
+    type: PropType<IconInput>;
+    default: undefined;
+  };
+  /** Controlled mode: target endpoint of the pair. */
+  to: {
+    type: PropType<IconInput>;
+    default: undefined;
+  };
+  /** Controlled mode: 0..1 progress of the frozen morph (no spring). */
+  progress: {
+    type: NumberConstructor;
+    default: undefined;
+  };
+  /** Physics for uncontrolled/imperative mode: preset or custom spring. */
+  spring: {
+    type: PropType<SpringPreset | MorphOptions>;
+    default: undefined;
+  };
+  size: {
+    type: (NumberConstructor | StringConstructor)[];
+    default: number;
+  };
+  color: {
+    type: StringConstructor;
+    default: string;
+  };
+  strokeWidth: {
+    type: (NumberConstructor | StringConstructor)[];
+    default: number;
+  };
+  /** Like lucide: stroke width does not scale with `size`. */
+  absoluteStrokeWidth: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  /** Accessibility: with label → role="img" + <title>; without → aria-hidden. */
+  label: {
+    type: StringConstructor;
+    default: undefined;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** Uncontrolled mode: the current icon; changing the prop animates. */
+  icon: {
+    type: PropType<IconInput>;
+    default: undefined;
+  };
+  /** Controlled mode: source endpoint of the pair. */
+  from: {
+    type: PropType<IconInput>;
+    default: undefined;
+  };
+  /** Controlled mode: target endpoint of the pair. */
+  to: {
+    type: PropType<IconInput>;
+    default: undefined;
+  };
+  /** Controlled mode: 0..1 progress of the frozen morph (no spring). */
+  progress: {
+    type: NumberConstructor;
+    default: undefined;
+  };
+  /** Physics for uncontrolled/imperative mode: preset or custom spring. */
+  spring: {
+    type: PropType<SpringPreset | MorphOptions>;
+    default: undefined;
+  };
+  size: {
+    type: (NumberConstructor | StringConstructor)[];
+    default: number;
+  };
+  color: {
+    type: StringConstructor;
+    default: string;
+  };
+  strokeWidth: {
+    type: (NumberConstructor | StringConstructor)[];
+    default: number;
+  };
+  /** Like lucide: stroke width does not scale with `size`. */
+  absoluteStrokeWidth: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  /** Accessibility: with label → role="img" + <title>; without → aria-hidden. */
+  label: {
+    type: StringConstructor;
+    default: undefined;
+  };
+}>> & Readonly<{}>, {
+  icon: IconInput;
+  from: IconInput;
+  to: IconInput;
+  progress: number;
+  spring: "bouncy" | "smooth" | "snappy" | MorphOptions;
+  size: string | number;
+  color: string;
+  strokeWidth: string | number;
+  absoluteStrokeWidth: boolean;
+  label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { type IconInput, type IconNode, type Morph, MorphHandle, MorphIcon, type MorphOptions, type PathEl, type Sampled, type SpringPreset };

package/dist/vue.js

@@ -0,0 +1,158 @@
+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 { defineComponent, h, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+//#region src/vue/index.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));
+}
+const MorphIcon = defineComponent({
+	name: "MorphIcon",
+	props: {
+		/** Uncontrolled mode: the current icon; changing the prop animates. */
+		icon: {
+			type: [String, Array],
+			default: void 0
+		},
+		/** Controlled mode: source endpoint of the pair. */
+		from: {
+			type: [String, Array],
+			default: void 0
+		},
+		/** Controlled mode: target endpoint of the pair. */
+		to: {
+			type: [String, Array],
+			default: void 0
+		},
+		/** Controlled mode: 0..1 progress of the frozen morph (no spring). */
+		progress: {
+			type: Number,
+			default: void 0
+		},
+		/** Physics for uncontrolled/imperative mode: preset or custom spring. */
+		spring: {
+			type: [String, Object],
+			default: void 0
+		},
+		size: {
+			type: [Number, String],
+			default: 24
+		},
+		color: {
+			type: String,
+			default: "currentColor"
+		},
+		strokeWidth: {
+			type: [Number, String],
+			default: 2
+		},
+		/** Like lucide: stroke width does not scale with `size`. */
+		absoluteStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		/** Accessibility: with label → role="img" + <title>; without → aria-hidden. */
+		label: {
+			type: String,
+			default: void 0
+		}
+	},
+	setup(props, { expose }) {
+		const initialD = (() => {
+			const { icon, from, to, progress } = props;
+			if (from !== void 0 && to !== void 0) return frozenD(from, to, progress ?? 0);
+			const first = icon ?? from ?? to;
+			return first !== void 0 ? canonicalD(first) : "";
+		})();
+		const pathEl = shallowRef(null);
+		let morph = null;
+		let based = false;
+		let pair = null;
+		onMounted(() => {
+			const el = pathEl.value;
+			const { icon, from, to, progress } = props;
+			const controlled = from !== void 0 && to !== void 0;
+			const initialIcon = icon ?? from ?? to;
+			if (!el || 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;
+				}
+			}
+		});
+		onBeforeUnmount(() => {
+			morph?.destroy();
+			morph = null;
+			based = false;
+			pair = null;
+		});
+		watch(() => props.icon, (icon) => {
+			if (icon !== void 0) morph?.morphTo(icon, props.spring);
+		});
+		watch(() => [
+			props.from,
+			props.to,
+			props.progress
+		], () => {
+			const m = morph;
+			const { from, to, progress } = props;
+			if (!m || from === void 0 || to === void 0) 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);
+			}
+		});
+		expose({
+			morphTo: (i, s) => morph?.morphTo(i, s ?? props.spring),
+			set: (i) => morph?.set(i)
+		});
+		return () => {
+			const sw = props.absoluteStrokeWidth ? Number(props.strokeWidth) * 24 / Number(props.size) : props.strokeWidth;
+			return h("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: props.size,
+				height: props.size,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: props.color,
+				"stroke-width": sw,
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round",
+				role: props.label ? "img" : void 0,
+				"aria-hidden": props.label ? void 0 : "true"
+			}, [props.label ? h("title", props.label) : null, h("path", {
+				ref: pathEl,
+				d: initialD
+			})]);
+		};
+	}
+});
+//#endregion
+export { MorphIcon };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morphicons",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Universal morphing for stroke-based icons with spring physics — zero runtime dependencies",
   "license": "MIT",
   "author": "Guillermo (https://guillermolg.com)",
@@ -29,6 +29,8 @@
     "shadcn",
     "feather",
     "react",
+    "vue",
+    "lucide-vue-next",
     "icon-animation"
   ],
   "type": "module",
@@ -48,14 +50,22 @@
     "./react": {
       "types": "./dist/react.d.ts",
       "default": "./dist/react.js"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "default": "./dist/vue.js"
     }
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "vue": ">=3.3"
   },
   "peerDependenciesMeta": {
     "react": {
       "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "files": [
@@ -63,7 +73,7 @@
   ],
   "scripts": {
     "test": "bun test",
-    "typecheck": "tsc --noEmit && tsc -p playground --noEmit && tsc -p tsconfig.react.json --noEmit",
+    "typecheck": "tsc --noEmit && tsc -p playground --noEmit && tsc -p tsconfig.react.json --noEmit && tsc -p tsconfig.vue.json --noEmit",
     "play": "bun ./playground/index.html",
     "lint": "biome check .",
     "format": "biome check --write .",
@@ -95,6 +105,16 @@
       ],
       "limit": "8.5 KB",
       "gzip": true
+    },
+    {
+      "name": "core + dom + vue (MorphIcon, vue external)",
+      "path": "dist/vue.js",
+      "import": "*",
+      "ignore": [
+        "vue"
+      ],
+      "limit": "8.5 KB",
+      "gzip": true
     }
   ],
   "devDependencies": {
@@ -110,6 +130,7 @@
     "react-dom": "^19.2.8",
     "size-limit": "^13.0.3",
     "tsdown": "^0.22.14",
-    "typescript": "^7.0.2"
+    "typescript": "^7.0.2",
+    "vue": "^3.5.40"
   }
 }