artode-icons 0.1.3 → 0.1.4

package/dist/index.js

@@ -142,7 +142,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var InteractiveArtodeIcon = ({
   path,
   size = 32,
-  color = "#D80018",
+  color = "currentColor",
   className,
   forceHover = false,
   globalMouse = false,
@@ -152,9 +152,20 @@ var InteractiveArtodeIcon = ({
   var _a, _b;
   const canvasRef = (0, import_react.useRef)(null);
   const [internalHover, setInternalHover] = (0, import_react.useState)(false);
+  const [resolvedColor, setResolvedColor] = (0, import_react.useState)(color === "currentColor" ? "#D80018" : color);
   const isHovered = forceHover || internalHover || globalMouse;
   const width = (_a = customCanvasSize == null ? void 0 : customCanvasSize.width) != null ? _a : size;
   const height = (_b = customCanvasSize == null ? void 0 : customCanvasSize.height) != null ? _b : size;
+  (0, import_react.useEffect)(() => {
+    if (color !== "currentColor") {
+      setResolvedColor(color);
+      return;
+    }
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const computedColor = window.getComputedStyle(canvas).color;
+    setResolvedColor(computedColor || "#D80018");
+  }, [color, className]);
   const isHoveredRef = (0, import_react.useRef)(isHovered);
   (0, import_react.useEffect)(() => {
     isHoveredRef.current = isHovered;
@@ -237,7 +248,7 @@ var InteractiveArtodeIcon = ({
     let animId;
     const render = () => {
       ctx.clearRect(0, 0, width, height);
-      ctx.fillStyle = color;
+      ctx.fillStyle = resolvedColor;
       if (isHoveredRef.current) {
         particles.forEach((p) => {
           const tx = mouseRef.current.x + p.swarmOffset.x;
@@ -266,7 +277,7 @@ var InteractiveArtodeIcon = ({
     return () => {
       if (animId) cancelAnimationFrame(animId);
     };
-  }, [path, size, color, width, height]);
+  }, [path, size, resolvedColor, width, height]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "canvas",
     {
@@ -285,7 +296,7 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var ArtodeIcon = ({
   path: pathString,
   size = 32,
-  color = "#D80018",
+  color = "currentColor",
   className,
   forceHover = false,
   drawType = "fill",
@@ -294,13 +305,27 @@ var ArtodeIcon = ({
   customCanvasSize,
   viewBoxSize = 24
 }) => {
+  const canvasRef = (0, import_react2.useRef)(null);
+  const [internalHover, setInternalHover] = import_react2.default.useState(false);
+  const [resolvedColor, setResolvedColor] = import_react2.default.useState(color === "currentColor" ? "#D80018" : color);
+  const isHovered = forceHover || internalHover;
+  (0, import_react2.useEffect)(() => {
+    if (color !== "currentColor") {
+      setResolvedColor(color);
+      return;
+    }
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const computedColor = window.getComputedStyle(canvas).color;
+    setResolvedColor(computedColor || "#D80018");
+  }, [color, className]);
   if (interactive) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       InteractiveArtodeIcon,
       {
         path: pathString,
         size,
-        color,
+        color: resolvedColor,
         className,
         forceHover,
         globalMouse,
@@ -309,9 +334,6 @@ var ArtodeIcon = ({
       }
     );
   }
-  const canvasRef = (0, import_react2.useRef)(null);
-  const [internalHover, setInternalHover] = import_react2.default.useState(false);
-  const isHovered = forceHover || internalHover;
   (0, import_react2.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -356,7 +378,7 @@ var ArtodeIcon = ({
         time = 1;
       }
       ctx.clearRect(0, 0, size, size);
-      ctx.fillStyle = color;
+      ctx.fillStyle = resolvedColor;
       for (let y = 0; y < size; y++) {
         for (let x = 0; x < size; x++) {
           const index = (y * size + x) * 4;
@@ -390,7 +412,7 @@ var ArtodeIcon = ({
     return () => {
       if (animId) cancelAnimationFrame(animId);
     };
-  }, [pathString, size, color, isHovered, drawType, viewBoxSize]);
+  }, [pathString, size, resolvedColor, isHovered, drawType, viewBoxSize]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "canvas",
     {