morphicons 1.1.1 → 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:
 
@@ -266,6 +294,7 @@ 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 |
 
 ## Playground
 
@@ -278,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/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.1",
+  "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"
   }
 }