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

package/dist/web/FaqIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const FaqIcon: {
-    <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 FaqIcon;

package/dist/web/FaqIcon.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 FaqIcon_FaqIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const FaqIcon = ({ 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: "M18.6699 1.73608C20.0923 1.73608 21.2498 2.89299 21.25 4.31519V16.115C21.2498 17.5373 20.0922 18.6941 18.6699 18.6941H13.6748L6.86914 22.1892C6.77268 22.2388 6.66769 22.2634 6.5625 22.2634C6.44093 22.2634 6.31911 22.231 6.21191 22.1658C6.01189 22.0436 5.88978 21.8258 5.88965 21.5916V18.6941H5.33008C3.90776 18.6941 2.75019 17.5373 2.75 16.115V4.31519C2.75014 2.89296 3.90773 1.73608 5.33008 1.73608H18.6699ZM5.33008 3.08179C4.64961 3.08179 4.09584 3.63487 4.0957 4.31519V16.115C4.09589 16.7954 4.64964 17.3484 5.33008 17.3484H6.5625C6.93382 17.3486 7.23421 17.65 7.23438 18.0212V20.49L13.2051 17.4236C13.3001 17.3747 13.4058 17.3484 13.5127 17.3484H18.6699C19.3504 17.3484 19.9041 16.7954 19.9043 16.115V4.31519C19.9042 3.63484 19.3504 3.08179 18.6699 3.08179H5.33008ZM11.9355 13.5193C12.4569 13.5193 12.8809 13.9432 12.8809 14.4646C12.8809 14.986 12.4569 15.4099 11.9355 15.4099C11.4142 15.4099 10.9902 14.986 10.9902 14.4646C10.9902 13.9432 11.4142 13.5193 11.9355 13.5193ZM12 5.48901C13.6849 5.48901 15.0555 6.85977 15.0557 8.54468C15.0557 9.76936 14.3287 10.8696 13.2021 11.3523L13.1885 11.3601C12.867 11.4905 12.6621 11.7938 12.6621 12.1355C12.6621 12.1814 12.6579 12.2225 12.6494 12.2605C12.5915 12.5708 12.3181 12.7976 12 12.7976C11.635 12.7976 11.3379 12.5005 11.3379 12.1355C11.3379 11.2646 11.8566 10.4833 12.6592 10.1453C13.3115 9.87484 13.7314 9.24724 13.7314 8.54468C13.7314 7.58981 12.9549 6.81323 12 6.81323C11.0451 6.81324 10.2686 7.58984 10.2686 8.54468C10.2686 8.90962 9.97139 9.20668 9.60645 9.20679C9.24143 9.20679 8.94434 8.90969 8.94434 8.54468C8.94442 6.85979 10.3151 5.48902 12 5.48901Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };
-FaqIcon_FaqIcon.displayName = 'FaqIcon|faq';
-const FaqIcon = FaqIcon_FaqIcon;
-export { FaqIcon as default };
+FaqIcon.displayName = 'FaqIcon|faq';
+const web_FaqIcon = FaqIcon;
+export { web_FaqIcon as default };

package/dist/web/FileTextIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const FileTextIcon: {
-    <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 FileTextIcon;

package/dist/web/FileTextIcon.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 FileTextIcon_FileTextIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const FileTextIcon_FileTextIcon = ({ 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: "M13.4404 2C13.6381 2.00002 13.8262 2.08155 13.9639 2.22461L19.9521 8.41211L20.0439 8.52734C20.1241 8.65101 20.1699 8.79745 20.1699 8.94824V19.4717C20.1699 20.8646 19.0755 21.9998 17.7188 22H7.4502C6.09335 21.9998 5 20.8645 5 19.4717V4.52832C5.00015 3.13558 6.09348 2.00019 7.4502 2H13.4404ZM7.4502 3.52051C6.91148 3.52066 6.47876 3.94762 6.47852 4.46973V19.54L6.48242 19.6367C6.5323 20.1138 6.94517 20.4891 7.4502 20.4893H17.7188C18.2237 20.4891 18.6366 20.1138 18.6865 19.6367L18.6904 19.54V9.38086H15.1514C13.7995 9.38074 12.7012 8.3084 12.7012 6.98145V3.52051H7.4502ZM15.3008 16.0762C15.6365 16.1475 15.8904 16.4561 15.8906 16.8203L15.875 16.9727C15.8158 17.2679 15.5885 17.5032 15.3008 17.5645L15.1523 17.5801H10.0176C9.66173 17.58 9.36398 17.3171 9.29492 16.9727L9.2793 16.8203C9.2796 16.404 9.61102 16.0607 10.0176 16.0605H15.1523L15.3008 16.0762ZM12.7334 12.541C13.0691 12.6122 13.3229 12.9199 13.3232 13.2842L13.3076 13.4375C13.2483 13.7327 13.0212 13.9682 12.7334 14.0293L12.585 14.0449H10.0176C9.66182 14.0448 9.36408 13.7819 9.29492 13.4375L9.2793 13.2842C9.27969 12.8679 9.61111 12.5255 10.0176 12.5254H12.585L12.7334 12.541ZM14.1768 7.17969C14.1768 7.73922 14.6153 8.1875 15.1494 8.1875H17.6504L14.1768 4.59863V7.17969Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/FilterIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const FilterIcon: {
-    <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 FilterIcon;

package/dist/web/FilterIcon.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 FilterIcon_FilterIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const FilterIcon_FilterIcon = ({ 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: "M18.16 3.16455C19.1969 3.32251 19.6838 4.61382 18.9237 5.41846L13.2616 11.4106C13.2671 11.4594 13.2714 11.5088 13.2714 11.5591V18.8013C13.2713 19.8016 12.2178 20.4526 11.3231 20.0054L8.63171 18.6597C8.17606 18.4316 7.88856 17.9651 7.88855 17.4556V11.5591C7.88856 11.5092 7.89298 11.4601 7.89832 11.4116L2.23621 5.41846C1.47606 4.61381 1.96295 3.32249 2.99988 3.16455L3.21375 3.14893H17.9462L18.16 3.16455ZM21.3768 17.9526C21.7484 17.9526 22.0495 18.254 22.0497 18.6255C22.0497 18.9971 21.7484 19.2983 21.3768 19.2983H15.994C15.6225 19.2982 15.3212 18.997 15.3212 18.6255C15.3213 18.2541 15.6226 17.9528 15.994 17.9526H21.3768ZM9.23621 12.8276L9.23425 12.8247V17.4556L11.9257 18.8013V11.5591H9.23621V12.8276ZM21.3768 15.2603C21.7484 15.2603 22.0496 15.5616 22.0497 15.9331C22.0497 16.3047 21.7484 16.606 21.3768 16.606H15.994C15.6225 16.6058 15.3212 16.3046 15.3212 15.9331C15.3212 15.5616 15.6225 15.2604 15.994 15.2603H21.3768ZM21.3768 12.5679C21.7484 12.5679 22.0497 12.8691 22.0497 13.2407C22.0497 13.6123 21.7484 13.9136 21.3768 13.9136H15.994C15.6225 13.9135 15.3212 13.6123 15.3212 13.2407C15.3212 12.8692 15.6225 12.568 15.994 12.5679H21.3768ZM9.23621 10.4771V11.5571H11.9266L11.9276 11.5562V10.4731L17.3202 4.76416H3.83972L9.23621 10.4771Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/FingerprintIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const FingerprintIcon: {
-    <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 FingerprintIcon;

package/dist/web/FingerprintIcon.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 FingerprintIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const FingerprintIcon = ({ 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: "M2.94511 15.5671C3.35672 15.5671 3.69023 15.9007 3.69023 16.3123V18.448C3.69023 19.477 4.52353 20.3103 5.55254 20.3103H7.68925C8.10065 20.3105 8.4334 20.644 8.4334 21.0554H8.44316C8.4431 21.4668 8.11039 21.8003 7.69902 21.8005H5.55254C3.70033 21.8005 2.20097 20.3002 2.20097 18.448V16.3123C2.20097 15.9008 2.53373 15.5674 2.94511 15.5671ZM21.0564 15.5671C21.4679 15.5673 21.8006 15.9008 21.8006 16.3123V18.448C21.8006 20.3002 20.3012 21.8005 18.449 21.8005H16.3133C15.9017 21.8005 15.5682 21.467 15.5682 21.0554C15.5682 20.6438 15.9017 20.3103 16.3133 20.3103H18.449C19.478 20.3103 20.3113 19.477 20.3113 18.448V16.3123C20.3113 15.9007 20.6448 15.5671 21.0564 15.5671ZM13.3982 14.5623C13.5542 14.2803 13.9101 14.178 14.1922 14.3337C14.4744 14.4897 14.5776 14.8464 14.4217 15.1287L12.8328 18.0037C12.7553 18.1438 12.6278 18.2415 12.4842 18.283C12.3404 18.3242 12.1815 18.3089 12.0398 18.2332H12.0379C11.7559 18.0772 11.6537 17.7203 11.8094 17.4382L13.3982 14.5623ZM12.5428 10.8093C12.8581 10.877 13.0573 11.1915 12.9871 11.5066C12.605 13.2397 11.538 15.4638 10.1365 17.4578V17.4587C10.0566 17.5733 9.94317 17.6489 9.82011 17.6843C9.65563 17.7316 9.47241 17.7043 9.325 17.5974L9.32402 17.5994C9.05813 17.4141 8.99607 17.049 9.18144 16.7859C10.5046 14.9057 11.4992 12.8347 11.8475 11.2537C11.9158 10.9384 12.2304 10.7427 12.5428 10.8093ZM10.2391 6.40112C11.8227 5.78131 13.6121 5.87745 15.0281 6.65991C16.314 7.37062 17.2451 8.53981 17.6521 9.9519C18.059 11.3642 17.8931 12.8504 17.1824 14.1365L15.4754 17.2214C15.3979 17.3615 15.2713 17.4602 15.1277 17.5017C15.0168 17.5331 14.8976 17.532 14.7879 17.4968C14.6781 17.4615 14.5805 17.3937 14.5086 17.3035C14.4368 17.2132 14.3934 17.1029 14.3836 16.988C14.374 16.8734 14.3986 16.7578 14.4539 16.657V16.656L16.157 13.571C16.681 12.6226 16.8303 11.5339 16.5828 10.4851L16.5271 10.2761C16.3711 9.72905 16.1083 9.21707 15.7537 8.77222C15.3991 8.32758 14.9591 7.9583 14.4607 7.68433L14.2518 7.57593C13.1861 7.07131 11.8341 7.03486 10.6648 7.49194C9.54241 7.93109 8.73548 8.75741 8.38554 9.81616V9.81714C8.28222 10.1225 7.95267 10.2884 7.64726 10.1882C7.34115 10.0874 7.17623 9.75401 7.27617 9.44897C7.73901 8.04804 8.79313 6.96642 10.2391 6.40112ZM10.5691 8.74292C11.4975 8.25595 12.7625 8.31727 13.7928 8.88647C15.5146 9.84012 16.1415 12.0156 15.1902 13.7371C15.1126 13.8772 14.9853 13.975 14.8416 14.0164C14.6975 14.0577 14.54 14.0415 14.3953 13.9685L14.3943 13.9695L14.3914 13.9675C14.1093 13.8116 14.0071 13.4548 14.1629 13.1726C14.8019 12.0159 14.3797 10.5514 13.2234 9.91187H13.2225C12.5299 9.52733 11.678 9.47977 11.1092 9.77808L11.1102 9.77905C10.7051 9.99336 10.4698 10.3558 10.4178 10.8777L10.4168 10.8816L10.4119 10.9226L10.4109 10.9285C9.97115 13.2491 9.06096 14.5763 8.36797 15.282C8.14217 15.5111 7.7723 15.5145 7.54277 15.2888C7.31363 15.063 7.30914 14.6922 7.53496 14.4626C7.97084 14.0184 8.74585 13.0087 9.17851 11.1199L9.26054 10.7302C9.35785 9.84397 9.82094 9.1367 10.5691 8.74292ZM6.82988 11.0007C6.93996 10.6965 7.27232 10.5397 7.57695 10.6492C7.8814 10.7589 8.0391 11.0942 7.92851 11.3972V11.3962C7.82277 11.6912 7.70279 11.9746 7.58086 12.238C7.43144 12.5584 7.26618 12.8587 7.09062 13.1335C7.01113 13.26 6.89162 13.3437 6.76054 13.3816C6.60604 13.4261 6.43273 13.4065 6.28593 13.3162L6.28496 13.3142C6.04704 13.1621 5.95616 12.8676 6.05351 12.614L6.10722 12.5076C6.18134 12.3925 6.2526 12.2703 6.32207 12.1433L6.52422 11.7458C6.63124 11.5138 6.7333 11.2646 6.8289 11.0007H6.82988ZM7.68925 2.19995C8.10065 2.20019 8.4334 2.53362 8.4334 2.94507C8.43325 3.3564 8.10056 3.68897 7.68925 3.68921H5.55254C4.52357 3.68921 3.69029 4.52256 3.69023 5.55151V7.68823H3.43535V7.698H3.7C3.69991 8.10936 3.36718 8.44286 2.95586 8.44312C2.54431 8.44312 2.20107 8.10952 2.20097 7.698V5.55151C2.20103 3.69935 3.70036 2.19995 5.55254 2.19995H7.68925ZM18.449 2.19995C20.3012 2.19995 21.8005 3.69935 21.8006 5.55151V7.68823L21.5359 7.698H21.8006C21.8005 8.1094 21.4678 8.44292 21.0564 8.44312C20.6449 8.44312 20.3114 8.10952 20.3113 7.698V5.55151C20.3113 4.52256 19.478 3.68921 18.449 3.68921H16.3133C15.9018 3.68921 15.5683 3.35655 15.5682 2.94507C15.5682 2.53347 15.9017 2.19995 16.3133 2.19995H18.449Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/FlagIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const FlagIcon: {
-    <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 FlagIcon;

package/dist/web/FlagIcon.js

@@ -1,19 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const FlagIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const FlagIcon = ({ 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: "M18.1543 4.48047C18.1094 4.48047 18.0625 4.48633 18.0156 4.49805C17.2734 4.67773 16.5312 4.74805 15.7891 4.74805C13.2637 4.74805 10.7383 3.93945 8.21094 3.93945C7.65039 3.93945 7.0918 3.98633 6.53125 4.08398V3.79688C6.53125 3.49414 6.28711 3.25 5.98438 3.25C5.68164 3.25 5.4375 3.49414 5.4375 3.79688V20.2031C5.4375 20.5059 5.68164 20.75 5.98438 20.75C6.28711 20.75 6.53125 20.5059 6.53125 20.2031V12.834C7.0918 12.7363 7.65039 12.6895 8.21094 12.6895C10.7363 12.6895 13.2617 13.498 15.7891 13.498C16.5312 13.498 17.2734 13.4277 18.0156 13.248C18.3164 13.1758 18.5625 12.8496 18.5625 12.5469V4.89062C18.5625 4.63672 18.3887 4.48047 18.1543 4.48047ZM17.4688 12.248C16.9473 12.3535 16.3945 12.4043 15.7891 12.4043C14.6133 12.4043 13.4277 12.2148 12.1738 12.0137C10.8906 11.8086 9.5625 11.5957 8.21289 11.5957C7.625 11.5957 7.06641 11.6367 6.5332 11.7188V5.18945C7.05664 5.08594 7.61133 5.0332 8.21289 5.0332C9.38867 5.0332 10.5742 5.22266 11.8281 5.42383C13.1113 5.62891 14.4395 5.8418 15.7891 5.8418C16.3809 5.8418 16.9355 5.80078 17.4688 5.71875V12.248Z",
-            fill: _color,
-            stroke: _color,
+            fill: "currentColor",
+            stroke: "currentColor",
             strokeWidth: 0.2
         })
     });

package/dist/web/FlameFilledIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const FlameFilledIcon: {
-    <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 FlameFilledIcon;

package/dist/web/FlameFilledIcon.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 FlameFilledIcon_FlameFilledIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const FlameFilledIcon_FlameFilledIcon = ({ 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.2712 8.43005L15.68 9.96005C15.68 9.96005 15.68 3.84005 10.3762 1.80005C10.3762 1.80005 9.84586 7.41005 7.19397 9.45005C4.54208 11.49 -0.761707 17.61 9.84586 22.2C9.84586 22.2 4.54208 16.59 11.437 12.51C11.437 12.51 10.9066 14.55 13.5585 16.59C16.2104 18.63 13.5585 22.2 13.5585 22.2C13.5585 22.2 26.2876 19.14 17.2712 8.43005Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/FlameIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const FlameIcon: {
-    <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 FlameIcon;

package/dist/web/FlameIcon.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 FlameIcon_FlameIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const FlameIcon_FlameIcon = ({ 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.9023 2.75024C12.8281 3.74972 13.8556 5.38347 14.4082 6.87134C14.7191 7.70851 14.875 8.48885 14.9531 9.05981C14.9921 9.34456 15.011 9.57574 15.0205 9.73267C15.0252 9.81092 15.0282 9.87066 15.0293 9.90942C15.0298 9.92877 15.0302 9.94287 15.0303 9.95142V11.4866L16.1309 10.429L17.2129 9.38696C19.0842 11.7506 19.7839 13.6421 19.8457 15.1272C19.9111 16.7014 19.2642 17.922 18.3311 18.8772C17.3864 19.8442 16.1628 20.5209 15.1494 20.9583C15.0728 20.9913 14.9964 21.0208 14.9229 21.051C15.0146 20.8295 15.1051 20.5916 15.1777 20.3401C15.5455 19.0666 15.5831 17.3268 13.9551 16.0745C12.7365 15.1371 12.2931 14.238 12.1328 13.6213C12.0512 13.3076 12.0387 13.053 12.0449 12.885C12.048 12.8009 12.0558 12.7381 12.0615 12.7014C12.0634 12.6895 12.0652 12.6803 12.0664 12.6741L12.4629 11.1477L11.1064 11.9504C9.29486 13.0224 8.22194 14.2332 7.68262 15.4885C7.14283 16.7452 7.16652 17.9779 7.42383 19.0383C7.55645 19.5849 7.75272 20.0894 7.96777 20.5364C6.60953 19.7453 5.69272 18.9416 5.10059 18.1643C4.25377 17.0526 4.0496 15.9683 4.19141 14.9592C4.33647 13.9271 4.85129 12.9297 5.5166 12.0491C6.17928 11.172 6.96353 10.4469 7.58984 9.96509C9.09544 8.80689 9.93635 6.71016 10.4053 5.0354C10.6454 4.1778 10.7996 3.38836 10.8936 2.81372C10.897 2.79247 10.899 2.77091 10.9023 2.75024Z",
-            stroke: _color,
+            stroke: "currentColor",
             strokeWidth: 1.3
         })
     });

package/dist/web/Flash1Icon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const Flash1Icon: {
-    <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 Flash1Icon;

package/dist/web/Flash1Icon.js

@@ -1,22 +1,22 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const Flash1Icon_Flash1Icon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const Flash1Icon = ({ 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.8341 3.26367L12.8566 3.26953L12.8575 3.27051C12.8613 3.27736 12.8648 3.28491 12.8673 3.29199C12.869 3.29691 12.8695 3.30131 12.8702 3.30469L12.8663 3.32617L12.8624 3.36426L12.1505 9.32324L12.0529 10.1338H19.1144C19.1254 10.1469 19.1461 10.1752 19.171 10.2295L19.1886 10.2686C19.1864 10.2832 19.1825 10.3046 19.173 10.3301C19.1647 10.352 19.1521 10.3735 19.1398 10.3955L11.2657 20.7148L11.2423 20.7441L11.2345 20.7559L11.1417 20.7305V20.7295C11.138 20.7227 11.1354 20.715 11.1329 20.708C11.1306 20.7014 11.1288 20.6961 11.1281 20.6924L11.1329 20.6738L11.1378 20.6357L11.8497 14.6768L11.9464 13.8662H4.88098C4.86945 13.8662 4.8639 13.8647 4.86243 13.8643C4.86124 13.8639 4.85934 13.8627 4.85559 13.8604C4.84994 13.8568 4.83696 13.8449 4.8175 13.8203C4.80991 13.7924 4.80638 13.7664 4.80969 13.7393C4.81456 13.6999 4.83076 13.6531 4.85852 13.6035L12.7345 3.28516L12.7452 3.27148L12.756 3.25586C12.7641 3.24412 12.7713 3.23648 12.7765 3.23145L12.8341 3.26367Z",
-            stroke: _color,
+            stroke: "currentColor",
             strokeWidth: 1.45
         })
     });
 };
-Flash1Icon_Flash1Icon.displayName = 'Flash1Icon|flash-1';
-const Flash1Icon = Flash1Icon_Flash1Icon;
-export { Flash1Icon as default };
+Flash1Icon.displayName = 'Flash1Icon|flash-1';
+const web_Flash1Icon = Flash1Icon;
+export { web_Flash1Icon as default };

package/dist/web/FlashIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const FlashIcon: {
-    <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 FlashIcon;

package/dist/web/FlashIcon.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 FlashIcon_FlashIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const FlashIcon_FlashIcon = ({ 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: "M9.57345 21.5C9.3145 21.4989 9.05921 21.4397 8.82695 21.3268C8.59468 21.2139 8.39155 21.0504 8.23294 20.8486C8.08124 20.6546 7.97774 20.4283 7.93072 20.1878C7.8837 19.9473 7.89448 19.6993 7.96218 19.4637L9.38073 14.111L7.03272 13.1801C6.19007 12.8473 5.78079 11.904 6.1183 11.0735C6.18877 10.9001 6.28912 10.7401 6.41491 10.6005L13.2221 3.05095C13.3715 2.87963 13.5564 2.74183 13.7643 2.6468C13.9722 2.55177 14.1984 2.50172 14.4276 2.5C14.9518 2.50272 15.4459 2.7427 15.7671 3.15139C15.9186 3.34541 16.0221 3.5717 16.0691 3.81218C16.1161 4.05266 16.1054 4.30065 16.0378 4.53631L14.6193 9.88897L16.9673 10.8157C17.8099 11.1485 18.2192 12.0918 17.8817 12.9223C17.8112 13.0956 17.7109 13.2557 17.5851 13.3953L10.7789 20.949C10.6295 21.1203 10.4446 21.2581 10.2367 21.3532C10.0288 21.4482 9.80262 21.4983 9.57345 21.5ZM14.4481 4.12762L7.64299 11.6759L11.3358 13.1326L9.55212 19.8724L16.358 12.3241L12.6652 10.8674L14.4481 4.12762Z",
-            fill: _color
+            d: "M9.57345 21.5C9.3145 21.4989 9.05921 21.4397 8.82695 21.3268C8.59468 21.2139 8.39155 21.0504 8.23294 20.8486C8.08124 20.6546 7.97774 20.4283 7.93072 20.1878C7.8837 19.9473 7.89448 19.6993 7.96218 19.4637L9.38073 14.111L6.03272 13.1801C5.19007 12.8473 4.78079 11.904 5.1183 11.0735C5.18877 10.9001 5.28912 10.7401 5.41491 10.6005L13.2221 3.05095C13.3715 2.87963 13.5564 2.74183 13.7643 2.6468C13.9722 2.55177 14.1984 2.50172 14.4276 2.5C14.9518 2.50272 15.4459 2.7427 15.7671 3.15139C15.9186 3.34541 16.0221 3.5717 16.0691 3.81218C16.1161 4.05266 16.1054 4.30065 16.0378 4.53631L14.6193 9.88897L17.9673 10.8157C18.8099 11.1485 19.2192 12.0918 18.8817 12.9223C18.8112 13.0956 18.7109 13.2557 18.5851 13.3953L10.7789 20.949C10.6295 21.1203 10.4446 21.2581 10.2367 21.3532C10.0288 21.4482 9.80262 21.4983 9.57345 21.5ZM14.4481 4.12762L6.64299 11.6759L11.3358 13.1326L9.55212 19.8724L17.358 12.3241L12.6652 10.8674L14.4481 4.12762Z",
+            fill: "white"
         })
     });
 };

package/dist/web/FolderIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const FolderIcon: {
-    <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 FolderIcon;

package/dist/web/FolderIcon.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 FolderIcon_FolderIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const FolderIcon_FolderIcon = ({ 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: "M18.2818 7.41401H13.8869V7.22293C13.9347 5.69427 12.6926 4.5 11.164 4.5H6.19583C4.66717 4.5 3.4729 5.74204 3.4729 7.22293V17.2548C3.4729 18.4968 4.47608 19.5 5.71812 19.5H18.2818C19.5239 19.5 20.527 18.4968 20.527 17.2548V9.61146C20.527 8.4172 19.5239 7.41401 18.2818 7.41401ZM4.90602 7.22293C4.90602 6.50637 5.47927 5.93312 6.19583 5.93312H11.164C11.8805 5.93312 12.4538 6.50637 12.4538 7.22293V7.41401H4.90602V7.22293ZM18.2818 18.0669H5.71812C5.28819 18.0669 4.90602 17.7325 4.90602 17.2548V8.84713H18.2818C18.7118 8.84713 19.0939 9.18153 19.0939 9.65924V10.758H15.0334C13.5525 10.758 12.406 11.9522 12.406 13.3854V13.5764C12.406 15.0573 13.6003 16.2038 15.0334 16.2038H19.0939V17.2548C19.0939 17.7325 18.7118 18.0669 18.2818 18.0669ZM18.9984 12.1911V14.7707H15.0334C14.3646 14.7707 13.8391 14.2452 13.8391 13.5764V13.4331C13.8391 12.7643 14.3646 12.2389 15.0334 12.2389H18.9984V12.1911Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/FullscreenIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const FullscreenIcon: {
-    <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 FullscreenIcon;

package/dist/web/FullscreenIcon.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 FullscreenIcon_FullscreenIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const FullscreenIcon = ({ 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.8 4.8V9.3H3V3H9.3V4.8H4.8ZM19.2 9.3V4.8H14.7V3H21V9.3H19.2ZM4.8 14.7V19.2H9.3V21H3V14.7H4.8ZM19.2 14.7H21V21H14.7V19.2H19.2V14.7Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };
-FullscreenIcon_FullscreenIcon.displayName = 'FullscreenIcon|fullscreen';
-const FullscreenIcon = FullscreenIcon_FullscreenIcon;
-export { FullscreenIcon as default };
+FullscreenIcon.displayName = 'FullscreenIcon|fullscreen';
+const web_FullscreenIcon = FullscreenIcon;
+export { web_FullscreenIcon as default };

package/dist/web/GasFeeIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const GasFeeIcon: {
-    <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 GasFeeIcon;

package/dist/web/GasFeeIcon.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 GasFeeIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const GasFeeIcon = ({ 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.7559 4C18.9699 4.00009 19.958 5.01144 19.958 6.25391V18.3447H21.333C21.8878 18.3447 22.166 18.6211 22.166 19.1729C22.166 19.7245 21.8878 20 21.333 20H19.958V20.001H9.47461V20H8.10059C7.54605 19.9999 7.26858 19.7244 7.26855 19.1729C7.26855 18.6212 7.54603 18.3449 8.10059 18.3447H9.47461V11.3008H7.59961V14.501C7.59935 15.7709 6.56973 16.8006 5.2998 16.8008C4.02971 16.8008 3.00026 15.771 3 14.501V8.41504C2.99996 8.36225 2.97861 8.31087 2.94141 8.27344L1.23438 6.56641C0.921976 6.25401 0.922017 5.74797 1.23438 5.43555C1.54679 5.12313 2.05281 5.12313 2.36523 5.43555L4.07227 7.14258C4.40953 7.48007 4.59957 7.93791 4.59961 8.41504V14.501C4.59987 14.8874 4.91337 15.2012 5.2998 15.2012C5.68607 15.201 5.99974 14.8872 6 14.501V11.001C6 10.283 6.58183 9.70117 7.2998 9.70117H9.47461V6.25391C9.47461 5.01139 10.4626 4 11.6768 4H17.7559ZM11.6768 5.67383C11.3643 5.67383 11.1094 5.9341 11.1094 6.25391V18.3271H18.3223V6.25391C18.3223 5.93415 18.0683 5.67392 17.7559 5.67383H11.6768ZM16.0605 9.79395C16.6333 9.79395 16.9198 10.0695 16.9199 10.6211C16.9199 11.1728 16.6334 11.4492 16.0605 11.4492H13.3652C12.7927 11.4491 12.5068 11.1727 12.5068 10.6211C12.5069 10.0696 12.7927 9.79407 13.3652 9.79395H16.0605Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/GhostIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const GhostIcon: {
-    <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 GhostIcon;

package/dist/web/GhostIcon.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 GhostIcon_GhostIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const GhostIcon = ({ 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.1426 1.71387C16.4028 1.71404 19.8562 5.16755 19.8564 9.42773V19.7139C19.8564 21.134 18.7053 22.2851 17.2852 22.2852C16.166 22.2852 15.2137 21.5704 14.8604 20.5723H14.5674C14.2141 21.5703 13.2616 22.285 12.1426 22.2852C11.0235 22.2852 10.0711 21.5703 9.71777 20.5723H9.42383C9.07045 21.5703 8.11814 22.2852 6.99902 22.2852C5.57904 22.2849 4.42773 21.1339 4.42773 19.7139V9.42676C4.42773 5.168 7.8821 1.71387 12.1426 1.71387ZM12.1426 3.08496C8.63973 3.08496 5.7998 5.9252 5.7998 9.42676V19.7139C5.7998 20.3765 6.33646 20.9139 6.99902 20.9141C7.51161 20.9141 7.96273 20.5892 8.13086 20.1143C8.32475 19.5667 8.843 19.2013 9.42383 19.2012H9.71777C10.2986 19.2013 10.8168 19.5667 11.0107 20.1143C11.1789 20.5892 11.63 20.9141 12.1426 20.9141C12.655 20.9139 13.1063 20.5891 13.2744 20.1143C13.4684 19.5668 13.9865 19.2012 14.5674 19.2012H14.8604C15.4413 19.2012 15.9594 19.5667 16.1533 20.1143C16.3214 20.5892 16.7726 20.9141 17.2852 20.9141C17.9479 20.914 18.4854 20.3766 18.4854 19.7139V9.42773C18.4851 5.92497 15.6454 3.08513 12.1426 3.08496ZM12.1807 12.8643C13.0775 12.9473 13.7881 14.0626 13.7881 15.4287C13.788 16.8487 13.0199 18 12.0732 18L12.0703 17.999L12.0684 18C11.1217 17.9998 10.3545 16.8477 10.3545 15.4277C10.3546 14.0079 11.1218 12.8567 12.0684 12.8564C12.1061 12.8564 12.1436 12.8607 12.1807 12.8643ZM9.05371 7.71387C9.76371 7.71396 10.3389 8.28998 10.3389 9C10.3388 9.70994 9.76365 10.2851 9.05371 10.2852L9.05078 10.2842L9.04883 10.2852C8.3389 10.2852 7.76294 9.64272 7.7627 9C7.7627 8.35714 8.33875 7.71387 9.04883 7.71387H9.05371ZM15.1611 7.71387C15.871 7.71412 16.4463 8.35727 16.4463 9C16.4462 9.64267 15.871 10.2849 15.1611 10.2852C15.159 10.2852 15.1564 10.2842 15.1543 10.2842C15.1527 10.2842 15.151 10.2852 15.1494 10.2852C14.4395 10.2852 13.8635 9.64272 13.8633 9C13.8633 8.35714 14.4393 7.71387 15.1494 7.71387H15.1611Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };
-GhostIcon_GhostIcon.displayName = 'GhostIcon|ghost';
-const GhostIcon = GhostIcon_GhostIcon;
-export { GhostIcon as default };
+GhostIcon.displayName = 'GhostIcon|ghost';
+const web_GhostIcon = GhostIcon;
+export { web_GhostIcon as default };

package/dist/web/GiftIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const GiftIcon: {
-    <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 GiftIcon;

package/dist/web/GiftIcon.js

@@ -1,19 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor } from "../core/index.js";
-import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
-const GiftIcon_GiftIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const GiftIcon_GiftIcon = ({ 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: "M6.16602 3.77539C6.74005 3.39747 7.47358 3.30876 8.27441 3.50977C9.53472 3.826 11.0048 4.88883 12 6.17676C12.9947 4.8887 14.4662 3.82597 15.7266 3.50977C16.5264 3.31013 17.259 3.39837 17.833 3.77539C18.5207 4.22631 18.7135 4.7978 18.751 5.20117C18.7917 5.63677 18.6776 6.09686 18.4238 6.57129H18.8604C19.8165 6.57129 20.5947 7.34995 20.5947 8.30566V10.416C20.5947 11.1391 20.1365 11.7801 19.4648 12.0312C19.5138 12.1924 19.5391 12.3586 19.5391 12.5273V18.8613C19.539 19.8165 18.7617 20.5947 17.8057 20.5947H6.19629C5.24029 20.5947 4.46196 19.8166 4.46191 18.8613V12.5273C4.46192 12.3592 4.48803 12.1935 4.53711 12.0322C3.8644 11.7821 3.40531 11.1408 3.40527 10.416V8.30469C3.40531 7.34888 4.18366 6.57129 5.13965 6.57129H5.57617C5.32154 6.09671 5.20828 5.63664 5.24902 5.20117C5.28649 4.79781 5.47887 4.22632 6.16602 3.77539ZM6.19629 12.1494C5.98771 12.1494 5.81839 12.3194 5.81836 12.5273V18.8613C5.81842 19.0691 5.98758 19.2383 6.19629 19.2383H11.3213V12.1494H6.19629ZM12.6777 19.2383H17.8057C18.0136 19.2383 18.1825 19.0692 18.1826 18.8613V12.5273C18.1826 12.3193 18.0135 12.1494 17.8057 12.1494H12.6777V19.2383ZM5.13965 7.92773C4.93106 7.92773 4.76172 8.0978 4.76172 8.30566V10.416C4.76177 10.6238 4.93099 10.793 5.13965 10.793H11.3213V7.92773H5.13965ZM12.6777 10.793H18.8604C19.0682 10.793 19.2373 10.624 19.2373 10.416V8.30566C19.2373 8.09754 19.0681 7.92773 18.8604 7.92773H12.6777V10.793ZM17.0889 4.90918C16.8472 4.75012 16.5017 4.71452 16.0557 4.82617C15.244 5.02959 14.2441 5.70019 13.4424 6.57129H16.7568C16.8719 6.44812 17.0374 6.24859 17.1719 6.02637C17.3197 5.78211 17.4192 5.52936 17.3994 5.32715V5.32617C17.3945 5.27248 17.3817 5.21286 17.3408 5.14648C17.2993 5.07907 17.2248 4.99842 17.0889 4.90918ZM7.94434 4.82617C7.49602 4.71308 7.15083 4.7503 6.91113 4.90918C6.77563 4.99849 6.70078 5.07895 6.65918 5.14648C6.61826 5.21299 6.6054 5.27265 6.60059 5.32617V5.32715C6.58048 5.53465 6.68597 5.79492 6.83691 6.04199C6.97302 6.26477 7.13638 6.46064 7.24121 6.57129H10.5537C9.75052 5.69898 8.75133 5.02841 7.94434 4.82617Z",
-            fill: _color,
-            stroke: _color,
+            fill: "currentColor",
+            stroke: "currentColor",
             strokeWidth: 0.188889
         })
     });

package/dist/web/GithubIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const GithubIcon: {
-    <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 GithubIcon;

package/dist/web/GithubIcon.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 GithubIcon_GithubIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
+import { useWebColor } from "../core/index.js";
+const GithubIcon_GithubIcon = ({ 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.1971 2C6.67539 2 2.198 6.58956 2.198 12.2525C2.198 16.7832 5.06235 20.6257 9.03713 21.9826C9.53626 22.0744 9.69452 21.7722 9.69452 21.5003C9.69452 21.256 9.69974 20.5758 9.69452 19.7199C6.91365 20.3386 6.33713 18.3692 6.33713 18.3692C5.88235 17.1844 5.22843 16.8697 5.22843 16.8697C4.31974 16.2332 5.29539 16.2465 5.29539 16.2465C6.298 16.3178 6.82756 17.3021 6.82756 17.3021C7.71974 18.8694 9.16756 18.4165 9.73713 18.1544C9.8293 17.4929 10.0867 17.0391 10.3728 16.785C8.15191 16.5247 5.818 15.6465 5.818 11.7158C5.818 10.5969 6.20756 9.68225 6.84756 8.96457C6.74495 8.70692 6.40061 7.66295 6.94495 6.25167C6.94495 6.25167 7.78582 5.97619 9.69452 7.30367C10.5107 7.07543 11.3528 6.95912 12.1989 6.95775C13.0476 6.96221 13.9032 7.07544 14.7032 7.30367C16.6119 5.97708 17.4502 6.25167 17.4502 6.25167C17.9954 7.66295 17.6519 8.70692 17.5493 8.96457C18.1893 9.68225 18.578 10.5969 18.578 11.7158C18.578 15.6563 16.2397 16.522 14.0119 16.7743C14.3702 17.0926 14.6963 17.7077 14.6963 18.6643V21.5029C14.6963 21.7775 14.858 22.0798 15.3658 21.9808C19.3363 20.623 22.198 16.7814 22.198 12.2525C22.198 6.58956 17.7215 2 12.1971 2Z",
-            fill: _color
+            fill: "currentColor"
         })
     });
 };

package/dist/web/GrassIcon.d.ts

@@ -1,7 +1,7 @@
 import { type IconColor } from '../core';
 import { type IconProps } from './types';
 declare const GrassIcon: {
-    <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 GrassIcon;