dynamic-icons 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Carlos Torres Moral
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# dynamic-icons
+
+A React component that morphs an SVG icon smoothly between named states, built on top of [`morphicons`](https://www.morphicons.com).
+
+Not limited to two states — an icon can define as many named states as it needs (`"off" | "on"`, or `"idle" | "loading" | "success" | "error"`, etc.).
+
+## Install
+
+```bash
+pnpm add dynamic-icons morphicons react
+```
+
+`morphicons` and `react` are peer dependencies — you need them installed alongside this package.
+
+## Usage
+
+```tsx
+import { DynamicIcon, folderSearchIcon } from "dynamic-icons";
+
+function NavIcon({ active }: { active: boolean }) {
+  return (
+    <DynamicIcon
+      icon={folderSearchIcon}
+      state={active ? "on" : "off"}
+      className="size-5"
+      aria-hidden="true"
+    />
+  );
+}
+```
+
+## Icons included
+
+- `folderSearchIcon` — `"off" | "on"`
+- `clipboardListIcon` — `"off" | "on"`
+- `settingsIcon` — `"off" | "on"`
+
+## Defining your own icon
+
+```ts
+import type { DynamicIconStates } from "dynamic-icons";
+
+export const myIcon: DynamicIconStates<"idle" | "loading" | "done"> = {
+  idle: [/* morphicons IconInput */],
+  loading: [/* ... */],
+  done: [/* ... */],
+};
+```
+
+Any prop `MorphIcon` (from `morphicons/react`) accepts — `className`, `size`, `color`, `strokeWidth`, `label`, `spring`, `reducedMotion`, standard SVG attributes — is forwarded through `DynamicIcon`.

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { MorphIcon } from "morphicons/react";
+import { IconInput } from "morphicons";
+//#region src/types.d.ts
+type DynamicIconStates<State extends string = string> = Record<State, IconInput>;
+//#endregion
+//#region src/DynamicIcon.d.ts
+type Props<State extends string> = Omit<React.ComponentProps<typeof MorphIcon>, "icon" | "from" | "to"> & {
+  icon: DynamicIconStates<State>;
+  state: State;
+};
+export declare function DynamicIcon<State extends string>({ icon, state, ...props }: Props<State>): React.ReactElement;
+//#endregion
+//#region src/icons/folder-search.d.ts
+export declare const folderSearchIcon: DynamicIconStates<"off" | "on">;
+//#endregion
+//#region src/icons/clipboard-list.d.ts
+export declare const clipboardListIcon: DynamicIconStates<"off" | "on">;
+//#endregion
+//#region src/icons/settings.d.ts
+export declare const settingsIcon: DynamicIconStates<"off" | "on">;
+//#endregion
+export type { DynamicIconStates };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,84 @@
+import "react";
+import { MorphIcon } from "morphicons/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/DynamicIcon.tsx
+function DynamicIcon({ icon, state, ...props }) {
+	return /* @__PURE__ */ jsx(MorphIcon, {
+		...props,
+		icon: icon[state]
+	});
+}
+//#endregion
+//#region src/icons/folder-search.ts
+const folderSearchIcon = {
+	off: [
+		["path", { d: "M10.7 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v4.1" }],
+		["path", { d: "m21 21-1.9-1.9" }],
+		["circle", {
+			cx: "17",
+			cy: "17",
+			r: "3"
+		}]
+	],
+	on: [
+		["path", { d: "M10.7 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v4.1" }],
+		["path", { d: "m21 21-1.9-1.9" }],
+		["circle", {
+			cx: "16",
+			cy: "16",
+			r: "4"
+		}]
+	]
+};
+//#endregion
+//#region src/icons/clipboard-list.ts
+const clipboardListIcon = {
+	off: [
+		["rect", {
+			width: "8",
+			height: "4",
+			x: "8",
+			y: "2",
+			rx: "1",
+			ry: "1"
+		}],
+		["path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }],
+		["path", { d: "M8 11h4" }],
+		["path", { d: "M8 16h4" }],
+		["path", { d: "M8 11h.01" }],
+		["path", { d: "M8 16h.01" }]
+	],
+	on: [
+		["rect", {
+			width: "8",
+			height: "4",
+			x: "8",
+			y: "2",
+			rx: "1",
+			ry: "1"
+		}],
+		["path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }],
+		["path", { d: "M12 11h4" }],
+		["path", { d: "M12 16h4" }],
+		["path", { d: "M8 11h.01" }],
+		["path", { d: "M8 16h.01" }]
+	]
+};
+//#endregion
+//#region src/icons/settings.ts
+const settingsIcon = {
+	off: [["path", { d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }], ["circle", {
+		cx: "12",
+		cy: "12",
+		r: "3"
+	}]],
+	on: [["path", { d: "M 13.915 4.0251 a 2.34 2.34 30 0 1 4.0348 2.3295 a 2.34 2.34 30 0 0 1.9168 3.3179 a 2.34 2.34 30 0 1 0.0013 4.6577 a 2.34 2.34 30 0 0 -1.9155 3.3177 a 2.34 2.34 30 0 1 -4.0343 2.3277 a 2.34 2.34 30 0 0 -3.8318 -0.0011 a 2.34 2.34 30 0 1 -4.0348 -2.3295 a 2.34 2.34 30 0 0 -1.9177 -3.3184 a 2.34 2.34 30 0 1 -0.0013 -4.6577 a 2.34 2.34 30 0 0 1.9155 -3.3177 A 2.34 2.34 30 0 1 10.0815 4.023 a 2.34 2.34 30 0 0 3.8318 0.0011" }], ["circle", {
+		cx: "12",
+		cy: "12",
+		r: "3"
+	}]]
+};
+//#endregion
+export { DynamicIcon, clipboardListIcon, folderSearchIcon, settingsIcon };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/DynamicIcon.tsx","../src/icons/folder-search.ts","../src/icons/clipboard-list.ts","../src/icons/settings.ts"],"sourcesContent":["import * as React from \"react\";\nimport { MorphIcon } from \"morphicons/react\";\nimport type { DynamicIconStates } from \"./types\";\n\ntype Props<State extends string> = Omit<\n  React.ComponentProps<typeof MorphIcon>,\n  \"icon\" | \"from\" | \"to\"\n> & {\n  icon: DynamicIconStates<State>;\n  state: State;\n};\n\nexport function DynamicIcon<State extends string>({\n  icon,\n  state,\n  ...props\n}: Props<State>): React.ReactElement {\n  return <MorphIcon {...props} icon={icon[state]} />;\n}\n","import type { DynamicIconStates } from \"../types\";\n\nexport const folderSearchIcon: DynamicIconStates<\"off\" | \"on\"> = {\n  off: [\n    [\n      \"path\",\n      {\n        d: \"M10.7 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v4.1\",\n      },\n    ],\n    [\"path\", { d: \"m21 21-1.9-1.9\" }],\n    [\"circle\", { cx: \"17\", cy: \"17\", r: \"3\" }],\n  ],\n  on: [\n    [\n      \"path\",\n      {\n        d: \"M10.7 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v4.1\",\n      },\n    ],\n    [\"path\", { d: \"m21 21-1.9-1.9\" }],\n    [\"circle\", { cx: \"16\", cy: \"16\", r: \"4\" }],\n  ],\n};\n","import type { DynamicIconStates } from \"../types\";\n\nexport const clipboardListIcon: DynamicIconStates<\"off\" | \"on\"> = {\n  off: [\n    [\"rect\", { width: \"8\", height: \"4\", x: \"8\", y: \"2\", rx: \"1\", ry: \"1\" }],\n    [\n      \"path\",\n      { d: \"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\" },\n    ],\n    [\"path\", { d: \"M8 11h4\" }],\n    [\"path\", { d: \"M8 16h4\" }],\n    [\"path\", { d: \"M8 11h.01\" }],\n    [\"path\", { d: \"M8 16h.01\" }],\n  ],\n  on: [\n    [\"rect\", { width: \"8\", height: \"4\", x: \"8\", y: \"2\", rx: \"1\", ry: \"1\" }],\n    [\n      \"path\",\n      { d: \"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\" },\n    ],\n    [\"path\", { d: \"M12 11h4\" }],\n    [\"path\", { d: \"M12 16h4\" }],\n    [\"path\", { d: \"M8 11h.01\" }],\n    [\"path\", { d: \"M8 16h.01\" }],\n  ],\n};\n","import type { DynamicIconStates } from \"../types\";\n\nexport const settingsIcon: DynamicIconStates<\"off\" | \"on\"> = {\n  off: [\n    [\n      \"path\",\n      {\n        d: \"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915\",\n      },\n    ],\n    [\"circle\", { cx: \"12\", cy: \"12\", r: \"3\" }],\n  ],\n  on: [\n    [\n      \"path\",\n      {\n        d: \"M 13.915 4.0251 a 2.34 2.34 30 0 1 4.0348 2.3295 a 2.34 2.34 30 0 0 1.9168 3.3179 a 2.34 2.34 30 0 1 0.0013 4.6577 a 2.34 2.34 30 0 0 -1.9155 3.3177 a 2.34 2.34 30 0 1 -4.0343 2.3277 a 2.34 2.34 30 0 0 -3.8318 -0.0011 a 2.34 2.34 30 0 1 -4.0348 -2.3295 a 2.34 2.34 30 0 0 -1.9177 -3.3184 a 2.34 2.34 30 0 1 -0.0013 -4.6577 a 2.34 2.34 30 0 0 1.9155 -3.3177 A 2.34 2.34 30 0 1 10.0815 4.023 a 2.34 2.34 30 0 0 3.8318 0.0011\",\n      },\n    ],\n    [\"circle\", { cx: \"12\", cy: \"12\", r: \"3\" }],\n  ],\n};\n"],"mappings":";;;;AAYA,SAAgB,YAAkC,EAChD,MACA,OACA,GAAG,SACgC;CACnC,OAAO,oBAAC,WAAD;EAAW,GAAI;EAAO,MAAM,KAAK;CAAS,CAAA;AACnD;;;AChBA,MAAa,mBAAoD;CAC/D,KAAK;EACH,CACE,QACA,EACE,GAAG,8GACL,CACF;EACA,CAAC,QAAQ,EAAE,GAAG,iBAAiB,CAAC;EAChC,CAAC,UAAU;GAAE,IAAI;GAAM,IAAI;GAAM,GAAG;EAAI,CAAC;CAC3C;CACA,IAAI;EACF,CACE,QACA,EACE,GAAG,8GACL,CACF;EACA,CAAC,QAAQ,EAAE,GAAG,iBAAiB,CAAC;EAChC,CAAC,UAAU;GAAE,IAAI;GAAM,IAAI;GAAM,GAAG;EAAI,CAAC;CAC3C;AACF;;;ACrBA,MAAa,oBAAqD;CAChE,KAAK;EACH,CAAC,QAAQ;GAAE,OAAO;GAAK,QAAQ;GAAK,GAAG;GAAK,GAAG;GAAK,IAAI;GAAK,IAAI;EAAI,CAAC;EACtE,CACE,QACA,EAAE,GAAG,2EAA2E,CAClF;EACA,CAAC,QAAQ,EAAE,GAAG,UAAU,CAAC;EACzB,CAAC,QAAQ,EAAE,GAAG,UAAU,CAAC;EACzB,CAAC,QAAQ,EAAE,GAAG,YAAY,CAAC;EAC3B,CAAC,QAAQ,EAAE,GAAG,YAAY,CAAC;CAC7B;CACA,IAAI;EACF,CAAC,QAAQ;GAAE,OAAO;GAAK,QAAQ;GAAK,GAAG;GAAK,GAAG;GAAK,IAAI;GAAK,IAAI;EAAI,CAAC;EACtE,CACE,QACA,EAAE,GAAG,2EAA2E,CAClF;EACA,CAAC,QAAQ,EAAE,GAAG,WAAW,CAAC;EAC1B,CAAC,QAAQ,EAAE,GAAG,WAAW,CAAC;EAC1B,CAAC,QAAQ,EAAE,GAAG,YAAY,CAAC;EAC3B,CAAC,QAAQ,EAAE,GAAG,YAAY,CAAC;CAC7B;AACF;;;ACvBA,MAAa,eAAgD;CAC3D,KAAK,CACH,CACE,QACA,EACE,GAAG,0UACL,CACF,GACA,CAAC,UAAU;EAAE,IAAI;EAAM,IAAI;EAAM,GAAG;CAAI,CAAC,CAC3C;CACA,IAAI,CACF,CACE,QACA,EACE,GAAG,yaACL,CACF,GACA,CAAC,UAAU;EAAE,IAAI;EAAM,IAAI;EAAM,GAAG;CAAI,CAAC,CAC3C;AACF"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "dynamic-icons",
+  "version": "0.1.0",
+  "description": "A React component that morphs an SVG icon between named states, built on morphicons.",
+  "license": "MIT",
+  "author": "Carlos Torres Moral",
+  "repository": { "type": "git", "url": "git+https://github.com/carlostxrres/dynamic-icons.git" },
+  "bugs": "https://github.com/carlostxrres/dynamic-icons/issues",
+  "homepage": "https://github.com/carlostxrres/dynamic-icons#readme",
+  "keywords": ["react", "icons", "svg", "morph", "morphicons", "animated-icons"],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": { "types": "./dist/index.d.ts", "default": "./dist/index.js" },
+    "./package.json": "./package.json"
+  },
+  "files": ["dist"],
+  "engines": { "node": ">=20.19" },
+  "publishConfig": { "access": "public" },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc",
+    "prepublishOnly": "npm run typecheck && npm run build"
+  },
+  "peerDependencies": {
+    "morphicons": "^1.7.1",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "morphicons": "^1.7.1",
+    "react": "^19.3.0",
+    "tsdown": "^0.23.0",
+    "typescript": "^7.0.2"
+  }
+}