@mal-icons/react 0.1.0

package/dist/server.cjs

@@ -0,0 +1,106 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toCommonJS = (from) => {
+  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (var key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(entry, key))
+        __defProp(entry, key, {
+          get: __accessProp.bind(from, key),
+          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+        });
+  }
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __moduleCache;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+
+// packages/react/src/server.tsx
+var exports_server = {};
+__export(exports_server, {
+  createServerIcon: () => createServerIcon,
+  IconBaseServer: () => IconBaseServer
+});
+module.exports = __toCommonJS(exports_server);
+var import_core = require("@mal-icon/core");
+var import_react = require("react");
+var jsx_dev_runtime = require("react/jsx-dev-runtime");
+function IconBaseServer({
+  viewBox,
+  size,
+  color,
+  secondaryColor,
+  weight,
+  animate,
+  title,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const {
+    size: computedSize,
+    color: computedColor,
+    className: cls
+  } = import_core.resolveIconAttrs({ size, color, className }, {});
+  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 } : {},
+    ...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,
+    ...restProps,
+    strokeWidth,
+    children: [
+      title ? /* @__PURE__ */ jsx_dev_runtime.jsxDEV("title", {
+        children: title
+      }, undefined, false, undefined, this) : null,
+      children
+    ]
+  }, undefined, true, undefined, this);
+}
+function createServerIcon(viewBox, nodes, defaultAttr) {
+  const children = nodes.map(([tag, attr], i) => import_react.createElement(tag, { key: i, ...attr }));
+  return function ServerIcon(props) {
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(IconBaseServer, {
+      viewBox,
+      ...defaultAttr,
+      ...props,
+      children
+    }, undefined, false, undefined, this);
+  };
+}

package/dist/server.d.ts

@@ -0,0 +1,31 @@
+import type { NodeTuple } from "@mal-icons/core";
+import { type ReactElement } from "react";
+import type { IconBaseProps } from "./icon-base.tsx";
+/**
+ * React Server Component build of mal-icons (SRS §16.2).
+ *
+ * The default React entry reads theming through `useContext`, which is not
+ * available in Server Components. This module renders the exact same SVG
+ * markup with **no hooks and no `React.memo`**, so generated icons can be
+ * imported directly into Server Components. Theming via props still works;
+ * context-based theming is intentionally unavailable on the server.
+ */
+/** Props accepted by the server icon renderer (same surface as the client). */
+export type ServerIconProps = IconBaseProps;
+/**
+ * The hook-free SVG wrapper. Applies the same prop priority and a11y rules as
+ * the client {@link IconBase} but without any React context lookup.
+ */
+export declare function IconBaseServer({ viewBox, size, color, secondaryColor, weight, animate, title, className, style, children, ...rest }: IconBaseProps & {
+    viewBox: string;
+    children?: ReactElement[];
+}): import("react").JSX.Element;
+/** Root-level attributes baked into a server icon (matches the client type). */
+export type IconDefaultAttr = Partial<IconBaseProps>;
+/**
+ * Server-component counterpart to `createIcon`. Builds the shape children once
+ * at module load and returns a plain function component (no `memo`), suitable
+ * for direct use in React Server Components.
+ */
+export declare function createServerIcon(viewBox: string, nodes: NodeTuple[], defaultAttr?: IconDefaultAttr): (props: ServerIconProps) => import("react").JSX.Element;
+//# sourceMappingURL=server.d.ts.map

package/dist/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD;;;;;;;;GAQG;AAEH,+EAA+E;AAC/E,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC;AAE5C;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,KAAK,EACL,cAAc,EACd,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,aAAa,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAA;CAAE,+BAyChE;AAED,gFAAgF;AAChF,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;AAErD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,SAAS,EAAE,EAClB,WAAW,CAAC,EAAE,eAAe,IAKF,OAAO,eAAe,iCAOlD"}

package/dist/server.js

@@ -0,0 +1,66 @@
+// packages/react/src/server.tsx
+import { WEIGHT_STROKE_WIDTH, animationClass, resolveIconAttrs } from "@mal-icon/core";
+import { createElement } from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function IconBaseServer({
+  viewBox,
+  size,
+  color,
+  secondaryColor,
+  weight,
+  animate,
+  title,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const {
+    size: computedSize,
+    color: computedColor,
+    className: cls
+  } = resolveIconAttrs({ size, color, className }, {});
+  const fullClassName = [cls, animate ? animationClass(animate) : undefined].filter(Boolean).join(" ") || undefined;
+  const mergedStyle = computedColor || secondaryColor || style ? {
+    color: computedColor,
+    ...secondaryColor ? { "--mal-icon-secondary": secondaryColor } : {},
+    ...style
+  } : undefined;
+  const weightWidth = weight ? WEIGHT_STROKE_WIDTH[weight] : undefined;
+  const { strokeWidth: restStrokeWidth, ...restProps } = rest;
+  const strokeWidth = weightWidth ?? restStrokeWidth ?? "0";
+  return /* @__PURE__ */ jsxDEV("svg", {
+    viewBox,
+    stroke: "currentColor",
+    fill: "currentColor",
+    width: computedSize,
+    height: computedSize,
+    className: fullClassName,
+    style: mergedStyle,
+    role: title ? "img" : "presentation",
+    "aria-hidden": title ? undefined : true,
+    ...restProps,
+    strokeWidth,
+    children: [
+      title ? /* @__PURE__ */ jsxDEV("title", {
+        children: title
+      }, undefined, false, undefined, this) : null,
+      children
+    ]
+  }, undefined, true, undefined, this);
+}
+function createServerIcon(viewBox, nodes, defaultAttr) {
+  const children = nodes.map(([tag, attr], i) => createElement(tag, { key: i, ...attr }));
+  return function ServerIcon(props) {
+    return /* @__PURE__ */ jsxDEV(IconBaseServer, {
+      viewBox,
+      ...defaultAttr,
+      ...props,
+      children
+    }, undefined, false, undefined, this);
+  };
+}
+export {
+  createServerIcon,
+  IconBaseServer
+};

package/dist/sprite-icon.d.ts

@@ -0,0 +1,23 @@
+import type { IconBaseProps } from "./icon-base.tsx";
+/** Props for {@link SpriteIcon}. */
+export interface SpriteIconProps extends IconBaseProps {
+    /**
+     * Symbol id within the sprite sheet, e.g. `"fi-activity"`. The generated
+     * sprite emits `<symbol id="<set>-<rawName>">` entries.
+     */
+    id: string;
+    /**
+     * Optional URL of an external sprite sheet. When omitted the reference is
+     * a same-document fragment (`#id`), assuming the sprite has been injected
+     * into the page; otherwise it becomes `"<href>#id"`.
+     */
+    href?: string;
+}
+/**
+ * Render an icon by referencing a `<symbol>` in a sprite sheet via
+ * `<use href>`. Repeated icons reuse a single cached symbol instead of
+ * inlining shape data per instance (SRS FR-8). Theming follows the same
+ * {@link IconContext} priority as inline icons.
+ */
+export declare function SpriteIcon({ id, href, size, color, title, className, style, ...rest }: SpriteIconProps): import("react").JSX.Element;
+//# sourceMappingURL=sprite-icon.d.ts.map

package/dist/sprite-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sprite-icon.d.ts","sourceRoot":"","sources":["../src/sprite-icon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,oCAAoC;AACpC,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,eAAe,+BA8BjB"}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@mal-icons/react",
+  "version": "0.1.0",
+  "description": "React components and dynamic icon rendering for mal-icons.",
+  "type": "module",
+  "license": "MIT",
+  "author": "MALDevs",
+  "homepage": "https://github.com/mal-icons/mal-icons#readme",
+  "bugs": {
+    "url": "https://github.com/mal-icons/mal-icons/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mal-icons/mal-icons.git",
+    "directory": "packages/react"
+  },
+  "keywords": ["icons", "svg", "react", "components", "mal-icons"],
+  "sideEffects": false,
+  "files": ["dist"],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "bun": "./src/index.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./fi": {
+      "types": "./dist/icons/fi/index.d.ts",
+      "bun": "./src/icons/fi/index.ts",
+      "import": "./dist/icons/fi/index.js",
+      "require": "./dist/icons/fi/index.cjs"
+    },
+    "./fi/*": {
+      "types": "./dist/icons/fi/*.d.ts",
+      "bun": "./src/icons/fi/*.tsx",
+      "import": "./dist/icons/fi/*.js"
+    },
+    "./demo": {
+      "types": "./dist/icons/demo/index.d.ts",
+      "bun": "./src/icons/demo/index.ts",
+      "import": "./dist/icons/demo/index.js",
+      "require": "./dist/icons/demo/index.cjs"
+    },
+    "./demo/*": {
+      "types": "./dist/icons/demo/*.d.ts",
+      "bun": "./src/icons/demo/*.tsx",
+      "import": "./dist/icons/demo/*.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "bun": "./src/server.tsx",
+      "import": "./dist/server.js",
+      "require": "./dist/server.cjs"
+    },
+    "./sprite/fi.svg": "./dist/icons/fi/sprite.svg",
+    "./manifest.json": "./dist/icons/manifest.json",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@mal-icons/core": "workspace:*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}