svg-dynamic-icon 1.0.0

package/README.md

@@ -0,0 +1,59 @@
+# svg-dynamic-icon
+
+A lightweight React component for rendering **custom-made SVG icons** with **TailwindCSS** support.  
+Perfect for projects with a custom icon set, and you want dynamic usage without hardcoding imports.
+
+## 📦 Installation
+
+```bash
+npm install svg-dynamic-icon
+```
+
+## 🚀 Usage
+
+```bash
+import { DynamicIcon } from "svg-dynamic-icon";
+
+function Example() {
+  return (
+    <DynamicIcon
+      iconName="Checkmark"          // refers to: assets/icons/Checkmark.svg
+      size=32                       // icon will be 32px by 32px
+      color="text-blue-500"         // tailwind class for icon color
+    />
+  );
+}
+```
+
+## 📁 Icon Setup
+
+- Place your SVG icons in the /assets/icons/ folder.
+- File names must match the iconName prop exactly (MyIcon.svg → iconName="MyIcon").
+- Upload square-shaped icons for best rendering (e.g., 24x24 or 64x64).
+
+## ⚙️ Props
+
+**Prop** | **Type** | **Required** | **Description**
+iconName | string | ✅ | Name of the SVG icon file (without .svg) located in /assets/icons/
+size | number | ❌ | Icon size in pixels (width & height). Default: 25
+color | string | ❌ | TailwindCSS text color class (e.g., text-white, text-gray-500)
+
+## 💡 Example Folder Structure
+
+project-root/
+├── assets/
+│....└── icons/
+│.........├── Checkmark.svg
+│.........└── Close.svg
+├── App.tsx
+└── ...
+
+## 🧩 Built With
+
+- React
+- react-svg
+- tailwind-merge
+
+📝 License
+
+MIT

package/assets/icons/Fallback.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 2L12.5 12.5M12.5 12.5L23 23M12.5 12.5L2 23M12.5 12.5L23 2" stroke="#121212" stroke-width="2"/>
+</svg>

package/build.js

@@ -0,0 +1,18 @@
+// build.js
+const esbuild = require("esbuild");
+
+esbuild
+  .build({
+    entryPoints: ["index.ts"],
+    bundle: true,
+    minify: false,
+    sourcemap: true,
+    outfile: "dist/index.js",
+    platform: "node",
+    external: ["react", "react-dom", "react-svg", "tailwind-merge"],
+    loader: {
+      ".svg": "file",
+    },
+    assetNames: "assets/[name]-[hash]",
+  })
+  .catch(() => process.exit(1));

package/dist/assets/Fallback-R62GNTAJ.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 2L12.5 12.5M12.5 12.5L23 23M12.5 12.5L2 23M12.5 12.5L23 2" stroke="#121212" stroke-width="2"/>
+</svg>

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,101 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __glob = (map) => (path) => {
+  var fn = map[path];
+  if (fn) return fn();
+  throw new Error("Module not found in bundle: " + path);
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// assets/icons/Fallback.svg
+var require_Fallback = __commonJS({
+  "assets/icons/Fallback.svg"(exports2, module2) {
+    module2.exports = "./assets/Fallback-R62GNTAJ.svg";
+  }
+});
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  DynamicIcon: () => DynamicIcon_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/DynamicIcon.tsx
+var import_react = require("react");
+var import_react_svg = require("react-svg");
+var import_jsx_runtime = require("react/jsx-runtime");
+
+// import("../assets/icons/**/*.svg") in src/DynamicIcon.tsx
+var globImport_assets_icons_svg = __glob({
+  "../assets/icons/Fallback.svg": () => Promise.resolve().then(() => __toESM(require_Fallback()))
+});
+
+// src/DynamicIcon.tsx
+var DynamicIcon = ({
+  iconName = "Fallback",
+  size = "25",
+  color = "black"
+}) => {
+  const [iconUrl, setIconUrl] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    const importIcon = async () => {
+      try {
+        const icon = await globImport_assets_icons_svg(`../assets/icons/${iconName}.svg`);
+        setIconUrl(icon.default);
+      } catch (error) {
+        console.error(`Icon ${iconName} not found`);
+        setIconUrl(null);
+      }
+    };
+    importIcon();
+  }, [iconName]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_svg.ReactSVG,
+    {
+      src: iconUrl || "",
+      className: color,
+      beforeInjection: (svg) => {
+        svg.setAttribute("style", `width: ${size}px; height: ${size}px;`);
+        svg.setAttribute("fill", "currentColor");
+        svg.querySelectorAll("path").forEach((path) => {
+          path.setAttribute("fill", "currentColor");
+        });
+      }
+    }
+  );
+};
+var DynamicIcon_default = DynamicIcon;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DynamicIcon
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../index.ts", "../src/DynamicIcon.tsx"],
+  "sourcesContent": ["export { default as DynamicIcon } from \"./src/DynamicIcon\";\r\n", "import React, { useEffect, useState } from \"react\";\r\nimport { ReactSVG } from \"react-svg\";\r\n\r\ninterface DynamicIconProps {\r\n  iconName: string;\r\n  size?: number;\r\n  color?: string;\r\n}\r\n\r\nconst DynamicIcon: React.FC<DynamicIconProps> = ({\r\n  iconName = \"Fallback\",\r\n  size = \"25\",\r\n  color = \"black\",\r\n}) => {\r\n  const [iconUrl, setIconUrl] = useState<string | null>(null);\r\n\r\n  useEffect(() => {\r\n    const importIcon = async () => {\r\n      try {\r\n        const icon = await import(`../assets/icons/${iconName}.svg`);\r\n        setIconUrl(icon.default);\r\n      } catch (error) {\r\n        console.error(`Icon ${iconName} not found`);\r\n        setIconUrl(null);\r\n      }\r\n    };\r\n\r\n    importIcon();\r\n  }, [iconName]);\r\n\r\n  return (\r\n    <ReactSVG\r\n      src={iconUrl || \"\"}\r\n      className={color}\r\n      beforeInjection={(svg) => {\r\n        svg.setAttribute(\"style\", `width: ${size}px; height: ${size}px;`);\r\n        svg.setAttribute(\"fill\", \"currentColor\");\r\n        svg.querySelectorAll(\"path\").forEach((path) => {\r\n          path.setAttribute(\"fill\", \"currentColor\");\r\n        });\r\n      }}\r\n    />\r\n  );\r\n};\r\n\r\nexport default DynamicIcon;\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA2C;AAC3C,uBAAyB;AA8BrB;;;;;;;;AAtBJ,IAAM,cAA0C,CAAC;AAAA,EAC/C,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AACJ,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAwB,IAAI;AAE1D,8BAAU,MAAM;AACd,UAAM,aAAa,YAAY;AAC7B,UAAI;AACF,cAAM,OAAO,MAAa,+CAAmB,QAAQ;AACrD,mBAAW,KAAK,OAAO;AAAA,MACzB,SAAS,OAAO;AACd,gBAAQ,MAAM,QAAQ,QAAQ,YAAY;AAC1C,mBAAW,IAAI;AAAA,MACjB;AAAA,IACF;AAEA,eAAW;AAAA,EACb,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,WAAW;AAAA,MAChB,WAAW;AAAA,MACX,iBAAiB,CAAC,QAAQ;AACxB,YAAI,aAAa,SAAS,UAAU,IAAI,eAAe,IAAI,KAAK;AAChE,YAAI,aAAa,QAAQ,cAAc;AACvC,YAAI,iBAAiB,MAAM,EAAE,QAAQ,CAAC,SAAS;AAC7C,eAAK,aAAa,QAAQ,cAAc;AAAA,QAC1C,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,sBAAQ;",
+  "names": []
+}

package/dist/src/DynamicIcon.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface DynamicIconProps {
+    iconName: string;
+    size?: number;
+    color?: string;
+}
+declare const DynamicIcon: React.FC<DynamicIconProps>;
+export default DynamicIcon;

package/dist/src/DynamicIcon.js

@@ -0,0 +1,36 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ReactSVG } from "react-svg";
+const DynamicIcon = ({ iconName = "Fallback", size = "25", color = "black", }) => {
+    const [iconUrl, setIconUrl] = useState(null);
+    useEffect(() => {
+        const importIcon = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const icon = yield import(`../assets/icons/${iconName}.svg`);
+                setIconUrl(icon.default);
+            }
+            catch (error) {
+                console.error(`Icon ${iconName} not found`);
+                setIconUrl(null);
+            }
+        });
+        importIcon();
+    }, [iconName]);
+    return (_jsx(ReactSVG, { src: iconUrl || "", className: color, beforeInjection: (svg) => {
+            svg.setAttribute("style", `width: ${size}px; height: ${size}px;`);
+            svg.setAttribute("fill", "currentColor");
+            svg.querySelectorAll("path").forEach((path) => {
+                path.setAttribute("fill", "currentColor");
+            });
+        } }));
+};
+export default DynamicIcon;

package/index.ts

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

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "svg-dynamic-icon",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build": "node build.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@types/node": "^22.14.1",
+    "@types/react": "^19.1.2",
+    "esbuild": "^0.25.2",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-svg": "^15.1.21"
+  }
+}

package/src/DynamicIcon.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from "react";
+import { ReactSVG } from "react-svg";
+
+interface DynamicIconProps {
+  iconName: string;
+  size?: number;
+  color?: string;
+}
+
+const DynamicIcon: React.FC<DynamicIconProps> = ({
+  iconName = "Fallback",
+  size = "25",
+  color = "black",
+}) => {
+  const [iconUrl, setIconUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const importIcon = async () => {
+      try {
+        const icon = await import(`../assets/icons/${iconName}.svg`);
+        setIconUrl(icon.default);
+      } catch (error) {
+        console.error(`Icon ${iconName} not found`);
+        setIconUrl(null);
+      }
+    };
+
+    importIcon();
+  }, [iconName]);
+
+  return (
+    <ReactSVG
+      src={iconUrl || ""}
+      className={color}
+      beforeInjection={(svg) => {
+        svg.setAttribute("style", `width: ${size}px; height: ${size}px;`);
+        svg.setAttribute("fill", "currentColor");
+        svg.querySelectorAll("path").forEach((path) => {
+          path.setAttribute("fill", "currentColor");
+        });
+      }}
+    />
+  );
+};
+
+export default DynamicIcon;

package/src/types/svg.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src", "index.ts", "src/types"]
+}