svg-dynamic-icon 1.0.1 → 1.0.3

package/README.md

@@ -3,12 +3,16 @@
 - 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
@@ -18,19 +22,23 @@ function Example() {
   return (
     <DynamicIcon
       iconName="Checkmark"          // refers to: assets/icons/Checkmark.svg
-      size=32                       // icon will be 32px by 32px
+      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**                                                    |
@@ -39,12 +47,16 @@ function Example() {
 | size     | number   | no           | Icon size in pixels (width & height). Default: 25                  |
 | color    | string   | no           | TailwindCSS text color class (e.g., text-white, text-gray-500)     |
 
+#
+
 ## 🧩 Built With
 
 - React
 - react-svg
-- tailwind-merge
+- tailwindcss
+
+#
 
-📝 License
+## 📝 License
 
 MIT

package/dist/index.js

@@ -1,101 +1 @@
-"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
+export { default as DynamicIcon } from "./src/DynamicIcon";

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "svg-dynamic-icon",
-  "version": "1.0.1",
-  "main": "index.js",
+  "version": "1.0.3",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "node build.js"
   },