@particle-network/icons 0.4.0-beta.0 → 0.4.0-beta.10

package/dist/web/MarketStatsIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const MarketStatsIcon_MarketStatsIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const MarketStatsIcon_MarketStatsIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M11.5107 2.1604C11.7725 1.94738 12.1431 1.94666 12.4062 2.15845L21.7226 9.67212C22.0365 9.92552 22.0919 10.3923 21.8456 10.7151C21.7027 10.902 21.4907 11.0002 21.2763 11.0002C21.1201 11.0002 20.9625 10.948 20.83 10.8411L11.9608 3.6897L5.77725 8.71899C5.81098 8.80529 5.83028 8.89959 5.82999 8.99829C5.81714 12.9219 5.80507 18.5637 5.81631 20.5139H17.9989V11.5549C17.999 11.1446 18.3224 10.8118 18.7216 10.8118C19.1207 10.8118 19.4442 11.1446 19.4442 11.5549V21.2571C19.444 21.6672 19.1206 22.0002 18.7216 22.0002H5.10733C4.91536 22.0002 4.72998 21.9205 4.59464 21.7805C4.38714 21.5661 4.38225 21.3331 4.37784 21.1282C4.37583 21.034 4.37416 20.8969 4.37296 20.7239C4.37055 20.4019 4.36888 19.9308 4.36807 19.3245C4.36647 18.3048 4.36721 16.8862 4.37003 15.1086C4.37303 13.0521 4.37847 10.9798 4.38174 9.85376L3.17081 10.8401C2.85796 11.0946 2.40251 11.04 2.15518 10.718C1.90797 10.396 1.96114 9.92833 2.27432 9.67407L11.5107 2.1604ZM8.96378 13.7004C9.36286 13.7004 9.68631 14.0334 9.68643 14.4436V18.7786C9.68623 19.1887 9.36281 19.5208 8.96378 19.5208C8.56486 19.5206 8.24132 19.1886 8.24112 18.7786V14.4436C8.24124 14.0335 8.56481 13.7006 8.96378 13.7004ZM11.9755 13.7004C12.3746 13.7004 12.698 14.0334 12.6982 14.4436V18.7786C12.6979 19.1887 12.3745 19.5208 11.9755 19.5208C11.5766 19.5206 11.253 19.1886 11.2528 18.7786V14.4436C11.253 14.0335 11.5765 13.7006 11.9755 13.7004ZM15.1483 12.4622C15.5474 12.4623 15.8709 12.7951 15.871 13.2053V18.7786C15.8708 19.1886 15.5473 19.5206 15.1483 19.5208C14.7493 19.5208 14.4259 19.1887 14.4257 18.7786V13.2053C14.4258 12.7951 14.7492 12.4622 15.1483 12.4622ZM15.3173 8.18579C15.6189 7.91706 16.0754 7.95098 16.3368 8.26099C16.5982 8.571 16.5661 9.04013 16.2646 9.30884L13.2528 11.9915C12.9641 12.2486 12.5296 12.2311 12.2626 11.9504L10.8407 10.4563L8.24991 12.2903C8.12962 12.3755 7.98683 12.421 7.84073 12.4211C7.61103 12.4211 7.3842 12.3086 7.24405 12.0989C7.01795 11.7609 7.101 11.298 7.4296 11.0657L10.5224 8.87817C10.8119 8.67354 11.2024 8.71258 11.4482 8.97095L12.8202 10.4104L15.3173 8.18579Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/MarketTrendIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const MarketTrendIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default MarketTrendIcon;

package/dist/web/MarketTrendIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const MarketTrendIcon_MarketTrendIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const MarketTrendIcon_MarketTrendIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M19.1572 3.24658C20.173 3.24666 20.9999 4.07347 21 5.08936V15.6313C20.9998 16.647 20.1729 17.474 19.1572 17.4741H12.7031V19.3472H16.5098C16.8979 19.3472 17.2128 19.6622 17.2129 20.0503C17.2129 20.4384 16.8979 20.7534 16.5098 20.7534H7.49023C7.10205 20.7534 6.78711 20.4384 6.78711 20.0503C6.78725 19.6622 7.10213 19.3472 7.49023 19.3472H11.2969V17.4741H4.84277C3.82699 17.474 3.00023 16.647 3 15.6313V5.08936C3.00007 4.07346 3.82688 3.24665 4.84277 3.24658H19.1572ZM4.84375 4.65283C4.60446 4.65283 4.4064 4.8501 4.40625 5.08936V15.6313C4.40637 15.8706 4.60444 16.0679 4.84375 16.0679H19.1582C19.3973 16.0677 19.5946 15.8705 19.5947 15.6313V5.08936C19.5946 4.85022 19.3973 4.65304 19.1582 4.65283H4.84375ZM16.5078 7.23975C16.749 6.99912 17.1399 6.99878 17.3809 7.23975C17.6216 7.48073 17.6214 7.8717 17.3809 8.11279L13.6758 11.8179C13.4879 12.0057 13.2005 12.0518 12.9629 11.9331L10.8906 10.897L7.50098 14.2876C7.25988 14.5286 6.86906 14.5286 6.62793 14.2876C6.38681 14.0465 6.38685 13.6557 6.62793 13.4146L10.333 9.70947L10.4072 9.646C10.5913 9.51291 10.837 9.49039 11.0449 9.59424L13.1172 10.6294L16.5078 7.23975Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/MenuIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const MenuIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default MenuIcon;

package/dist/web/MenuIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const MenuIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const MenuIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M4.66667 17.5H19.3333C19.8375 17.5 20.25 17.0875 20.25 16.5833C20.25 16.0792 19.8375 15.6667 19.3333 15.6667H4.66667C4.1625 15.6667 3.75 16.0792 3.75 16.5833C3.75 17.0875 4.1625 17.5 4.66667 17.5ZM4.66667 12.9167H19.3333C19.8375 12.9167 20.25 12.5042 20.25 12C20.25 11.4958 19.8375 11.0833 19.3333 11.0833H4.66667C4.1625 11.0833 3.75 11.4958 3.75 12C3.75 12.5042 4.1625 12.9167 4.66667 12.9167ZM3.75 7.41667C3.75 7.92083 4.1625 8.33333 4.66667 8.33333H19.3333C19.8375 8.33333 20.25 7.92083 20.25 7.41667C20.25 6.9125 19.8375 6.5 19.3333 6.5H4.66667C4.1625 6.5 3.75 6.9125 3.75 7.41667Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/MoonIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const MoonIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default MoonIcon;

package/dist/web/MoonIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const MoonIcon_MoonIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const MoonIcon_MoonIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.709 21.8015C12.5548 21.8015 12.4006 21.8015 12.242 21.7927C7.13653 21.5637 2.87239 17.4537 2.51558 12.4407C2.20722 8.13691 4.69611 4.11505 8.70475 2.4323C9.84567 1.95655 10.4448 2.32217 10.7003 2.58648C10.9558 2.84197 11.3126 3.43226 10.8368 4.52032C10.4183 5.48503 10.2069 6.51583 10.2157 7.57305C10.2333 11.6125 13.59 15.0397 17.6824 15.2027C18.277 15.2291 18.8585 15.1851 19.4224 15.0838C20.625 14.8635 21.1271 15.3481 21.3166 15.6564C21.506 15.9648 21.7262 16.6299 20.9994 17.6167C19.07 20.2598 15.9996 21.8015 12.709 21.8015ZM3.87235 12.3394C4.18071 16.6784 7.8854 20.2333 12.2949 20.4271C15.2948 20.5725 18.1405 19.2069 19.8893 16.815C20.0259 16.6255 20.0919 16.4846 20.1184 16.4141C20.0347 16.4053 19.8893 16.3965 19.6646 16.4405C18.9995 16.5595 18.3079 16.6035 17.6207 16.5771C12.8059 16.3877 8.86774 12.3482 8.84131 7.58627C8.84131 6.32641 9.088 5.11501 9.59018 3.97408C9.68268 3.77145 9.7003 3.63489 9.70912 3.56441C9.62542 3.56441 9.48005 3.58203 9.24217 3.68335C5.77095 5.14584 3.61686 8.62587 3.87235 12.3394Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/MoveUpRightIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const MoveUpRightIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default MoveUpRightIcon;

package/dist/web/MoveUpRightIcon.js

@@ -1,21 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const MoveUpRightIcon_MoveUpRightIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const MoveUpRightIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M17.4564 4.29443C18.7784 4.18634 19.8811 5.33631 19.6907 6.67139L18.7581 13.1978C18.5146 14.9017 16.4303 15.5965 15.2132 14.3794L13.1917 12.3579L6.06085 19.4897C5.63137 19.9191 4.93574 19.919 4.50616 19.4897C4.07659 19.0602 4.07662 18.3637 4.50616 17.9341L11.637 10.8032L9.61945 8.78564C8.40261 7.56852 9.09731 5.48426 10.8011 5.24072L17.3275 4.30811L17.4564 4.29443Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };
-MoveUpRightIcon_MoveUpRightIcon.displayName = 'MoveUpRightIcon|move-up-right';
-const MoveUpRightIcon = MoveUpRightIcon_MoveUpRightIcon;
-export { MoveUpRightIcon as default };
+MoveUpRightIcon.displayName = 'MoveUpRightIcon|move-up-right';
+const web_MoveUpRightIcon = MoveUpRightIcon;
+export { web_MoveUpRightIcon as default };

package/dist/web/MusicIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const MusicIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default MusicIcon;

package/dist/web/MusicIcon.js

@@ -1,23 +1,23 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const MusicIcon_MusicIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const MusicIcon_MusicIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M16.9121 4.20681C18.2246 3.94439 19.5373 4.76935 19.7998 6.08181C19.8373 6.26903 19.874 6.41896 19.874 6.60623L19.8379 16.9949C19.8602 17.128 19.875 17.2645 19.875 17.4041C19.8374 18.7539 18.7499 19.8416 17.4375 19.8416C16.0876 19.8416 15.0002 18.7539 15 17.4041C15 16.0541 16.0875 14.9666 17.4375 14.9666C17.9059 14.9666 18.3412 15.0996 18.7119 15.3269V8.95095L8.99902 10.9656V17.2937H8.99414C8.99575 17.3303 9 17.3671 9 17.4041C8.99984 18.7539 7.9124 19.8416 6.5625 19.8416C5.25009 19.8416 4.12516 18.7539 4.125 17.4041C4.125 16.0541 5.2125 14.9666 6.5625 14.9666C7.04647 14.9666 7.49554 15.1079 7.87402 15.3494V8.06912C7.87402 6.90666 8.69928 5.93127 9.82422 5.66873L16.9121 4.20681ZM6.5625 16.0916C5.85 16.0916 5.25 16.6916 5.25 17.4041C5.25016 18.1164 5.8501 18.7166 6.5625 18.7166C7.2749 18.7166 7.87484 18.1164 7.875 17.4041C7.875 16.6916 7.3125 16.0916 6.5625 16.0916ZM17.4375 16.0916C16.725 16.0916 16.125 16.6916 16.125 17.4041C16.1252 18.1164 16.7251 18.7166 17.4375 18.7166C18.1499 18.7166 18.7498 18.1164 18.75 17.4041C18.75 17.367 18.7473 17.3301 18.7441 17.2937H18.7119V17.1013C18.5714 16.5295 18.0462 16.0916 17.4375 16.0916ZM17.3994 5.29373C17.3244 5.29373 17.2117 5.29431 17.1367 5.33181L10.0498 6.79373C9.4498 6.90623 8.99902 7.46912 8.99902 8.06912V9.81521L18.7119 7.80154V6.60623C18.7118 5.8938 18.1118 5.29374 17.3994 5.29373Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M16.9121 4.20681L16.8974 4.13327L16.897 4.13336L16.9121 4.20681ZM19.7998 6.08181L19.7263 6.09652L19.7263 6.09652L19.7998 6.08181ZM19.874 6.60623L19.949 6.60649V6.60622L19.874 6.60623ZM19.8379 16.9949L19.7618 16.9946L19.7639 17.0073L19.8379 16.9949ZM19.875 17.4041L19.95 17.4062V17.4041H19.875ZM17.4375 19.8416V19.9166V19.8416ZM15 17.4041H14.925V17.4041L15 17.4041ZM17.4375 14.9666V14.8916V14.9666ZM18.7119 15.3269L18.6727 15.3909L18.7869 15.4609V15.3269H18.7119ZM18.7119 8.95095H18.7869V8.8588L18.6967 8.87751L18.7119 8.95095ZM8.99902 10.9656L8.98379 10.8922L8.92402 10.9046V10.9656H8.99902ZM8.99902 17.2937V17.3687H9.07402V17.2937H8.99902ZM8.99414 17.2937V17.2187H8.91576L8.91921 17.297L8.99414 17.2937ZM9 17.4041L9.075 17.4041V17.4041H9ZM6.5625 19.8416V19.9166V19.8416ZM4.125 17.4041H4.05V17.4041L4.125 17.4041ZM6.5625 14.9666V14.8916V14.9666ZM7.87402 15.3494L7.83368 15.4126L7.94902 15.4862V15.3494H7.87402ZM9.82422 5.66873L9.80906 5.59525L9.80717 5.59569L9.82422 5.66873ZM6.5625 16.0916V16.0166V16.0916ZM5.25 17.4041H5.175V17.4041L5.25 17.4041ZM6.5625 18.7166V18.7916V18.7166ZM7.875 17.4041L7.95 17.4041V17.4041H7.875ZM17.4375 16.0916V16.0166V16.0916ZM16.125 17.4041H16.05V17.4041L16.125 17.4041ZM17.4375 18.7166V18.7916V18.7166ZM18.75 17.4041L18.825 17.4041V17.4041H18.75ZM18.7441 17.2937L18.8189 17.2872L18.8129 17.2187H18.7441V17.2937ZM18.7119 17.2937H18.6369V17.3687H18.7119V17.2937ZM18.7119 17.1013H18.7869V17.0923L18.7847 17.0834L18.7119 17.1013ZM17.3994 5.29373L17.3994 5.21873H17.3994V5.29373ZM17.1367 5.33181L17.1519 5.40526L17.1615 5.40328L17.1703 5.39889L17.1367 5.33181ZM10.0498 6.79373L10.0636 6.86745L10.065 6.86718L10.0498 6.79373ZM8.99902 8.06912H8.92402H8.99902ZM8.99902 9.81521H8.92402V9.90735L9.01425 9.88865L8.99902 9.81521ZM18.7119 7.80154L18.7271 7.87498L18.7869 7.86258V7.80154H18.7119ZM18.7119 6.60623H18.7869V6.60622L18.7119 6.60623ZM16.9121 4.20681L16.9268 4.28036C18.201 4.02559 19.4724 4.82698 19.7263 6.09652L19.7998 6.08181L19.8733 6.0671C19.6023 4.71173 18.2481 3.86319 16.8974 4.13327L16.9121 4.20681ZM19.7998 6.08181L19.7263 6.09652C19.7644 6.28729 19.799 6.42827 19.799 6.60623L19.874 6.60623L19.949 6.60622C19.949 6.40966 19.9101 6.25077 19.8733 6.0671L19.7998 6.08181ZM19.874 6.60623L19.799 6.60596L19.7629 16.9946L19.8379 16.9949L19.9129 16.9952L19.949 6.60649L19.874 6.60623ZM19.8379 16.9949L19.7639 17.0073C19.7858 17.1375 19.8 17.2697 19.8 17.4041H19.875H19.95C19.95 17.2592 19.9347 17.1184 19.9119 16.9825L19.8379 16.9949ZM19.875 17.4041L19.8 17.402C19.7635 18.7132 18.7074 19.7666 17.4375 19.7666V19.8416V19.9166C18.7924 19.9166 19.9112 18.7947 19.95 17.4062L19.875 17.4041ZM17.4375 19.8416V19.7666C16.129 19.7666 15.0752 18.7125 15.075 17.4041L15 17.4041L14.925 17.4041C14.9252 18.7954 16.0462 19.9166 17.4375 19.9166V19.8416ZM15 17.4041H15.075C15.075 16.0955 16.1289 15.0416 17.4375 15.0416V14.9666V14.8916C16.0461 14.8916 14.925 16.0127 14.925 17.4041H15ZM17.4375 14.9666V15.0416C17.8914 15.0416 18.3133 15.1704 18.6727 15.3909L18.7119 15.3269L18.7511 15.263C18.3691 15.0287 17.9203 14.8916 17.4375 14.8916V14.9666ZM18.7119 15.3269H18.7869V8.95095H18.7119H18.6369V15.3269H18.7119ZM18.7119 8.95095L18.6967 8.87751L8.98379 10.8922L8.99902 10.9656L9.01426 11.039L18.7271 9.02439L18.7119 8.95095ZM8.99902 10.9656H8.92402V17.2937H8.99902H9.07402V10.9656H8.99902ZM8.99902 17.2937V17.2187H8.99414V17.2937V17.3687H8.99902V17.2937ZM8.99414 17.2937L8.91921 17.297C8.9212 17.342 8.925 17.368 8.925 17.4041H9H9.075C9.075 17.3663 9.07031 17.3185 9.06907 17.2904L8.99414 17.2937ZM9 17.4041L8.925 17.4041C8.92485 18.7125 7.87097 19.7666 6.5625 19.7666V19.8416V19.9166C7.95383 19.9166 9.07484 18.7954 9.075 17.4041L9 17.4041ZM6.5625 19.8416V19.7666C5.29077 19.7666 4.20016 18.7118 4.2 17.4041L4.125 17.4041L4.05 17.4041C4.05017 18.7961 5.20941 19.9166 6.5625 19.9166V19.8416ZM4.125 17.4041H4.2C4.2 16.0955 5.25392 15.0416 6.5625 15.0416V14.9666V14.8916C5.17108 14.8916 4.05 16.0127 4.05 17.4041H4.125ZM6.5625 14.9666V15.0416C7.03162 15.0416 7.46677 15.1785 7.83368 15.4126L7.87402 15.3494L7.91437 15.2862C7.52431 15.0373 7.06132 14.8916 6.5625 14.8916V14.9666ZM7.87402 15.3494H7.94902V8.06912H7.87402H7.79902V15.3494H7.87402ZM7.87402 8.06912H7.94902C7.94902 6.94371 8.74809 5.99689 9.84126 5.74176L9.82422 5.66873L9.80717 5.59569C8.65048 5.86564 7.79902 6.86961 7.79902 8.06912H7.87402ZM9.82422 5.66873L9.83937 5.74218L16.9273 4.28027L16.9121 4.20681L16.897 4.13336L9.80907 5.59527L9.82422 5.66873ZM6.5625 16.0916V16.0166C5.80858 16.0166 5.175 16.6502 5.175 17.4041H5.25H5.325C5.325 16.733 5.89142 16.1666 6.5625 16.1666V16.0916ZM5.25 17.4041L5.175 17.4041C5.17517 18.1579 5.80866 18.7916 6.5625 18.7916V18.7166V18.6416C5.89154 18.6416 5.32515 18.075 5.325 17.4041L5.25 17.4041ZM6.5625 18.7166V18.7916C7.31634 18.7916 7.94983 18.1579 7.95 17.4041L7.875 17.4041L7.8 17.4041C7.79985 18.075 7.23346 18.6416 6.5625 18.6416V18.7166ZM7.875 17.4041H7.95C7.95 16.6516 7.35531 16.0166 6.5625 16.0166V16.0916V16.1666C7.26969 16.1666 7.8 16.7316 7.8 17.4041H7.875ZM17.4375 16.0916V16.0166C16.6836 16.0166 16.05 16.6502 16.05 17.4041H16.125H16.2C16.2 16.733 16.7664 16.1666 17.4375 16.1666V16.0916ZM16.125 17.4041L16.05 17.4041C16.0502 18.1579 16.6837 18.7916 17.4375 18.7916V18.7166V18.6416C16.7665 18.6416 16.2002 18.075 16.2 17.4041L16.125 17.4041ZM17.4375 18.7166V18.7916C18.1913 18.7916 18.8248 18.1579 18.825 17.4041L18.75 17.4041L18.675 17.4041C18.6748 18.075 18.1085 18.6416 17.4375 18.6416V18.7166ZM18.75 17.4041H18.825C18.825 17.3637 18.8221 17.3241 18.8189 17.2872L18.7441 17.2937L18.6694 17.3002C18.6726 17.3361 18.675 17.3704 18.675 17.4041H18.75ZM18.7441 17.2937V17.2187H18.7119V17.2937V17.3687H18.7441V17.2937ZM18.7119 17.2937H18.7869V17.1013H18.7119H18.6369V17.2937H18.7119ZM18.7119 17.1013L18.7847 17.0834C18.6364 16.4796 18.0823 16.0166 17.4375 16.0166V16.0916V16.1666C18.0101 16.1666 18.5064 16.5794 18.6391 17.1192L18.7119 17.1013ZM17.3994 5.29373V5.21873C17.3621 5.21873 17.3116 5.21882 17.2604 5.2241C17.21 5.22929 17.1526 5.24002 17.1032 5.26473L17.1367 5.33181L17.1703 5.39889C17.1958 5.3861 17.2323 5.37779 17.2758 5.37331C17.3184 5.36892 17.3617 5.36873 17.3994 5.36873V5.29373ZM17.1367 5.33181L17.1216 5.25836L10.0347 6.72027L10.0498 6.79373L10.065 6.86718L17.1519 5.40526L17.1367 5.33181ZM10.0498 6.79373L10.036 6.72001C9.39952 6.83935 8.92402 7.43404 8.92402 8.06912H8.99902H9.07402C9.07402 7.50419 9.50009 6.9731 10.0636 6.86744L10.0498 6.79373ZM8.99902 8.06912H8.92402V9.81521H8.99902H9.07402V8.06912H8.99902ZM8.99902 9.81521L9.01425 9.88865L18.7271 7.87498L18.7119 7.80154L18.6967 7.7281L8.9838 9.74177L8.99902 9.81521ZM18.7119 7.80154H18.7869V6.60623H18.7119H18.6369V7.80154H18.7119ZM18.7119 6.60623L18.7869 6.60622C18.7868 5.85239 18.1533 5.21874 17.3994 5.21873L17.3994 5.29373L17.3994 5.36873C18.0704 5.36874 18.6368 5.93522 18.6369 6.60623L18.7119 6.60623Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/NavAccountUxIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const NavAccountUxIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default NavAccountUxIcon;

package/dist/web/NavAccountUxIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const NavAccountUxIcon_NavAccountUxIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const NavAccountUxIcon_NavAccountUxIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 25 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.7385 3.75C13.6558 3.74997 14.5507 4.03394 15.3002 4.56291C16.0497 5.09189 16.617 5.83992 16.9243 6.70429C17.2316 7.56865 17.2637 8.50695 17.0163 9.39032C16.7689 10.2737 16.2541 11.0588 15.5426 11.6378C16.8961 12.0413 18.0832 12.871 18.9273 14.0035C19.7713 15.136 20.2271 16.5107 20.2269 17.9231C20.2269 18.5402 19.9818 19.1321 19.5454 19.5685C19.109 20.0048 18.5171 20.25 17.9 20.25H7.57692C6.98611 20.2487 6.4178 20.0233 5.98681 19.6191C5.55583 19.215 5.29431 18.6624 5.25508 18.0728L5.25 17.9231C5.24987 16.5105 5.70569 15.1356 6.54967 14.0029C7.39365 12.8701 8.58071 12.0401 9.93431 11.6362C9.22345 11.0569 8.70925 10.2719 8.46226 9.38888C8.21527 8.50582 8.24759 7.56796 8.5548 6.704C8.86201 5.84004 9.42904 5.09231 10.1781 4.56342C10.9271 4.03453 11.8215 3.7504 12.7385 3.75ZM13.6692 12.6346H11.8077C8.88677 12.6346 6.51923 15.0022 6.51923 17.8994L6.52177 18.0026C6.54183 18.2687 6.66172 18.5173 6.8574 18.6987C7.05308 18.8801 7.3101 18.9809 7.57692 18.9808H17.9C18.4838 18.9808 18.9577 18.5069 18.9577 17.9231C18.9577 16.5205 18.4005 15.1753 17.4087 14.1836C16.417 13.1918 15.0718 12.6346 13.6692 12.6346ZM12.7385 5.01923C11.8969 5.01923 11.0898 5.35354 10.4948 5.9486C9.89969 6.54367 9.56538 7.35076 9.56538 8.19231C9.56538 9.03386 9.89969 9.84094 10.4948 10.436C11.0898 11.0311 11.8969 11.3654 12.7385 11.3654C13.58 11.3654 14.3871 11.0311 14.9822 10.436C15.5772 9.84094 15.9115 9.03386 15.9115 8.19231C15.9115 7.35076 15.5772 6.54367 14.9822 5.9486C14.3871 5.35354 13.58 5.01923 12.7385 5.01923Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/NavCryptoUxIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const NavCryptoUxIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default NavCryptoUxIcon;

package/dist/web/NavCryptoUxIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const NavCryptoUxIcon_NavCryptoUxIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const NavCryptoUxIcon_NavCryptoUxIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 25 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M19.2003 6.68914L13.4448 3.81971L13.4433 3.81908C13.1496 3.67459 12.8267 3.5995 12.4993 3.59961C12.172 3.59972 11.8491 3.67502 11.5555 3.81971L5.80147 6.6883C5.44771 6.86167 5.14982 7.13101 4.94181 7.46557C4.73379 7.80014 4.62403 8.18644 4.62505 8.5804V15.4075C4.62043 16.2156 5.0671 16.9434 5.79265 17.308L11.5479 20.1774C11.8426 20.3239 12.1673 20.4 12.4965 20.3996C12.8255 20.3999 13.1502 20.3239 13.4448 20.1774L19.1988 17.3088C19.5525 17.1354 19.8504 16.8661 20.0584 16.5315C20.2664 16.197 20.3761 15.8107 20.375 15.4167V8.58019C20.3761 8.1866 20.2665 7.80063 20.0588 7.46631C19.8511 7.13199 19.5536 6.86277 19.2003 6.68935V6.68914ZM19.0136 15.4167C19.0136 15.7053 18.8523 15.9646 18.5915 16.0938L12.8356 18.9634C12.7301 19.0157 12.614 19.043 12.4962 19.043C12.3785 19.043 12.2624 19.0157 12.1569 18.9634L6.40354 16.0946C6.27713 16.0318 6.17097 15.9347 6.09721 15.8143C6.02345 15.694 5.98507 15.5553 5.98648 15.4142V8.58082C5.98648 8.29186 6.14797 8.03272 6.40879 7.90336L12.1628 5.03477C12.2677 4.983 12.3831 4.95613 12.5 4.95623C12.6169 4.95608 12.7322 4.98288 12.8371 5.03456L18.593 7.9042C18.7194 7.96616 18.8259 8.06241 18.9002 8.18197C18.9746 8.30153 19.0139 8.43959 19.0136 8.5804V15.4163V15.4167ZM20.073 7.50205C19.9919 7.34087 19.8502 7.21841 19.679 7.16153C19.5078 7.10465 19.321 7.11798 19.1595 7.1986L12.5 10.5187L5.84053 7.19881C5.67913 7.11826 5.49237 7.10496 5.32119 7.16184C5.15 7.21872 5.00834 7.34113 4.92724 7.50226C4.88731 7.58202 4.86351 7.66887 4.8572 7.75784C4.8509 7.84681 4.86221 7.93615 4.8905 8.02074C4.91879 8.10533 4.96349 8.1835 5.02205 8.25078C5.0806 8.31806 5.15186 8.37313 5.23174 8.41282L12.1955 11.8847C12.2901 11.9319 12.3943 11.9564 12.4999 11.9564C12.6056 11.9564 12.7098 11.9319 12.8043 11.8847L19.7683 8.41261C19.8482 8.37292 19.9195 8.31785 19.978 8.25057C20.0366 8.18329 20.0813 8.10512 20.1096 8.02053C20.1378 7.93594 20.1492 7.8466 20.1429 7.75763C20.1366 7.66866 20.1128 7.58181 20.0728 7.50205H20.073ZM12.5 10.5989C12.3198 10.5987 12.1468 10.6701 12.0192 10.7973C11.8916 10.9246 11.8197 11.0974 11.8194 11.2776V19.7137C11.8197 19.894 11.8916 20.0667 12.0192 20.194C12.1468 20.3213 12.3198 20.3927 12.5 20.3924C12.5893 20.3926 12.6777 20.3751 12.7602 20.3411C12.8428 20.3071 12.9178 20.2571 12.981 20.1941C13.0442 20.1311 13.0944 20.0562 13.1287 19.9738C13.163 19.8914 13.1807 19.803 13.1808 19.7137V11.2776C13.1807 11.1884 13.163 11.1 13.1287 11.0176C13.0944 10.9352 13.0442 10.8603 12.981 10.7973C12.9178 10.7342 12.8428 10.6843 12.7602 10.6503C12.6777 10.6162 12.5893 10.5988 12.5 10.5989Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/NavEarnIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const NavEarnIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default NavEarnIcon;

package/dist/web/NavEarnIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const NavEarnIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const NavEarnIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M10.9769 4.80424H7.56313C7.32688 4.80424 7.14563 4.75667 7.01938 4.66208C6.89251 4.56599 6.80048 4.44021 6.75437 4.29991C6.70138 4.13948 6.67569 3.97323 6.67812 3.8064C6.67812 3.62369 6.695 3.45234 6.72937 3.29126C6.74562 3.13018 6.77938 2.9545 6.83 2.76477C6.87174 2.59498 6.94453 2.43203 7.04562 2.28207C7.13812 2.15017 7.26062 2.06207 7.41187 2.01882C7.56375 1.97558 7.74937 2.0118 7.96812 2.12801C8.22187 2.2599 8.50812 2.40207 8.82875 2.55558C9.14937 2.7091 9.46062 2.86261 9.76437 3.01612C10.0675 3.16964 10.3494 3.30802 10.6112 3.43288C10.8725 3.55721 11.0706 3.65613 11.205 3.7291C11.3737 3.8318 11.5006 3.94478 11.5844 4.06856C11.6687 4.19289 11.7025 4.30964 11.6856 4.41992C11.6764 4.47544 11.6536 4.52862 11.6186 4.57588C11.5837 4.62315 11.5375 4.66341 11.4831 4.69397C11.365 4.76694 11.1969 4.8037 10.9775 4.8037L10.9769 4.80424ZM12.9487 4.78262H16.3369C16.5731 4.78262 16.7544 4.73505 16.8806 4.63992C17.0069 4.54532 17.0956 4.42424 17.1462 4.27775C17.1969 4.13181 17.2225 3.96694 17.2225 3.78478C17.2225 3.60207 17.2138 3.43018 17.1975 3.26964C17.161 3.09766 17.1229 2.92594 17.0831 2.7545C17.0481 2.58817 16.9795 2.42845 16.8806 2.28261C16.7998 2.15913 16.6695 2.06549 16.5144 2.01936C16.3625 1.97612 16.1769 2.00531 15.9581 2.10693C15.6742 2.25379 15.3872 2.39634 15.0975 2.5345C14.7775 2.68801 14.4613 2.84153 14.1494 2.99504C13.8375 3.14856 13.5506 3.28694 13.2894 3.4118C13.0937 3.50157 12.9039 3.60045 12.7206 3.70802C12.535 3.81072 12.4 3.92424 12.3162 4.04748C12.2319 4.17181 12.1975 4.28856 12.215 4.39883C12.2241 4.45431 12.2469 4.50746 12.2817 4.55472C12.3165 4.60199 12.3626 4.64227 12.4169 4.67289C12.5356 4.74586 12.7119 4.78262 12.9481 4.78262H12.9487ZM10.6225 6.22965H3.29C2.75 6.22965 2.40062 6.30641 2.24 6.45992C2.08 6.61344 2 6.8583 2 7.19506V9.1248C2 9.49021 2.08875 9.76048 2.26562 9.93616C2.4425 10.1118 2.79188 10.1994 3.315 10.1994H10.6212V6.22965H10.6225ZM13.3787 6.22965H20.61C21.1494 6.22965 21.5163 6.32155 21.71 6.50425C21.9038 6.68695 22 6.94641 22 7.28263V9.16913C22 9.51994 21.9113 9.7794 21.7344 9.94751C21.5575 10.1151 21.2081 10.1994 20.685 10.1994H13.3787V6.22965ZM10.6225 11.3621H2.86V19.653C2.86 20.3989 3.10437 20.9768 3.59312 21.3859C4.08187 21.7951 4.84063 22 5.86938 22H10.6225V11.3621ZM13.3787 11.3621H21.1162V19.587C21.0987 20.333 20.8544 20.9216 20.3825 21.353C19.9106 21.7843 19.1606 22 18.1325 22H13.3794V11.3632L13.3781 11.3621H13.3787Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/NavHomeIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const NavHomeIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default NavHomeIcon;

package/dist/web/NavHomeIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const NavHomeIcon_NavHomeIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const NavHomeIcon_NavHomeIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M10.9004 2.4C11.6003 2.00013 12.3997 2.00013 13.0996 2.4L21.0996 7.69981C21.6996 8.09981 22 8.7 22 9.4V20.9C21.9999 21.4998 21.5999 21.9 21 21.9H3C2.4001 21.9 2.00014 21.4998 2 20.9V9.4C2 8.7 2.30039 8.09981 2.90039 7.69981L10.9004 2.4ZM11 17.9H13V11.9H11V17.9Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/NavHomeUxIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const NavHomeUxIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default NavHomeUxIcon;

package/dist/web/NavHomeUxIcon.js

@@ -1,23 +1,23 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const NavHomeUxIcon_NavHomeUxIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const NavHomeUxIcon_NavHomeUxIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M12 4.15869C12.358 4.15869 12.7038 4.28712 12.9756 4.52002L18.9756 9.6626C19.1398 9.80328 19.2719 9.97793 19.3623 10.1743C19.4527 10.3708 19.4999 10.585 19.5 10.8013V18.3413C19.5 18.7391 19.3417 19.1206 19.0605 19.4019C18.7792 19.6832 18.3978 19.8413 18 19.8413H6C5.60218 19.8413 5.22076 19.6832 4.93945 19.4019C4.65825 19.1206 4.5 18.7391 4.5 18.3413V10.8013C4.49992 10.5849 4.54638 10.3709 4.63672 10.1743C4.72717 9.97753 4.85995 9.80254 5.02441 9.66162L11.0244 4.52002C11.2962 4.28712 11.642 4.15869 12 4.15869ZM12 5.15869C11.8808 5.15869 11.7654 5.20134 11.6748 5.27881L5.6748 10.4214C5.61997 10.4683 5.57611 10.5268 5.5459 10.5923C5.51574 10.6578 5.50005 10.7292 5.5 10.8013V18.3413C5.5 18.4069 5.51302 18.4721 5.53809 18.5327C5.56318 18.5933 5.60013 18.6484 5.64648 18.6948C5.69287 18.7412 5.748 18.7781 5.80859 18.8032C5.86926 18.8283 5.93434 18.8413 6 18.8413H18C18.0657 18.8413 18.1307 18.8284 18.1914 18.8032C18.252 18.7781 18.3071 18.7412 18.3535 18.6948C18.3999 18.6484 18.4368 18.5933 18.4619 18.5327C18.487 18.4721 18.5 18.4069 18.5 18.3413V10.8013C18.5 10.7292 18.4843 10.6578 18.4541 10.5923C18.4239 10.5268 18.38 10.4683 18.3252 10.4214L12.3252 5.27881C12.2346 5.20134 12.1192 5.15869 12 5.15869ZM14.5 15.146C14.6326 15.146 14.7597 15.1987 14.8535 15.2925C14.9472 15.3862 15 15.5134 15 15.646C14.9999 15.7785 14.9472 15.9058 14.8535 15.9995C14.7598 16.0932 14.6326 16.146 14.5 16.146H9.5C9.36745 16.146 9.24024 16.0932 9.14648 15.9995C9.05277 15.9058 9.00006 15.7785 9 15.646C9 15.5134 9.05279 15.3862 9.14648 15.2925C9.24025 15.1987 9.36739 15.146 9.5 15.146H14.5Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M12 4.15869L12 3.93369L12 3.93369L12 4.15869ZM12.9756 4.52002L13.122 4.34918L13.122 4.34916L12.9756 4.52002ZM18.9756 9.6626L18.8292 9.83343L18.8292 9.83345L18.9756 9.6626ZM19.3623 10.1743L19.5667 10.0803L19.5667 10.0802L19.3623 10.1743ZM19.5 10.8013L19.725 10.8013L19.725 10.8012L19.5 10.8013ZM19.0605 19.4019L19.2196 19.561L19.2197 19.5609L19.0605 19.4019ZM6 19.8413L6 20.0663H6V19.8413ZM4.93945 19.4019L4.78033 19.5609L4.78035 19.561L4.93945 19.4019ZM4.5 18.3413H4.275H4.5ZM4.5 10.8013L4.725 10.8013L4.725 10.8012L4.5 10.8013ZM4.63672 10.1743L4.43228 10.0803L4.43227 10.0804L4.63672 10.1743ZM5.02441 9.66162L5.17081 9.83248L5.17082 9.83247L5.02441 9.66162ZM11.0244 4.52002L10.878 4.34916L10.878 4.34917L11.0244 4.52002ZM12 5.15869L12 4.93369L12 4.93369L12 5.15869ZM11.6748 5.27881L11.5286 5.10782L11.5284 5.10797L11.6748 5.27881ZM5.6748 10.4214L5.82105 10.5924L5.82123 10.5922L5.6748 10.4214ZM5.5459 10.5923L5.34156 10.4981L5.34153 10.4982L5.5459 10.5923ZM5.5 10.8013L5.275 10.8011V10.8013H5.5ZM5.53809 18.5327L5.33017 18.6187L5.33021 18.6188L5.53809 18.5327ZM5.64648 18.6948L5.48731 18.8538L5.48739 18.8539L5.64648 18.6948ZM5.80859 18.8032L5.72241 19.0111L5.72249 19.0111L5.80859 18.8032ZM6 18.8413L6 19.0663H6V18.8413ZM18 18.8413V18.6163V18.8413ZM18.1914 18.8032L18.2775 19.0111L18.2776 19.0111L18.1914 18.8032ZM18.3535 18.6948L18.5126 18.8539L18.5127 18.8538L18.3535 18.6948ZM18.4619 18.5327L18.6698 18.6188L18.6698 18.6187L18.4619 18.5327ZM18.5 10.8013L18.725 10.8013L18.725 10.8011L18.5 10.8013ZM18.4541 10.5923L18.6585 10.4982L18.6584 10.4981L18.4541 10.5923ZM18.3252 10.4214L18.1788 10.5922L18.1789 10.5924L18.3252 10.4214ZM12.3252 5.27881L12.4716 5.10797L12.4714 5.10782L12.3252 5.27881ZM14.5 15.146V14.921V15.146ZM14.8535 15.2925L15.0127 15.1334L15.0126 15.1334L14.8535 15.2925ZM15 15.646L15.225 15.6461V15.646L15 15.646ZM14.8535 15.9995L15.0126 16.1587L15.0126 16.1586L14.8535 15.9995ZM14.5 16.146L14.5 16.371L14.5 16.146ZM9.5 16.146L9.5 16.371H9.5V16.146ZM9.14648 15.9995L8.98739 16.1586L8.98744 16.1587L9.14648 15.9995ZM9 15.646L8.775 15.646L8.775 15.6461L9 15.646ZM9.14648 15.2925L8.98739 15.1334L8.98733 15.1334L9.14648 15.2925ZM9.5 15.146L9.5 14.921L9.5 14.921L9.5 15.146ZM12 4.15869V4.38369C12.304 4.38369 12.598 4.49277 12.8292 4.69088L12.9756 4.52002L13.122 4.34916C12.8096 4.08148 12.4119 3.93369 12 3.93369V4.15869ZM12.9756 4.52002L12.8292 4.69086L18.8292 9.83343L18.9756 9.6626L19.122 9.49176L13.122 4.34918L12.9756 4.52002ZM18.9756 9.6626L18.8292 9.83345C18.9688 9.9531 19.0811 10.1016 19.1579 10.2684L19.3623 10.1743L19.5667 10.0802C19.4626 9.85427 19.3107 9.65347 19.122 9.49174L18.9756 9.6626ZM19.3623 10.1743L19.1579 10.2684C19.2348 10.4356 19.2749 10.6177 19.275 10.8013L19.5 10.8013L19.725 10.8012C19.7249 10.5523 19.6706 10.3061 19.5667 10.0803L19.3623 10.1743ZM19.5 10.8013H19.275V18.3413H19.5H19.725V10.8013H19.5ZM19.5 18.3413H19.275C19.275 18.6793 19.1405 19.0036 18.9014 19.2428L19.0605 19.4019L19.2197 19.5609C19.543 19.2375 19.725 18.7988 19.725 18.3413H19.5ZM19.0605 19.4019L18.9014 19.2428C18.6623 19.4819 18.3381 19.6163 18 19.6163V19.8413V20.0663C18.4576 20.0663 18.8962 19.8844 19.2196 19.561L19.0605 19.4019ZM18 19.8413V19.6163H6V19.8413V20.0663H18V19.8413ZM6 19.8413L6 19.6163C5.66191 19.6163 5.3377 19.4819 5.09855 19.2428L4.93945 19.4019L4.78035 19.561C5.10381 19.8844 5.54244 20.0663 6 20.0663L6 19.8413ZM4.93945 19.4019L5.09858 19.2428C4.85949 19.0036 4.725 18.6793 4.725 18.3413H4.5H4.275C4.275 18.7988 4.45702 19.2375 4.78033 19.5609L4.93945 19.4019ZM4.5 18.3413H4.725V10.8013H4.5H4.275V18.3413H4.5ZM4.5 10.8013L4.725 10.8012C4.72493 10.6171 4.76447 10.4352 4.84117 10.2683L4.63672 10.1743L4.43227 10.0804C4.32829 10.3067 4.2749 10.5527 4.275 10.8014L4.5 10.8013ZM4.63672 10.1743L4.84116 10.2683C4.91788 10.1014 5.03072 9.95252 5.17081 9.83248L5.02441 9.66162L4.87801 9.49076C4.68918 9.65257 4.53647 9.85368 4.43228 10.0803L4.63672 10.1743ZM5.02441 9.66162L5.17082 9.83247L11.1708 4.69087L11.0244 4.52002L10.878 4.34917L4.87801 9.49077L5.02441 9.66162ZM11.0244 4.52002L11.1708 4.69088C11.402 4.49277 11.696 4.38369 12 4.38369L12 4.15869L12 3.93369C11.5881 3.93369 11.1904 4.08148 10.878 4.34916L11.0244 4.52002ZM12 5.15869L12 4.93369C11.8272 4.93369 11.6599 4.99551 11.5286 5.10782L11.6748 5.27881L11.8211 5.44979C11.8709 5.40718 11.9345 5.38369 12 5.38369L12 5.15869ZM11.6748 5.27881L11.5284 5.10797L5.52838 10.2506L5.6748 10.4214L5.82123 10.5922L11.8212 5.44965L11.6748 5.27881ZM5.6748 10.4214L5.52855 10.2504C5.44858 10.3188 5.38511 10.4036 5.34156 10.4981L5.5459 10.5923L5.75023 10.6865C5.76711 10.6499 5.79136 10.6178 5.82105 10.5924L5.6748 10.4214ZM5.5459 10.5923L5.34153 10.4982C5.29781 10.5931 5.27507 10.6966 5.275 10.8011L5.5 10.8013L5.725 10.8014C5.72503 10.7618 5.73367 10.7224 5.75027 10.6864L5.5459 10.5923ZM5.5 10.8013H5.275V18.3413H5.5H5.725V10.8013H5.5ZM5.5 18.3413H5.275C5.275 18.4365 5.29388 18.531 5.33017 18.6187L5.53809 18.5327L5.746 18.4467C5.73216 18.4133 5.725 18.3772 5.725 18.3413H5.5ZM5.53809 18.5327L5.33021 18.6188C5.3667 18.7069 5.42029 18.7868 5.48731 18.8538L5.64648 18.6948L5.80566 18.5358C5.77998 18.5101 5.75966 18.4797 5.74596 18.4466L5.53809 18.5327ZM5.64648 18.6948L5.48739 18.8539C5.55459 18.9211 5.63449 18.9746 5.72241 19.0111L5.80859 18.8032L5.89478 18.5954C5.86152 18.5816 5.83114 18.5613 5.80558 18.5357L5.64648 18.6948ZM5.80859 18.8032L5.72249 19.0111C5.81042 19.0475 5.90476 19.0663 6 19.0663L6 18.8413L6 18.6163C5.96392 18.6163 5.92809 18.6092 5.8947 18.5953L5.80859 18.8032ZM6 18.8413V19.0663H18V18.8413V18.6163H6V18.8413ZM18 18.8413L18 19.0663C18.0952 19.0663 18.1896 19.0475 18.2775 19.0111L18.1914 18.8032L18.1053 18.5953C18.0719 18.6092 18.0361 18.6163 18 18.6163L18 18.8413ZM18.1914 18.8032L18.2776 19.0111C18.3655 18.9746 18.4454 18.9211 18.5126 18.8539L18.3535 18.6948L18.1944 18.5357C18.1689 18.5613 18.1385 18.5816 18.1052 18.5954L18.1914 18.8032ZM18.3535 18.6948L18.5127 18.8538C18.5797 18.7868 18.6333 18.7069 18.6698 18.6188L18.4619 18.5327L18.254 18.4466C18.2403 18.4797 18.22 18.5101 18.1943 18.5358L18.3535 18.6948ZM18.4619 18.5327L18.6698 18.6187C18.7061 18.531 18.725 18.4365 18.725 18.3413H18.5H18.275C18.275 18.3772 18.2678 18.4133 18.254 18.4467L18.4619 18.5327ZM18.5 18.3413H18.725V10.8013H18.5H18.275V18.3413H18.5ZM18.5 10.8013L18.725 10.8011C18.7249 10.6966 18.7022 10.5931 18.6585 10.4982L18.4541 10.5923L18.2497 10.6864C18.2663 10.7224 18.275 10.7618 18.275 10.8014L18.5 10.8013ZM18.4541 10.5923L18.6584 10.4981C18.6149 10.4036 18.5514 10.3188 18.4714 10.2504L18.3252 10.4214L18.1789 10.5924C18.2086 10.6178 18.2329 10.6499 18.2498 10.6865L18.4541 10.5923ZM18.3252 10.4214L18.4716 10.2506L12.4716 5.10797L12.3252 5.27881L12.1788 5.44965L18.1788 10.5922L18.3252 10.4214ZM12.3252 5.27881L12.4714 5.10782C12.3401 4.99551 12.1728 4.93369 12 4.93369V5.15869V5.38369C12.0655 5.38369 12.1291 5.40718 12.1789 5.44979L12.3252 5.27881ZM14.5 15.146L14.5 15.371C14.5729 15.371 14.6428 15.4 14.6944 15.4516L14.8535 15.2925L15.0126 15.1334C14.8767 14.9975 14.6923 14.921 14.5 14.921L14.5 15.146ZM14.8535 15.2925L14.6944 15.4515C14.746 15.5032 14.775 15.5732 14.775 15.646L15 15.646L15.225 15.646C15.225 15.4537 15.1484 15.2693 15.0127 15.1334L14.8535 15.2925ZM15 15.646L14.775 15.6459C14.775 15.7188 14.7459 15.7889 14.6944 15.8404L14.8535 15.9995L15.0126 16.1586C15.1485 16.0227 15.2249 15.8382 15.225 15.6461L15 15.646ZM14.8535 15.9995L14.6945 15.8404C14.6428 15.892 14.5728 15.921 14.5 15.921L14.5 16.146L14.5 16.371C14.6923 16.371 14.8767 16.2944 15.0126 16.1587L14.8535 15.9995ZM14.5 16.146V15.921H9.5V16.146V16.371H14.5V16.146ZM9.5 16.146L9.5 15.921C9.42724 15.921 9.3572 15.892 9.30553 15.8404L9.14648 15.9995L8.98744 16.1587C9.12329 16.2944 9.30766 16.371 9.5 16.371L9.5 16.146ZM9.14648 15.9995L9.30558 15.8404C9.25408 15.7889 9.22504 15.7188 9.225 15.6459L9 15.646L8.775 15.6461C8.77509 15.8382 8.85147 16.0227 8.98739 16.1586L9.14648 15.9995ZM9 15.646H9.225C9.225 15.5732 9.25401 15.5032 9.30564 15.4515L9.14648 15.2925L8.98733 15.1334C8.85158 15.2693 8.775 15.4537 8.775 15.646H9ZM9.14648 15.2925L9.30558 15.4516C9.3572 15.4 9.42713 15.371 9.5 15.371L9.5 15.146L9.5 14.921C9.30766 14.921 9.12331 14.9975 8.98739 15.1334L9.14648 15.2925ZM9.5 15.146V15.371H14.5V15.146V14.921H9.5V15.146Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/NavMarketIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const NavMarketIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default NavMarketIcon;

package/dist/web/NavMarketIcon.js

@@ -1,23 +1,23 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const NavMarketIcon_NavMarketIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const NavMarketIcon_NavMarketIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M11.9982 2C6.45276 2 1.9982 6.45456 1.9982 12C1.9982 17.5455 6.45276 22.0001 11.9982 22.0001C17.5437 22.0001 21.9983 17.5455 21.9983 12C21.9983 6.45456 17.5437 2 11.9982 2ZM16.9528 7.36365L15.1346 13.3182C14.8619 14.1819 14.18 14.9091 13.3164 15.1364L7.36185 16.9546C7.18003 17 6.99821 16.8182 7.04367 16.6364L8.86185 10.6818C9.13458 9.8182 9.8164 9.09093 10.68 8.86365L16.6346 7.04547C16.8164 7.00001 16.9982 7.18183 16.9528 7.36365Z",
-                fill: _color
+                fill: "currentColor"
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M10.862 11.9999C10.862 12.3013 10.9817 12.5903 11.1948 12.8034C11.4079 13.0165 11.697 13.1363 11.9984 13.1363C12.2997 13.1363 12.5888 13.0165 12.8019 12.8034C13.015 12.5903 13.1347 12.3013 13.1347 11.9999C13.1347 11.8507 13.1053 11.7029 13.0482 11.565C12.9911 11.4272 12.9074 11.3019 12.8019 11.1964C12.6964 11.0908 12.5711 11.0071 12.4332 10.95C12.2954 10.8929 12.1476 10.8635 11.9984 10.8635C11.8491 10.8635 11.7014 10.8929 11.5635 10.95C11.4256 11.0071 11.3004 11.0908 11.1948 11.1964C11.0893 11.3019 11.0056 11.4272 10.9485 11.565C10.8914 11.7029 10.862 11.8507 10.862 11.9999Z",
-                fill: _color
+                fill: "currentColor"
             })
         ]
     });

package/dist/web/NavStockUxIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const NavStockUxIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default NavStockUxIcon;

package/dist/web/NavStockUxIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const NavStockUxIcon_NavStockUxIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const NavStockUxIcon_NavStockUxIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 25 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M20.2407 17.958H4.96027V5.20093C4.96027 4.78037 4.6799 4.5 4.25934 4.5C3.83878 4.5 3.55841 4.78037 3.55841 5.20093V18.7991C3.55841 19.2196 3.83878 19.5 4.25934 19.5H20.2407C20.6612 19.5 20.9416 19.2196 20.9416 18.7991C20.9416 18.3785 20.6612 17.958 20.2407 17.958ZM7.06307 14.8738H7.34346C7.62383 14.8738 7.90419 14.7336 8.04439 14.4533L9.16588 11.229L14.6332 14.0327C14.9136 14.1729 15.3341 14.0327 15.4743 13.7523L19.2593 7.44393C19.3995 7.16354 19.3995 6.74298 18.979 6.6028C18.6986 6.46261 18.278 6.46261 17.9977 6.88317L14.6332 12.6308L9.16588 9.6869H8.60514C8.46497 9.6869 8.18458 9.96729 8.18458 10.1075L6.64251 13.8925C6.50234 14.3131 6.64251 14.5935 7.06307 14.8738Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/NavTradeIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const NavTradeIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default NavTradeIcon;

package/dist/web/NavTradeIcon.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const NavTradeIcon_NavTradeIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const NavTradeIcon_NavTradeIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M8.82422 12.9502C10.0531 12.9505 11.0494 13.9469 11.0498 15.1758V19.7744C11.0494 21.0033 10.0531 21.9996 8.82422 22H4.22656C2.99744 21.9999 2.00035 21.0035 2 19.7744V15.1758C2.00036 13.9467 2.99744 12.9503 4.22656 12.9502H8.82422ZM21.4678 13.1836V16.3779C21.4678 17.7902 20.9068 19.1449 19.9082 20.1436C18.9095 21.1422 17.5549 21.7041 16.1426 21.7041H12.9473V19.5732H16.1426C16.99 19.5732 17.8031 19.2369 18.4023 18.6377C19.0015 18.0385 19.3379 17.2253 19.3379 16.3779V13.1836H21.4678ZM17.208 2C18.4789 2.00006 19.6979 2.50473 20.5967 3.40332C21.4955 4.30214 22.001 5.52184 22.001 6.79297C22.0009 8.06402 21.4954 9.28286 20.5967 10.1816C19.6979 11.0804 18.479 11.5859 17.208 11.5859C15.9369 11.5859 14.7172 11.0805 13.8184 10.1816C12.9198 9.28289 12.4151 8.0639 12.415 6.79297C12.415 5.52184 12.9195 4.30214 13.8184 3.40332C14.7172 2.50452 15.9369 2 17.208 2ZM10.8174 4.66309H7.62207C6.77477 4.66312 5.96245 4.99954 5.36328 5.59863C4.76417 6.19775 4.42687 7.01016 4.42676 7.85742V11.0527H2.29688V7.85742C2.29699 6.44521 2.85786 5.09039 3.85645 4.0918C4.85509 3.09323 6.20982 2.53226 7.62207 2.53223H10.8174V4.66309Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/NavWalletIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const NavWalletIcon: {
-    <T extends string = IconColor>({ size, width, height, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string = IconColor>({ size, width, height, className, color, ...props }: IconProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default NavWalletIcon;