@mal-icons/react 0.1.2 → 0.2.7

package/dist/index.cjs

@@ -39,19 +39,239 @@ var __export = (target, all) => {
 // packages/react/src/index.ts
 var exports_src = {};
 __export(exports_src, {
-  setLoader: () => import_dynamic.setLoader,
-  setDefaultIconLoader: () => import_dynamic.setDefaultIconLoader,
-  preloadIcon: () => import_dynamic.preloadIcon,
-  createIcon: () => import_create_icon.createIcon,
-  clearIconCache: () => import_dynamic.clearIconCache,
-  cdnLoader: () => import_dynamic.cdnLoader,
-  animationClass: () => import_core.animationClass,
-  WEIGHT_STROKE_WIDTH: () => import_core.WEIGHT_STROKE_WIDTH,
-  SpriteIcon: () => import_sprite_icon.SpriteIcon,
-  IconContext: () => import_context.IconContext,
-  IconBase: () => import_icon_base.IconBase,
-  Icon: () => import_dynamic.Icon,
-  ICON_ANIMATIONS_CSS: () => import_core.ICON_ANIMATIONS_CSS,
-  DefaultIconContext: () => import_context.DefaultIconContext
+  setLoader: () => setLoader,
+  setDefaultIconLoader: () => setDefaultIconLoader,
+  preloadIcon: () => preloadIcon,
+  createIcon: () => createIcon,
+  clearIconCache: () => clearIconCache,
+  cdnLoader: () => cdnLoader,
+  animationClass: () => animationClass2,
+  WEIGHT_STROKE_WIDTH: () => WEIGHT_STROKE_WIDTH2,
+  SpriteIcon: () => SpriteIcon,
+  IconContext: () => IconContext,
+  IconBase: () => IconBase,
+  Icon: () => Icon,
+  ICON_ANIMATIONS_CSS: () => ICON_ANIMATIONS_CSS,
+  DefaultIconContext: () => DefaultIconContext
 });
 module.exports = __toCommonJS(exports_src);
+var import_core3 = require("@mal-icons/core");
+
+// packages/react/src/icon-base.tsx
+var import_core = require("@mal-icons/core");
+var import_react2 = require("react");
+
+// packages/react/src/context.ts
+var import_react = require("react");
+var DefaultIconContext = {};
+var IconContext = import_react.createContext(DefaultIconContext);
+
+// packages/react/src/icon-base.tsx
+var jsx_dev_runtime = require("react/jsx-dev-runtime");
+function IconBase({
+  viewBox,
+  size,
+  color,
+  secondaryColor,
+  weight,
+  animate,
+  title,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const conf = import_react2.useContext(IconContext);
+  const {
+    size: computedSize,
+    color: computedColor,
+    className: cls
+  } = import_core.resolveIconAttrs({ size, color, className }, conf);
+  const fullClassName = [cls, animate ? import_core.animationClass(animate) : undefined].filter(Boolean).join(" ") || undefined;
+  const mergedStyle = computedColor || secondaryColor || conf.style || style ? {
+    color: computedColor,
+    ...secondaryColor ? { "--mal-icons-secondary": secondaryColor } : {},
+    ...conf.style,
+    ...style
+  } : undefined;
+  const weightWidth = weight ? import_core.WEIGHT_STROKE_WIDTH[weight] : undefined;
+  const { strokeWidth: restStrokeWidth, ...restProps } = rest;
+  const strokeWidth = weightWidth ?? restStrokeWidth ?? "0";
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("svg", {
+    viewBox,
+    stroke: "currentColor",
+    fill: "currentColor",
+    width: computedSize,
+    height: computedSize,
+    className: fullClassName,
+    style: mergedStyle,
+    role: title ? "img" : "presentation",
+    "aria-hidden": title ? undefined : true,
+    ...conf.attr,
+    ...restProps,
+    strokeWidth,
+    children: [
+      title ? /* @__PURE__ */ jsx_dev_runtime.jsxDEV("title", {
+        children: title
+      }, undefined, false, undefined, this) : null,
+      children
+    ]
+  }, undefined, true, undefined, this);
+}
+// packages/react/src/create-icon.tsx
+var import_react3 = require("react");
+var jsx_dev_runtime2 = require("react/jsx-dev-runtime");
+function createIcon(viewBox, nodes, defaultAttr) {
+  const children = nodes.map(([tag, attr], i) => import_react3.createElement(tag, { key: i, ...attr }));
+  function Icon(props) {
+    return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV(IconBase, {
+      viewBox,
+      ...defaultAttr,
+      ...props,
+      children
+    }, undefined, false, undefined, this);
+  }
+  return import_react3.memo(Icon);
+}
+// packages/react/src/sprite-icon.tsx
+var import_core2 = require("@mal-icons/core");
+var import_react4 = require("react");
+var jsx_dev_runtime3 = require("react/jsx-dev-runtime");
+function SpriteIcon({
+  id,
+  href,
+  size,
+  color,
+  title,
+  className,
+  style,
+  ...rest
+}) {
+  const conf = import_react4.useContext(IconContext);
+  const {
+    size: computedSize,
+    color: computedColor,
+    className: cls
+  } = import_core2.resolveIconAttrs({ size, color, className }, conf);
+  const mergedStyle = computedColor || conf.style || style ? { color: computedColor, ...conf.style, ...style } : undefined;
+  const useHref = href ? `${href}#${id}` : `#${id}`;
+  return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("svg", {
+    width: computedSize,
+    height: computedSize,
+    className: cls,
+    style: mergedStyle,
+    role: title ? "img" : "presentation",
+    "aria-hidden": title ? undefined : true,
+    ...conf.attr,
+    ...rest,
+    children: [
+      title ? /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("title", {
+        children: title
+      }, undefined, false, undefined, this) : null,
+      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("use", {
+        href: useHref
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+// packages/react/src/dynamic.tsx
+var import_react5 = require("react");
+var jsx_dev_runtime4 = require("react/jsx-dev-runtime");
+var cache = new Map;
+var inflight = new Map;
+var defaultLoader;
+function setDefaultIconLoader(loader) {
+  defaultLoader = loader;
+}
+function preloadIcon(name, resolved) {
+  cache.set(name, resolved);
+}
+function clearIconCache() {
+  cache.clear();
+  inflight.clear();
+}
+function resolve(name, loader) {
+  const cached = cache.get(name);
+  if (cached)
+    return Promise.resolve(cached);
+  let pending = inflight.get(name);
+  if (!pending) {
+    pending = loader(name).then((r) => {
+      cache.set(name, r);
+      inflight.delete(name);
+      return r;
+    });
+    inflight.set(name, pending);
+  }
+  return pending;
+}
+function isIconData(value) {
+  return typeof value === "object" && value !== null && Array.isArray(value.nodes);
+}
+function Icon({ name, loader, fallback = null, ...rest }) {
+  const activeLoader = loader ?? defaultLoader;
+  const [resolved, setResolved] = import_react5.useState(() => cache.get(name));
+  import_react5.useEffect(() => {
+    const cached = cache.get(name);
+    if (cached) {
+      setResolved(cached);
+      return;
+    }
+    if (!activeLoader)
+      return;
+    let active = true;
+    resolve(name, activeLoader).then((r) => {
+      if (active)
+        setResolved(r);
+    }).catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, [name, activeLoader]);
+  if (!resolved)
+    return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
+      children: fallback
+    }, undefined, false, undefined, this);
+  if (!isIconData(resolved)) {
+    const Component = resolved;
+    return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(Component, {
+      ...rest
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(IconBase, {
+    viewBox: resolved.viewBox,
+    ...resolved.defaultAttr,
+    ...rest,
+    children: resolved.nodes.map(([tag, attr], i) => import_react5.createElement(tag, { key: i, ...attr }))
+  }, undefined, false, undefined, this);
+}
+function cdnLoader(baseUrl, fetchImpl = fetch) {
+  const base = baseUrl.replace(/\/+$/, "");
+  return async (name) => {
+    const res = await fetchImpl(`${base}/${name}.json`);
+    if (!res.ok)
+      throw new Error(`mal-icons: failed to load "${name}" (${res.status})`);
+    const data = await res.json();
+    if (typeof data?.viewBox !== "string" || !Array.isArray(data?.nodes)) {
+      throw new Error(`mal-icons: malformed icon payload for "${name}"`);
+    }
+    return { viewBox: data.viewBox, nodes: data.nodes, defaultAttr: data.defaultAttr };
+  };
+}
+function setLoader(importer) {
+  let modulePromise;
+  return async (name) => {
+    if (!modulePromise)
+      modulePromise = importer();
+    const mod = await modulePromise;
+    const component = mod[name];
+    if (!component)
+      throw new Error(`mal-icons: "${name}" not found in set module`);
+    return component;
+  };
+}
+
+// packages/react/src/index.ts
+var ICON_ANIMATIONS_CSS = import_core3.ICON_ANIMATIONS_CSS;
+var WEIGHT_STROKE_WIDTH2 = import_core3.WEIGHT_STROKE_WIDTH;
+var animationClass2 = import_core3.animationClass;

package/dist/index.d.ts

@@ -1,7 +1,11 @@
+import { animationClass as coreAnimationClass } from "@mal-icons/core";
 export { IconBase, type IconBaseProps } from "./icon-base.tsx";
 export { createIcon, type IconComponent } from "./create-icon.tsx";
 export { SpriteIcon, type SpriteIconProps } from "./sprite-icon.tsx";
 export { Icon, cdnLoader, setLoader, setDefaultIconLoader, preloadIcon, clearIconCache, type DynamicIconProps, type IconData, type IconLoader, type IconResolved, } from "./dynamic.tsx";
 export { IconContext, DefaultIconContext, type ReactIconContextValue, } from "./context.ts";
-export { ICON_ANIMATIONS_CSS, WEIGHT_STROKE_WIDTH, animationClass, type IconAnimation, type IconWeight, } from "@mal-icons/core";
+export type { IconAnimation, IconWeight } from "@mal-icons/core";
+export declare const ICON_ANIMATIONS_CSS = "@keyframes mal-icons-spin{to{transform:rotate(360deg)}}\n@keyframes mal-icons-pulse{0%,100%{opacity:1}50%{opacity:.4}}\n@keyframes mal-icons-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}\n@keyframes mal-icons-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-15%)}}\n@keyframes mal-icons-ping{0%{transform:scale(1);opacity:1}75%,100%{transform:scale(1.8);opacity:0}}\n@keyframes mal-icons-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-12%)}40%,80%{transform:translateX(12%)}}\n@keyframes mal-icons-wiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}\n@keyframes mal-icons-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12%)}}\n@keyframes mal-icons-heartbeat{0%,28%,70%,100%{transform:scale(1)}14%,42%{transform:scale(1.2)}}\n@keyframes mal-icons-flip{0%{transform:perspective(400px) rotateY(0)}100%{transform:perspective(400px) rotateY(360deg)}}\n@keyframes mal-icons-rotate{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}\n@keyframes mal-icons-zoom{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}\n@keyframes mal-icons-fade{0%,100%{opacity:1}50%{opacity:.1}}\n@keyframes mal-icons-slide{0%,100%{transform:translateX(0)}50%{transform:translateX(18%)}}\n@keyframes mal-icons-glow{0%,100%{filter:drop-shadow(0 0 0 currentColor)}50%{filter:drop-shadow(0 0 4px currentColor)}}\n@keyframes mal-icons-swing{0%,100%{transform:rotate(0)}20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}}\n@keyframes mal-icons-tada{0%,100%{transform:scale(1) rotate(0)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}}\n.mal-icons-animate-spin{animation:mal-icons-spin 1s linear infinite;will-change:transform}\n.mal-icons-animate-spin-reverse{animation:mal-icons-spin 1s linear infinite reverse;will-change:transform}\n.mal-icons-animate-pulse{animation:mal-icons-pulse 1.5s ease-in-out infinite}\n.mal-icons-animate-beat{animation:mal-icons-beat 1s ease-in-out infinite;will-change:transform}\n.mal-icons-animate-bounce{animation:mal-icons-bounce 1s ease infinite;will-change:transform}\n.mal-icons-animate-ping{animation:mal-icons-ping 1s cubic-bezier(0,0,.2,1) infinite;will-change:transform,opacity}\n.mal-icons-animate-shake{animation:mal-icons-shake .8s ease-in-out infinite;will-change:transform}\n.mal-icons-animate-wiggle{animation:mal-icons-wiggle .6s ease-in-out infinite;will-change:transform}\n.mal-icons-animate-float{animation:mal-icons-float 3s ease-in-out infinite;will-change:transform}\n.mal-icons-animate-heartbeat{animation:mal-icons-heartbeat 1.3s ease-in-out infinite;will-change:transform}\n.mal-icons-animate-flip{animation:mal-icons-flip 1.2s ease-in-out infinite;will-change:transform}\n.mal-icons-animate-rotate{animation:mal-icons-rotate 1.5s ease-in-out infinite;will-change:transform}\n.mal-icons-animate-zoom{animation:mal-icons-zoom 1.2s ease-in-out infinite;will-change:transform}\n.mal-icons-animate-fade{animation:mal-icons-fade 1.5s ease-in-out infinite}\n.mal-icons-animate-slide{animation:mal-icons-slide 1s ease-in-out infinite;will-change:transform}\n.mal-icons-animate-glow{animation:mal-icons-glow 1.5s ease-in-out infinite}\n.mal-icons-animate-swing{animation:mal-icons-swing 1s ease-in-out infinite;transform-origin:top center;will-change:transform}\n.mal-icons-animate-tada{animation:mal-icons-tada 1s ease-in-out infinite;will-change:transform}\n@media (prefers-reduced-motion:reduce){[class*=mal-icons-animate-]{animation:none}}\n";
+export declare const WEIGHT_STROKE_WIDTH: Record<import("@mal-icons/core").IconWeight, number>;
+export declare const animationClass: typeof coreAnimationClass;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EACL,IAAI,EACJ,SAAS,EACT,SAAS,EACT,oBAAoB,EACpB,WAAW,EACX,cAAc,EACd,KAAK,gBAAgB,EACrB,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,YAAY,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,KAAK,qBAAqB,GAC3B,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,KAAK,aAAa,EAClB,KAAK,UAAU,GAChB,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,IAAI,kBAAkB,EAGrC,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EACL,IAAI,EACJ,SAAS,EACT,SAAS,EACT,oBAAoB,EACpB,WAAW,EACX,cAAc,EACd,KAAK,gBAAgB,EACrB,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,YAAY,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,KAAK,qBAAqB,GAC3B,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAOjE,eAAO,MAAM,mBAAmB,ujHAAwB,CAAC;AACzD,eAAO,MAAM,mBAAmB,sDAAwB,CAAC;AACzD,eAAO,MAAM,cAAc,2BAAqB,CAAC"}

package/dist/index.js

@@ -1,3 +1,159 @@
+import {
+  DefaultIconContext,
+  IconBase,
+  IconContext,
+  createIcon
+} from "./chunk-ckjps1mv.js";
+
+// packages/react/src/index.ts
+import {
+  animationClass as coreAnimationClass,
+  ICON_ANIMATIONS_CSS as coreIconAnimationsCss,
+  WEIGHT_STROKE_WIDTH as coreWeightStrokeWidth
+} from "@mal-icons/core";
+
+// packages/react/src/sprite-icon.tsx
+import { resolveIconAttrs } from "@mal-icons/core";
+import { useContext } from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function SpriteIcon({
+  id,
+  href,
+  size,
+  color,
+  title,
+  className,
+  style,
+  ...rest
+}) {
+  const conf = useContext(IconContext);
+  const {
+    size: computedSize,
+    color: computedColor,
+    className: cls
+  } = resolveIconAttrs({ size, color, className }, conf);
+  const mergedStyle = computedColor || conf.style || style ? { color: computedColor, ...conf.style, ...style } : undefined;
+  const useHref = href ? `${href}#${id}` : `#${id}`;
+  return /* @__PURE__ */ jsxDEV("svg", {
+    width: computedSize,
+    height: computedSize,
+    className: cls,
+    style: mergedStyle,
+    role: title ? "img" : "presentation",
+    "aria-hidden": title ? undefined : true,
+    ...conf.attr,
+    ...rest,
+    children: [
+      title ? /* @__PURE__ */ jsxDEV("title", {
+        children: title
+      }, undefined, false, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV("use", {
+        href: useHref
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+// packages/react/src/dynamic.tsx
+import { createElement, useEffect, useState } from "react";
+import { jsxDEV as jsxDEV2, Fragment } from "react/jsx-dev-runtime";
+var cache = new Map;
+var inflight = new Map;
+var defaultLoader;
+function setDefaultIconLoader(loader) {
+  defaultLoader = loader;
+}
+function preloadIcon(name, resolved) {
+  cache.set(name, resolved);
+}
+function clearIconCache() {
+  cache.clear();
+  inflight.clear();
+}
+function resolve(name, loader) {
+  const cached = cache.get(name);
+  if (cached)
+    return Promise.resolve(cached);
+  let pending = inflight.get(name);
+  if (!pending) {
+    pending = loader(name).then((r) => {
+      cache.set(name, r);
+      inflight.delete(name);
+      return r;
+    });
+    inflight.set(name, pending);
+  }
+  return pending;
+}
+function isIconData(value) {
+  return typeof value === "object" && value !== null && Array.isArray(value.nodes);
+}
+function Icon({ name, loader, fallback = null, ...rest }) {
+  const activeLoader = loader ?? defaultLoader;
+  const [resolved, setResolved] = useState(() => cache.get(name));
+  useEffect(() => {
+    const cached = cache.get(name);
+    if (cached) {
+      setResolved(cached);
+      return;
+    }
+    if (!activeLoader)
+      return;
+    let active = true;
+    resolve(name, activeLoader).then((r) => {
+      if (active)
+        setResolved(r);
+    }).catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, [name, activeLoader]);
+  if (!resolved)
+    return /* @__PURE__ */ jsxDEV2(Fragment, {
+      children: fallback
+    }, undefined, false, undefined, this);
+  if (!isIconData(resolved)) {
+    const Component = resolved;
+    return /* @__PURE__ */ jsxDEV2(Component, {
+      ...rest
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV2(IconBase, {
+    viewBox: resolved.viewBox,
+    ...resolved.defaultAttr,
+    ...rest,
+    children: resolved.nodes.map(([tag, attr], i) => createElement(tag, { key: i, ...attr }))
+  }, undefined, false, undefined, this);
+}
+function cdnLoader(baseUrl, fetchImpl = fetch) {
+  const base = baseUrl.replace(/\/+$/, "");
+  return async (name) => {
+    const res = await fetchImpl(`${base}/${name}.json`);
+    if (!res.ok)
+      throw new Error(`mal-icons: failed to load "${name}" (${res.status})`);
+    const data = await res.json();
+    if (typeof data?.viewBox !== "string" || !Array.isArray(data?.nodes)) {
+      throw new Error(`mal-icons: malformed icon payload for "${name}"`);
+    }
+    return { viewBox: data.viewBox, nodes: data.nodes, defaultAttr: data.defaultAttr };
+  };
+}
+function setLoader(importer) {
+  let modulePromise;
+  return async (name) => {
+    if (!modulePromise)
+      modulePromise = importer();
+    const mod = await modulePromise;
+    const component = mod[name];
+    if (!component)
+      throw new Error(`mal-icons: "${name}" not found in set module`);
+    return component;
+  };
+}
+
+// packages/react/src/index.ts
+var ICON_ANIMATIONS_CSS = coreIconAnimationsCss;
+var WEIGHT_STROKE_WIDTH = coreWeightStrokeWidth;
+var animationClass = coreAnimationClass;
 export {
   setLoader,
   setDefaultIconLoader,

package/dist/server.cjs

@@ -43,7 +43,7 @@ __export(exports_server, {
   IconBaseServer: () => IconBaseServer
 });
 module.exports = __toCommonJS(exports_server);
-var import_core = require("@mal-icon/core");
+var import_core = require("@mal-icons/core");
 var import_react = require("react");
 var jsx_dev_runtime = require("react/jsx-dev-runtime");
 function IconBaseServer({
@@ -67,7 +67,7 @@ function IconBaseServer({
   const fullClassName = [cls, animate ? import_core.animationClass(animate) : undefined].filter(Boolean).join(" ") || undefined;
   const mergedStyle = computedColor || secondaryColor || style ? {
     color: computedColor,
-    ...secondaryColor ? { "--mal-icon-secondary": secondaryColor } : {},
+    ...secondaryColor ? { "--mal-icons-secondary": secondaryColor } : {},
     ...style
   } : undefined;
   const weightWidth = weight ? import_core.WEIGHT_STROKE_WIDTH[weight] : undefined;

package/dist/server.js

@@ -1,5 +1,5 @@
 // packages/react/src/server.tsx
-import { WEIGHT_STROKE_WIDTH, animationClass, resolveIconAttrs } from "@mal-icon/core";
+import { WEIGHT_STROKE_WIDTH, animationClass, resolveIconAttrs } from "@mal-icons/core";
 import { createElement } from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
 function IconBaseServer({
@@ -23,7 +23,7 @@ function IconBaseServer({
   const fullClassName = [cls, animate ? animationClass(animate) : undefined].filter(Boolean).join(" ") || undefined;
   const mergedStyle = computedColor || secondaryColor || style ? {
     color: computedColor,
-    ...secondaryColor ? { "--mal-icon-secondary": secondaryColor } : {},
+    ...secondaryColor ? { "--mal-icons-secondary": secondaryColor } : {},
     ...style
   } : undefined;
   const weightWidth = weight ? WEIGHT_STROKE_WIDTH[weight] : undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mal-icons/react",
-  "version": "0.1.2",
+  "version": "0.2.7",
   "description": "React components and dynamic icon rendering for mal-icons.",
   "type": "module",
   "license": "MIT",
@@ -63,7 +63,7 @@
     "react": ">=18"
   },
   "dependencies": {
-    "@mal-icons/core": "0.1.2"
+    "@mal-icons/core": "0.2.7"
   },
   "publishConfig": {
     "access": "public"