@smbdy/icons-react 1.0.0

package/dist/chunk-XWYUXPMU.js

@@ -0,0 +1,193 @@
+"use client";
+
+import {
+  useIconConfig
+} from "./chunk-ICEGTX2E.js";
+import {
+  BtcIcon,
+  DaiIcon,
+  EthIcon,
+  UsdcIcon,
+  UsdtIcon
+} from "./chunk-35GWSGWA.js";
+import {
+  EthereumIcon
+} from "./chunk-R2LI45CO.js";
+import {
+  MetamaskIcon
+} from "./chunk-OVJUO4KZ.js";
+
+// src/index.tsx
+import { lazy as lazy2, Suspense, useEffect, useState } from "react";
+import { getMeta, getTypedMeta } from "@smbdy/icons";
+import { resolveOrCandidate } from "@smbdy/icons/resolve";
+
+// src/generated/eager-map.ts
+var EAGER_ICONS = {
+  "token:btc": BtcIcon,
+  "token:dai": DaiIcon,
+  "token:eth": EthIcon,
+  "token:usdc": UsdcIcon,
+  "token:usdt": UsdtIcon,
+  "chain:ethereum": EthereumIcon,
+  "brand:metamask": MetamaskIcon
+};
+
+// src/generated/lazy-map.ts
+import { lazy } from "react";
+var LAZY_ICONS = {
+  "token:aave": lazy(() => import("./aave-4NKY7G5P.js").then((m) => ({ default: m.AaveIcon }))),
+  "token:bnb": lazy(() => import("./bnb-VEXN3I2D.js").then((m) => ({ default: m.BnbIcon }))),
+  "token:link": lazy(() => import("./link-M5GUQP3F.js").then((m) => ({ default: m.LinkIcon }))),
+  "token:pteusde": lazy(() => import("./pteusde-T5QFFBX5.js").then((m) => ({ default: m.PteusdeIcon }))),
+  "token:uni": lazy(() => import("./uni-UB66QGDS.js").then((m) => ({ default: m.UniIcon })))
+};
+
+// src/index.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var styleInjected = false;
+function ensureStyles() {
+  if (styleInjected || typeof document === "undefined") return;
+  styleInjected = true;
+  const s = document.createElement("style");
+  s.textContent = "@keyframes bgd-icon-fade-in{from{opacity:0}to{opacity:1}}.bgd-icon-placeholder{transition:opacity 0.3s ease-out}@media(prefers-reduced-motion:reduce){.bgd-icon-fade{animation:none;opacity:1}.bgd-icon-placeholder{transition:none}}";
+  document.head.appendChild(s);
+}
+function Placeholder({
+  id,
+  type,
+  size = 32,
+  decorative = false
+}) {
+  const meta = type ? getTypedMeta(type, id) : getMeta(id);
+  const color = meta?.placeholderColor ?? meta?.brandColor ?? "#ccc";
+  const letter = (meta?.symbol ?? id).charAt(0).toUpperCase();
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 32 32",
+      ...decorative ? { "aria-hidden": true, focusable: false } : { role: "img", "aria-label": meta?.name ?? id },
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "16", fill: color, opacity: 0.25 }),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: "16",
+            y: "16",
+            dy: ".35em",
+            textAnchor: "middle",
+            fill: color,
+            fontSize: "14",
+            fontFamily: "system-ui, sans-serif",
+            fontWeight: "600",
+            children: letter
+          }
+        )
+      ]
+    }
+  );
+}
+var wrapStyle = {
+  position: "relative",
+  display: "inline-flex"
+};
+var overlayStyle = {
+  position: "absolute",
+  inset: 0,
+  display: "inline-flex",
+  opacity: 0,
+  animation: "bgd-icon-fade-in 0.3s ease-out forwards"
+};
+var LazyGithubFallback = lazy2(
+  () => import("./github-fallback-W3AHQ4U6.js").then((m) => ({ default: m.GithubFallback }))
+);
+function NotifyMounted({ onMounted }) {
+  useEffect(() => {
+    onMounted();
+  });
+  return null;
+}
+function FadeInLazyIcon({
+  Lazy,
+  placeholder,
+  variant,
+  size,
+  ...props
+}) {
+  const [loaded, setLoaded] = useState(false);
+  return /* @__PURE__ */ jsxs("span", { style: wrapStyle, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "bgd-icon-placeholder",
+        style: { display: "inline-flex", opacity: loaded ? 0 : 1 },
+        "aria-hidden": loaded || void 0,
+        children: placeholder
+      }
+    ),
+    /* @__PURE__ */ jsxs(Suspense, { fallback: null, children: [
+      /* @__PURE__ */ jsx("span", { className: "bgd-icon-fade", style: overlayStyle, children: /* @__PURE__ */ jsx(Lazy, { variant, size, ...props }) }),
+      /* @__PURE__ */ jsx(NotifyMounted, { onMounted: () => setLoaded(true) })
+    ] })
+  ] });
+}
+function Icon({
+  value,
+  type: explicitType,
+  mono = false,
+  size,
+  fallback,
+  ...props
+}) {
+  const { enableFallback } = useIconConfig();
+  const { id, type } = resolveOrCandidate(
+    value,
+    explicitType ? { type: explicitType } : {}
+  );
+  const lookupKey = type ? `${type}:${id}` : null;
+  const placeholderType = type ?? void 0;
+  const variant = mono ? "mono" : "full";
+  const Eager = lookupKey ? EAGER_ICONS[lookupKey] : void 0;
+  if (Eager) return /* @__PURE__ */ jsx(Eager, { variant, size, ...props });
+  const Lazy = lookupKey ? LAZY_ICONS[lookupKey] : void 0;
+  if (!Lazy) {
+    if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+      console.warn(`[bgd-icons] Unknown icon value: "${value}"`);
+    }
+    if (enableFallback) {
+      const placeholder = fallback ?? /* @__PURE__ */ jsx(Placeholder, { id, type: placeholderType, size });
+      return /* @__PURE__ */ jsx(Suspense, { fallback: placeholder, children: /* @__PURE__ */ jsx(
+        LazyGithubFallback,
+        {
+          id,
+          iconType: placeholderType,
+          variant,
+          size,
+          fallback: placeholder,
+          ...props
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: fallback ?? /* @__PURE__ */ jsx(Placeholder, { id, type: placeholderType, size }) });
+  }
+  ensureStyles();
+  return /* @__PURE__ */ jsx(
+    FadeInLazyIcon,
+    {
+      Lazy,
+      placeholder: fallback ?? /* @__PURE__ */ jsx(Placeholder, { id, type: placeholderType, size, decorative: true }),
+      variant,
+      size,
+      ...props
+    },
+    lookupKey
+  );
+}
+
+export {
+  Icon
+};
+//# sourceMappingURL=chunk-XWYUXPMU.js.map

package/dist/chunk-XWYUXPMU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx","../src/generated/eager-map.ts","../src/generated/lazy-map.ts"],"sourcesContent":["import { lazy, Suspense, useEffect, useState } from 'react'\nimport type { ReactNode, SVGProps } from 'react'\nimport { getMeta, getTypedMeta } from '@smbdy/icons'\nimport { resolveOrCandidate } from '@smbdy/icons/resolve'\nimport { EAGER_ICONS } from './generated/eager-map'\nimport { LAZY_ICONS } from './generated/lazy-map'\nimport { useIconConfig } from './icon-provider'\nimport type { IconType } from './types'\n\nexport { IconProvider } from './icon-provider'\nexport type { IconContextValue } from './icon-provider'\n\n// `type` shadows the inherited `SVGProps['type']` HTML attribute, which we\n// never expose anyway. Omitting it makes the prop unambiguously `IconType`.\nexport interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'type'> {\n  value: string | number\n  type?: IconType\n  mono?: boolean\n  size?: number | string\n  fallback?: ReactNode\n}\n\nlet styleInjected = false\nfunction ensureStyles() {\n  if (styleInjected || typeof document === 'undefined') return\n  styleInjected = true\n  const s = document.createElement('style')\n  s.textContent =\n    '@keyframes bgd-icon-fade-in{from{opacity:0}to{opacity:1}}' +\n    '.bgd-icon-placeholder{transition:opacity 0.3s ease-out}' +\n    '@media(prefers-reduced-motion:reduce){.bgd-icon-fade{animation:none;opacity:1}.bgd-icon-placeholder{transition:none}}'\n  document.head.appendChild(s)\n}\n\nfunction Placeholder({\n  id,\n  type,\n  size = 32,\n  decorative = false,\n}: {\n  id: string\n  type?: IconType\n  size?: number | string\n  decorative?: boolean\n}) {\n  const meta = type ? getTypedMeta(type, id) : getMeta(id)\n  const color = meta?.placeholderColor ?? meta?.brandColor ?? '#ccc'\n  const letter = (meta?.symbol ?? id).charAt(0).toUpperCase()\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 32 32\"\n      {...(decorative\n        ? { 'aria-hidden': true, focusable: false }\n        : { role: 'img', 'aria-label': meta?.name ?? id })}\n    >\n      <circle cx=\"16\" cy=\"16\" r=\"16\" fill={color} opacity={0.25} />\n      <text\n        x=\"16\"\n        y=\"16\"\n        dy=\".35em\"\n        textAnchor=\"middle\"\n        fill={color}\n        fontSize=\"14\"\n        fontFamily=\"system-ui, sans-serif\"\n        fontWeight=\"600\"\n      >\n        {letter}\n      </text>\n    </svg>\n  )\n}\n\nconst wrapStyle: React.CSSProperties = {\n  position: 'relative',\n  display: 'inline-flex',\n}\nconst overlayStyle: React.CSSProperties = {\n  position: 'absolute',\n  inset: 0,\n  display: 'inline-flex',\n  opacity: 0,\n  animation: 'bgd-icon-fade-in 0.3s ease-out forwards',\n}\n\nconst LazyGithubFallback = lazy(() =>\n  import('./github-fallback').then((m) => ({ default: m.GithubFallback })),\n)\n\n// Mounts only when the surrounding Suspense boundary resolves — used to\n// learn when the lazy icon is actually on screen.\nfunction NotifyMounted({ onMounted }: { onMounted: () => void }) {\n  useEffect(() => {\n    onMounted()\n  })\n  return null\n}\n\ntype LazyIconComponent = (typeof LAZY_ICONS)[string]\n\n// The placeholder is the layout anchor (the lazy icon overlays it), so it\n// must stay mounted — but once the icon has loaded it has to fade out.\n// Mono icons use currentColor with transparent regions; a placeholder left\n// at full opacity peeks through them.\nfunction FadeInLazyIcon({\n  Lazy,\n  placeholder,\n  variant,\n  size,\n  ...props\n}: Omit<SVGProps<SVGSVGElement>, 'type'> & {\n  Lazy: LazyIconComponent\n  placeholder: ReactNode\n  variant: 'full' | 'mono'\n  size?: number | string\n}) {\n  const [loaded, setLoaded] = useState(false)\n  return (\n    <span style={wrapStyle}>\n      <span\n        className=\"bgd-icon-placeholder\"\n        style={{ display: 'inline-flex', opacity: loaded ? 0 : 1 }}\n        aria-hidden={loaded || undefined}\n      >\n        {placeholder}\n      </span>\n      <Suspense fallback={null}>\n        <span className=\"bgd-icon-fade\" style={overlayStyle}>\n          <Lazy variant={variant} size={size} {...props} />\n        </span>\n        <NotifyMounted onMounted={() => setLoaded(true)} />\n      </Suspense>\n    </span>\n  )\n}\n\nexport function Icon({\n  value,\n  type: explicitType,\n  mono = false,\n  size,\n  fallback,\n  ...props\n}: IconProps) {\n  const { enableFallback } = useIconConfig()\n  const { id, type } = resolveOrCandidate(\n    value,\n    explicitType ? { type: explicitType } : {},\n  )\n  const lookupKey = type ? `${type}:${id}` : null\n  const placeholderType = type ?? undefined\n  const variant: 'full' | 'mono' = mono ? 'mono' : 'full'\n\n  const Eager = lookupKey ? EAGER_ICONS[lookupKey] : undefined\n  if (Eager) return <Eager variant={variant} size={size} {...props} />\n\n  const Lazy = lookupKey ? LAZY_ICONS[lookupKey] : undefined\n  if (!Lazy) {\n    // Bundlers replace process.env.NODE_ENV and dead-code-eliminate this in production\n    if (\n      typeof process !== 'undefined' &&\n      process.env.NODE_ENV !== 'production'\n    ) {\n      console.warn(`[bgd-icons] Unknown icon value: \"${value}\"`)\n    }\n    if (enableFallback) {\n      const placeholder = fallback ?? (\n        <Placeholder id={id} type={placeholderType} size={size} />\n      )\n      return (\n        <Suspense fallback={placeholder}>\n          <LazyGithubFallback\n            id={id}\n            iconType={placeholderType}\n            variant={variant}\n            size={size}\n            fallback={placeholder}\n            {...props}\n          />\n        </Suspense>\n      )\n    }\n    return (\n      <>\n        {fallback ?? <Placeholder id={id} type={placeholderType} size={size} />}\n      </>\n    )\n  }\n\n  ensureStyles()\n  return (\n    <FadeInLazyIcon\n      // Reset the loaded state when the identity changes\n      key={lookupKey}\n      Lazy={Lazy}\n      placeholder={\n        fallback ?? (\n          <Placeholder id={id} type={placeholderType} size={size} decorative />\n        )\n      }\n      variant={variant}\n      size={size}\n      {...props}\n    />\n  )\n}\n","// Auto-generated by scripts/generate.ts - DO NOT EDIT\nimport type { ComponentType } from 'react'\nimport type { IconProps } from './tokens/index'\n\nimport { BtcIcon } from './tokens/btc'\nimport { DaiIcon } from './tokens/dai'\nimport { EthIcon } from './tokens/eth'\nimport { UsdcIcon } from './tokens/usdc'\nimport { UsdtIcon } from './tokens/usdt'\nimport { EthereumIcon } from './chains/ethereum'\nimport { MetamaskIcon } from './brands/metamask'\n\nexport const EAGER_ICONS: Record<string, ComponentType<IconProps>> = {\n  \"token:btc\": BtcIcon,\n  \"token:dai\": DaiIcon,\n  \"token:eth\": EthIcon,\n  \"token:usdc\": UsdcIcon,\n  \"token:usdt\": UsdtIcon,\n  \"chain:ethereum\": EthereumIcon,\n  \"brand:metamask\": MetamaskIcon,\n}\n","// Auto-generated by scripts/generate.ts - DO NOT EDIT\nimport { lazy } from 'react'\nimport type { LazyExoticComponent, ComponentType } from 'react'\nimport type { IconProps } from './tokens/index'\n\ntype LazyIcon = LazyExoticComponent<ComponentType<IconProps>>\n\nexport const LAZY_ICONS: Record<string, LazyIcon> = {\n  \"token:aave\": lazy(() => import('./tokens/aave').then((m) => ({ default: m.AaveIcon }))),\n  \"token:bnb\": lazy(() => import('./tokens/bnb').then((m) => ({ default: m.BnbIcon }))),\n  \"token:link\": lazy(() => import('./tokens/link').then((m) => ({ default: m.LinkIcon }))),\n  \"token:pteusde\": lazy(() => import('./tokens/pteusde').then((m) => ({ default: m.PteusdeIcon }))),\n  \"token:uni\": lazy(() => import('./tokens/uni').then((m) => ({ default: m.UniIcon }))),\n}\n"],"mappings":"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","names":["lazy","lazy"]}

package/dist/compat.cjs

@@ -0,0 +1,54 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+var _chunkLMGL65KIcjs = require('./chunk-LMGL65KI.cjs');
+require('./chunk-KJL5NVUU.cjs');
+require('./chunk-4HVBGJ3B.cjs');
+require('./chunk-CZ5BDQQZ.cjs');
+require('./chunk-KHCWITFW.cjs');
+
+
+var _chunkIEWJOWAPcjs = require('./chunk-IEWJOWAP.cjs');
+
+// src/compat.ts
+var _react = require('react');
+function Web3Icon({
+  symbol,
+  chainId,
+  walletKey,
+  brandKey,
+  mono,
+  assetTag,
+  loader,
+  size,
+  ...props
+}) {
+  const input = _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(symbol, () => ( chainId)), () => ( walletKey)), () => ( brandKey));
+  if (!input) return _react.createElement.call(void 0, "span", null, _nullishCoalesce(loader, () => ( null)));
+  const iconType = symbol !== void 0 ? void 0 : chainId !== void 0 ? "chain" : brandKey !== void 0 ? "brand" : walletKey !== void 0 ? "brand" : void 0;
+  const icon = _react.createElement.call(void 0, _chunkLMGL65KIcjs.Icon, {
+    value: input,
+    type: iconType,
+    mono,
+    fallback: loader,
+    // Inside a frame the base icon fills the frame's slot — FrameWrapper
+    // owns the pixel size and insets the slot container.
+    size: assetTag ? "100%" : size,
+    ...props
+  });
+  if (assetTag) {
+    return _react.createElement.call(void 0, 
+      _chunkIEWJOWAPcjs.FrameWrapper,
+      {
+        frame: assetTag,
+        variant: mono ? "mono" : "full",
+        size
+      },
+      icon
+    );
+  }
+  return icon;
+}
+
+
+exports.Web3Icon = Web3Icon;
+//# sourceMappingURL=compat.cjs.map

package/dist/compat.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/icons/icons/packages/react/dist/compat.cjs","../src/compat.ts"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B,gCAA6B;AAC7B,gCAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACXA,8BAA8B;AAoBvB,SAAS,QAAA,CAAS;AAAA,EACvB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,MAAA,qDAAQ,MAAA,UAAU,SAAA,UAAW,WAAA,UAAa,UAAA;AAChD,EAAA,GAAA,CAAI,CAAC,KAAA,EAAO,OAAO,kCAAA,MAAc,EAAQ,IAAA,mBAAM,MAAA,UAAU,MAAI,CAAA;AAC7D,EAAA,MAAM,SAAA,EACJ,OAAA,IAAW,KAAA,EAAA,EACP,KAAA,EAAA,EACA,QAAA,IAAY,KAAA,EAAA,EACV,QAAA,EACA,SAAA,IAAa,KAAA,EAAA,EACX,QAAA,EACA,UAAA,IAAc,KAAA,EAAA,EACZ,QAAA,EACA,KAAA,CAAA;AAEZ,EAAA,MAAM,KAAA,EAAO,kCAAA,sBAAc,EAAM;AAAA,IAC/B,KAAA,EAAO,KAAA;AAAA,IACP,IAAA,EAAM,QAAA;AAAA,IACN,IAAA;AAAA,IACA,QAAA,EAAU,MAAA;AAAA;AAAA;AAAA,IAGV,IAAA,EAAM,SAAA,EAAW,OAAA,EAAS,IAAA;AAAA,IAC1B,GAAG;AAAA,EACL,CAAC,CAAA;AAED,EAAA,GAAA,CAAI,QAAA,EAAU;AACZ,IAAA,OAAO,kCAAA;AAAA,MACL,8BAAA;AAAA,MACA;AAAA,QACE,KAAA,EAAO,QAAA;AAAA,QACP,OAAA,EAAS,KAAA,EAAO,OAAA,EAAS,MAAA;AAAA,QACzB;AAAA,MACF,CAAA;AAAA,MACA;AAAA,IACF,CAAA;AAAA,EACF;AAEA,EAAA,OAAO,IAAA;AACT;ADlBA;AACE;AACF,4BAAC","file":"/home/runner/work/icons/icons/packages/react/dist/compat.cjs","sourcesContent":[null,"import { createElement } from 'react'\nimport type { ReactNode, SVGProps } from 'react'\nimport { Icon } from './index'\nimport { FrameWrapper } from './frames'\nimport type { IconType } from './types'\n\n// Drop `type` from the inherited SVG attributes so it can't shadow Icon's\n// `type` prop on spread; Web3Icon picks its target type from chainId/brandKey\n// internally.\nexport interface Web3IconProps extends Omit<SVGProps<SVGSVGElement>, 'type'> {\n  symbol?: string\n  chainId?: number | string\n  walletKey?: string\n  brandKey?: string\n  mono?: boolean\n  assetTag?: string\n  loader?: ReactNode\n  size?: number | string\n}\n\nexport function Web3Icon({\n  symbol,\n  chainId,\n  walletKey,\n  brandKey,\n  mono,\n  assetTag,\n  loader,\n  size,\n  ...props\n}: Web3IconProps) {\n  const input = symbol ?? chainId ?? walletKey ?? brandKey\n  if (!input) return createElement('span', null, loader ?? null)\n  const iconType: IconType | undefined =\n    symbol !== undefined\n      ? undefined\n      : chainId !== undefined\n        ? 'chain'\n        : brandKey !== undefined\n          ? 'brand'\n          : walletKey !== undefined\n            ? 'brand'\n            : undefined\n\n  const icon = createElement(Icon, {\n    value: input,\n    type: iconType,\n    mono,\n    fallback: loader,\n    // Inside a frame the base icon fills the frame's slot — FrameWrapper\n    // owns the pixel size and insets the slot container.\n    size: assetTag ? '100%' : size,\n    ...props,\n  })\n\n  if (assetTag) {\n    return createElement(\n      FrameWrapper,\n      {\n        frame: assetTag,\n        variant: mono ? 'mono' : 'full',\n        size,\n      },\n      icon,\n    )\n  }\n\n  return icon\n}\n"]}

package/dist/compat.d.cts

@@ -0,0 +1,20 @@
+import { FrameWrapperProps } from './frames.cjs';
+import { IconProps } from './index.cjs';
+import * as react from 'react';
+import { SVGProps, ReactNode } from 'react';
+import 'react/jsx-runtime';
+import '@smbdy/icons';
+
+interface Web3IconProps extends Omit<SVGProps<SVGSVGElement>, 'type'> {
+    symbol?: string;
+    chainId?: number | string;
+    walletKey?: string;
+    brandKey?: string;
+    mono?: boolean;
+    assetTag?: string;
+    loader?: ReactNode;
+    size?: number | string;
+}
+declare function Web3Icon({ symbol, chainId, walletKey, brandKey, mono, assetTag, loader, size, ...props }: Web3IconProps): react.DetailedReactHTMLElement<react.HTMLAttributes<HTMLElement>, HTMLElement> | react.FunctionComponentElement<IconProps> | react.FunctionComponentElement<FrameWrapperProps>;
+
+export { Web3Icon, type Web3IconProps };

package/dist/compat.d.ts

@@ -0,0 +1,20 @@
+import { FrameWrapperProps } from './frames.js';
+import { IconProps } from './index.js';
+import * as react from 'react';
+import { SVGProps, ReactNode } from 'react';
+import 'react/jsx-runtime';
+import '@smbdy/icons';
+
+interface Web3IconProps extends Omit<SVGProps<SVGSVGElement>, 'type'> {
+    symbol?: string;
+    chainId?: number | string;
+    walletKey?: string;
+    brandKey?: string;
+    mono?: boolean;
+    assetTag?: string;
+    loader?: ReactNode;
+    size?: number | string;
+}
+declare function Web3Icon({ symbol, chainId, walletKey, brandKey, mono, assetTag, loader, size, ...props }: Web3IconProps): react.DetailedReactHTMLElement<react.HTMLAttributes<HTMLElement>, HTMLElement> | react.FunctionComponentElement<IconProps> | react.FunctionComponentElement<FrameWrapperProps>;
+
+export { Web3Icon, type Web3IconProps };

package/dist/compat.js

@@ -0,0 +1,56 @@
+"use client";
+
+import {
+  Icon
+} from "./chunk-XWYUXPMU.js";
+import "./chunk-ICEGTX2E.js";
+import "./chunk-35GWSGWA.js";
+import "./chunk-R2LI45CO.js";
+import "./chunk-OVJUO4KZ.js";
+import {
+  FrameWrapper
+} from "./chunk-OPA5IJQV.js";
+
+// src/compat.ts
+import { createElement } from "react";
+function Web3Icon({
+  symbol,
+  chainId,
+  walletKey,
+  brandKey,
+  mono,
+  assetTag,
+  loader,
+  size,
+  ...props
+}) {
+  const input = symbol ?? chainId ?? walletKey ?? brandKey;
+  if (!input) return createElement("span", null, loader ?? null);
+  const iconType = symbol !== void 0 ? void 0 : chainId !== void 0 ? "chain" : brandKey !== void 0 ? "brand" : walletKey !== void 0 ? "brand" : void 0;
+  const icon = createElement(Icon, {
+    value: input,
+    type: iconType,
+    mono,
+    fallback: loader,
+    // Inside a frame the base icon fills the frame's slot — FrameWrapper
+    // owns the pixel size and insets the slot container.
+    size: assetTag ? "100%" : size,
+    ...props
+  });
+  if (assetTag) {
+    return createElement(
+      FrameWrapper,
+      {
+        frame: assetTag,
+        variant: mono ? "mono" : "full",
+        size
+      },
+      icon
+    );
+  }
+  return icon;
+}
+export {
+  Web3Icon
+};
+//# sourceMappingURL=compat.js.map

package/dist/compat.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/compat.ts"],"sourcesContent":["import { createElement } from 'react'\nimport type { ReactNode, SVGProps } from 'react'\nimport { Icon } from './index'\nimport { FrameWrapper } from './frames'\nimport type { IconType } from './types'\n\n// Drop `type` from the inherited SVG attributes so it can't shadow Icon's\n// `type` prop on spread; Web3Icon picks its target type from chainId/brandKey\n// internally.\nexport interface Web3IconProps extends Omit<SVGProps<SVGSVGElement>, 'type'> {\n  symbol?: string\n  chainId?: number | string\n  walletKey?: string\n  brandKey?: string\n  mono?: boolean\n  assetTag?: string\n  loader?: ReactNode\n  size?: number | string\n}\n\nexport function Web3Icon({\n  symbol,\n  chainId,\n  walletKey,\n  brandKey,\n  mono,\n  assetTag,\n  loader,\n  size,\n  ...props\n}: Web3IconProps) {\n  const input = symbol ?? chainId ?? walletKey ?? brandKey\n  if (!input) return createElement('span', null, loader ?? null)\n  const iconType: IconType | undefined =\n    symbol !== undefined\n      ? undefined\n      : chainId !== undefined\n        ? 'chain'\n        : brandKey !== undefined\n          ? 'brand'\n          : walletKey !== undefined\n            ? 'brand'\n            : undefined\n\n  const icon = createElement(Icon, {\n    value: input,\n    type: iconType,\n    mono,\n    fallback: loader,\n    // Inside a frame the base icon fills the frame's slot — FrameWrapper\n    // owns the pixel size and insets the slot container.\n    size: assetTag ? '100%' : size,\n    ...props,\n  })\n\n  if (assetTag) {\n    return createElement(\n      FrameWrapper,\n      {\n        frame: assetTag,\n        variant: mono ? 'mono' : 'full',\n        size,\n      },\n      icon,\n    )\n  }\n\n  return icon\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,qBAAqB;AAoBvB,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,QAAQ,UAAU,WAAW,aAAa;AAChD,MAAI,CAAC,MAAO,QAAO,cAAc,QAAQ,MAAM,UAAU,IAAI;AAC7D,QAAM,WACJ,WAAW,SACP,SACA,YAAY,SACV,UACA,aAAa,SACX,UACA,cAAc,SACZ,UACA;AAEZ,QAAM,OAAO,cAAc,MAAM;AAAA,IAC/B,OAAO;AAAA,IACP,MAAM;AAAA,IACN;AAAA,IACA,UAAU;AAAA;AAAA;AAAA,IAGV,MAAM,WAAW,SAAS;AAAA,IAC1B,GAAG;AAAA,EACL,CAAC;AAED,MAAI,UAAU;AACZ,WAAO;AAAA,MACL;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,SAAS,OAAO,SAAS;AAAA,QACzB;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;","names":[]}

package/dist/frames.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkIEWJOWAPcjs = require('./chunk-IEWJOWAP.cjs');
+
+
+exports.FrameWrapper = _chunkIEWJOWAPcjs.FrameWrapper;
+//# sourceMappingURL=frames.cjs.map

package/dist/frames.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/icons/icons/packages/react/dist/frames.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,sDAAC","file":"/home/runner/work/icons/icons/packages/react/dist/frames.cjs"}

package/dist/frames.d.cts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+interface FrameWrapperProps {
+    frame: string;
+    variant?: 'full' | 'mono';
+    size?: number | string;
+    children?: ReactNode;
+}
+declare function FrameWrapper({ frame, variant, size, children, }: FrameWrapperProps): react.DetailedReactHTMLElement<react.HTMLAttributes<HTMLElement>, HTMLElement> | react.DetailedReactHTMLElement<{
+    style: CSSProperties;
+}, HTMLElement>;
+
+export { FrameWrapper, type FrameWrapperProps };

package/dist/frames.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+interface FrameWrapperProps {
+    frame: string;
+    variant?: 'full' | 'mono';
+    size?: number | string;
+    children?: ReactNode;
+}
+declare function FrameWrapper({ frame, variant, size, children, }: FrameWrapperProps): react.DetailedReactHTMLElement<react.HTMLAttributes<HTMLElement>, HTMLElement> | react.DetailedReactHTMLElement<{
+    style: CSSProperties;
+}, HTMLElement>;
+
+export { FrameWrapper, type FrameWrapperProps };

package/dist/frames.js

@@ -0,0 +1,9 @@
+"use client";
+
+import {
+  FrameWrapper
+} from "./chunk-OPA5IJQV.js";
+export {
+  FrameWrapper
+};
+//# sourceMappingURL=frames.js.map

package/dist/frames.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}