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

package/dist/web/ReceiveIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ReceiveIcon_ReceiveIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const ReceiveIcon_ReceiveIcon = ({ size = 16, width = size, height = size, color
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M21.1733 7.58496C21.7596 8.88377 22.0864 10.3283 22.0864 11.8467C22.086 17.4868 17.5843 22.0847 12.0005 22.085C6.41647 22.085 1.91405 17.487 1.91357 11.8467C1.91357 10.3283 2.2404 8.88377 2.82666 7.58496L4.46729 8.3252C3.98425 9.39528 3.71436 10.588 3.71436 11.8467C3.71483 16.521 7.43846 20.2852 12.0005 20.2852C16.5623 20.2849 20.2852 16.5208 20.2856 11.8467C20.2856 10.588 20.0157 9.39528 19.5327 8.3252L21.1733 7.58496ZM12.8735 8.48145H15.0425C15.0836 8.4815 15.1239 8.49358 15.1587 8.51562C15.1935 8.53774 15.2219 8.56904 15.2397 8.60645C15.2575 8.64376 15.2648 8.68543 15.2603 8.72656C15.2556 8.76779 15.2391 8.80742 15.2134 8.83984L12.1685 12.6758C12.148 12.7015 12.1227 12.723 12.0933 12.7373C12.0638 12.7516 12.0312 12.7588 11.9985 12.7588C11.9659 12.7588 11.9333 12.7515 11.9038 12.7373C11.8743 12.723 11.8481 12.7015 11.8276 12.6758L8.78271 8.83984C8.75704 8.80743 8.74146 8.76778 8.73682 8.72656C8.73222 8.68541 8.73954 8.64378 8.75732 8.60645C8.77511 8.56918 8.80272 8.53771 8.8374 8.51562C8.87217 8.49354 8.91252 8.48154 8.95361 8.48145H11.1235V2.30762H12.8735V8.48145Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/RecordBuyIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const RecordBuyIcon_RecordBuyIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const RecordBuyIcon_RecordBuyIcon = ({ size = 16, width = size, height = size, c
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.0764 2.12329C12.5034 2.1664 12.8386 2.52734 12.8391 2.96606V2.96704C12.8389 3.43532 12.4574 3.81363 11.9905 3.81372C7.47823 3.81405 3.80612 7.48693 3.80592 11.9993C3.80616 16.5115 7.47823 20.1835 11.9905 20.1838C16.503 20.1837 20.1758 16.5117 20.176 11.9993C20.1762 11.5322 20.5545 11.1508 21.0227 11.1506C21.4912 11.1507 21.8702 11.5323 21.8704 11.9993C21.8703 17.4469 17.4382 21.8791 11.9905 21.8792C6.71322 21.8788 2.38958 17.7196 2.12428 12.5071L2.11158 11.9993C2.11178 6.55175 6.54296 2.11973 11.9905 2.11938L12.0764 2.12329ZM18.6047 4.4436C18.9358 4.11253 19.473 4.11333 19.804 4.44458C20.1341 4.77566 20.1347 5.31114 19.804 5.64185L14.6262 10.8225H17.2483C17.7167 10.8226 18.0957 11.2028 18.096 11.6702V11.6711C18.0952 12.0804 17.8041 12.4211 17.4192 12.5002L17.4075 12.5022L17.3958 12.5032L17.2747 12.5168L17.262 12.5178H17.2483L12.5794 12.5168H12.5784C12.3626 12.5167 12.1453 12.4337 11.9797 12.2688H11.9788C11.809 12.0989 11.7292 11.8748 11.7327 11.6555L11.7317 7.00122V7.00024C11.732 6.53296 12.1104 6.15288 12.5784 6.15259H12.5901L12.6028 6.15356L12.7229 6.16528L12.7366 6.16626L12.7493 6.16919C13.1356 6.24857 13.426 6.5904 13.426 6.99927L13.427 9.62427L15.803 7.24731L18.6047 4.4436Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/RecordSellIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const RecordSellIcon_RecordSellIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const RecordSellIcon_RecordSellIcon = ({ size = 16, width = size, height = size,
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.0784 2.12329C12.5054 2.1664 12.8405 2.52734 12.8411 2.96606V2.96704C12.8408 3.43532 12.4594 3.81363 11.9924 3.81372C7.48018 3.81405 3.80807 7.48693 3.80787 11.9993C3.80812 16.5115 7.48018 20.1835 11.9924 20.1838C16.5049 20.1837 20.1777 16.5117 20.178 11.9993C20.1782 11.5322 20.5565 11.1508 21.0247 11.1506C21.4932 11.1507 21.8721 11.5323 21.8723 11.9993C21.8723 17.4469 17.4401 21.8791 11.9924 21.8792C6.71518 21.8788 2.39153 17.7196 2.12623 12.5071L2.11353 11.9993C2.11374 6.55175 6.54491 2.11973 11.9924 2.11938L12.0784 2.12329ZM19.2024 4.19653H19.2034C19.4194 4.19654 19.6373 4.27837 19.803 4.4436C19.9732 4.61381 20.0538 4.83817 20.0501 5.05786L20.051 9.71216C20.0509 10.1798 19.6717 10.5608 19.2034 10.5608H19.1917L19.1799 10.5598L19.0588 10.5481L19.0462 10.5461L19.0325 10.5442C18.6462 10.4648 18.3567 10.1221 18.3567 9.71313L18.3557 7.08813L15.9797 9.46509L13.177 12.2688C12.846 12.5996 12.3097 12.5998 11.9788 12.2688C11.6481 11.9378 11.6479 11.4024 11.9788 11.0715L17.1565 5.89087H14.5344C14.0658 5.89087 13.6868 5.50981 13.6868 5.04224C13.6871 4.6327 13.9775 4.29248 14.3626 4.21313L14.3753 4.21021L14.387 4.20923L14.5071 4.19653L14.5208 4.19458H14.5344L19.2024 4.19653Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/RedPacketIcon.js

@@ -1,11 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const RedPacketIcon_RedPacketIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
-    const stroke = props.stroke || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -14,8 +12,8 @@ const RedPacketIcon_RedPacketIcon = ({ size = 16, width = size, height = size, c
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M9.07163 13.1561C9.48179 11.9321 10.6379 11.05 12 11.05C13.3621 11.05 14.5182 11.9321 14.9284 13.1561C16.2995 12.9013 17.6308 12.466 18.8875 11.8615V5.1125C18.8875 4.95656 18.8568 4.80214 18.7971 4.65806C18.7374 4.51399 18.65 4.38308 18.5397 4.27281C18.4294 4.16254 18.2985 4.07507 18.1544 4.01539C18.0104 3.95572 17.8559 3.925 17.7 3.925H6.3C6.14406 3.925 5.98964 3.95572 5.84556 4.01539C5.70149 4.07507 5.57058 4.16254 5.46031 4.27281C5.35004 4.38308 5.26257 4.51399 5.20289 4.65806C5.14322 4.80214 5.1125 4.95656 5.1125 5.1125V11.8615C6.36925 12.466 7.70054 12.9013 9.07163 13.1561ZM15.0559 14.5814C14.8405 16.0762 13.5544 17.225 12 17.225C10.4456 17.225 9.1595 16.0762 8.94409 14.5816C7.62637 14.3472 6.34049 13.9599 5.1125 13.4276V18.8875C5.1125 19.0434 5.14322 19.1979 5.20289 19.3419C5.26257 19.486 5.35004 19.6169 5.46031 19.7272C5.57058 19.8375 5.70149 19.9249 5.84556 19.9846C5.98964 20.0443 6.14406 20.075 6.3 20.075H17.7C17.8559 20.075 18.0104 20.0443 18.1544 19.9846C18.2985 19.9249 18.4294 19.8375 18.5397 19.7272C18.65 19.6169 18.7374 19.486 18.7971 19.3419C18.8568 19.1979 18.8875 19.0434 18.8875 18.8875V13.4278C17.6595 13.96 16.3736 14.3471 15.0559 14.5814ZM6.3 2.5H17.7C19.1428 2.5 20.3125 3.66969 20.3125 5.1125V18.8875C20.3125 20.3303 19.1428 21.5 17.7 21.5H6.3C4.85719 21.5 3.6875 20.3303 3.6875 18.8875V5.1125C3.6875 3.66969 4.85719 2.5 6.3 2.5ZM12 15.8C12.4409 15.8 12.8638 15.6248 13.1756 15.3131C13.4873 15.0013 13.6625 14.5784 13.6625 14.1375C13.6625 13.6966 13.4873 13.2737 13.1756 12.9619C12.8638 12.6502 12.4409 12.475 12 12.475C11.5591 12.475 11.1362 12.6502 10.8244 12.9619C10.5127 13.2737 10.3375 13.6966 10.3375 14.1375C10.3375 14.5784 10.5127 15.0013 10.8244 15.3131C11.1362 15.6248 11.5591 15.8 12 15.8Z",
-            fill: fill,
-            stroke: stroke,
+            fill: _color,
+            stroke: _color,
             strokeWidth: 0.12
         })
     });

package/dist/web/RedditIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const RedditIcon_RedditIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const RedditIcon_RedditIcon = ({ size = 16, width = size, height = size, color =
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M10.0004 13.996C9.44397 13.996 8.99639 13.5484 8.99639 13.004C8.99639 12.4476 9.44397 12 10.0004 12C10.5488 12 10.9924 12.4476 10.9924 13.004C10.9924 13.5524 10.5448 13.996 10.0004 13.996ZM22.198 12C22.198 17.5242 17.7222 22 12.198 22C6.6738 22 2.198 17.5242 2.198 12C2.198 6.47581 6.6738 2 12.198 2C17.7222 2 22.198 6.47581 22.198 12ZM16.8633 10.3387C16.4843 10.3387 16.1496 10.496 15.9036 10.7419C15.0004 10.1169 13.7827 9.71371 12.4319 9.66935L13.1335 6.5121L15.3674 7.01613C15.3674 7.56452 15.8149 8.00806 16.3593 8.00806C16.9157 8.00806 17.3633 7.55242 17.3633 7.00403C17.3633 6.45565 16.9157 6 16.3593 6C15.9682 6 15.6335 6.23387 15.4682 6.55645L13.0004 6.00806C12.8794 5.97581 12.7544 6.06452 12.7222 6.18548L11.952 9.66935C10.6133 9.72581 9.40767 10.125 8.50445 10.75C8.25848 10.4919 7.91171 10.3387 7.53268 10.3387C6.12542 10.3387 5.66574 12.2298 6.95203 12.871C6.90768 13.0726 6.88348 13.2823 6.88348 13.496C6.88348 15.6169 9.27058 17.3347 12.2061 17.3347C15.1536 17.3347 17.5407 15.6169 17.5407 13.496C17.5407 13.2823 17.5165 13.0605 17.4641 12.8589C18.7262 12.2137 18.2625 10.3387 16.8633 10.3387ZM14.0851 15.0242C13.3512 15.7581 11.0165 15.746 10.3109 15.0242C10.2222 14.9355 10.0649 14.9355 9.97622 15.0242C9.87542 15.125 9.87542 15.2823 9.97622 15.371C10.8956 16.2903 13.4964 16.2903 14.4198 15.371C14.5206 15.2823 14.5206 15.125 14.4198 15.0242C14.3311 14.9355 14.1738 14.9355 14.0851 15.0242ZM14.3956 12C13.8472 12 13.4036 12.4476 13.4036 13.004C13.4036 13.5524 13.8512 13.996 14.3956 13.996C14.952 13.996 15.3996 13.5484 15.3996 13.004C15.3996 12.4476 14.9561 12 14.3956 12Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/RefreshCwIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const RefreshCwIcon_RefreshCwIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const RefreshCwIcon_RefreshCwIcon = ({ size = 16, width = size, height = size, c
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M4.74187 11.9942C4.74187 11.2515 4.85799 10.5087 5.09024 9.77756C5.37858 8.86955 5.84417 8.02767 6.46007 7.30059C7.07597 6.57351 7.82998 5.97565 8.67849 5.54159C9.52555 5.10305 10.451 4.83627 11.4017 4.7566C12.3523 4.67693 13.3093 4.78594 14.2176 5.07737C15.1466 5.37911 15.9827 5.85493 16.7027 6.47002H15.4834C15.0073 6.47002 14.6125 6.8646 14.6125 7.34043C14.6125 7.81625 15.0073 8.21083 15.4834 8.21083H18.9671C19.4432 8.21083 19.8381 7.81625 19.8381 7.34043V3.87041C19.8381 3.39458 19.4432 3 18.9671 3C18.491 3 18.0962 3.39458 18.0962 3.87041V5.37911C17.1324 4.48549 16.006 3.83559 14.7402 3.4294C12.4642 2.70986 10.0255 2.89555 7.88885 3.99807C5.75215 5.10058 4.16125 6.96905 3.42966 9.25532C3.13935 10.1489 3 11.0658 3 11.9942C3 12.47 3.39482 12.8646 3.87093 12.8646C4.34705 12.8646 4.74187 12.47 4.74187 11.9942ZM20.9064 10.706C20.8907 10.5927 20.8525 10.4838 20.7942 10.3854C20.7358 10.2871 20.6584 10.2014 20.5665 10.1333C20.4746 10.0652 20.37 10.0162 20.2589 9.98895C20.1478 9.96174 20.0323 9.95695 19.9194 9.97485C19.4432 10.0445 19.1181 10.4855 19.1878 10.9613C19.3503 12.0522 19.2574 13.1431 18.9091 14.2108C18.6207 15.1188 18.1551 15.9607 17.5392 16.6878C16.9233 17.4149 16.1693 18.0127 15.3208 18.4468C14.4738 18.8853 13.5483 19.1521 12.5976 19.2318C11.647 19.3115 10.69 19.2025 9.78168 18.911C8.86864 18.6172 8.02369 18.1437 7.29661 17.5184H8.51592C8.99203 17.5184 9.38685 17.1238 9.38685 16.648C9.38685 16.1721 8.99203 15.7776 8.51592 15.7776H5.03218C4.55607 15.7776 4.16125 16.1721 4.16125 16.648V20.1296C4.16125 20.6054 4.55607 21 5.03218 21C5.50829 21 5.90311 20.6054 5.90311 20.1296V18.6209C6.86695 19.5145 7.99336 20.1644 9.25912 20.5706C10.1649 20.8607 11.0939 21 12.0113 21C13.428 21 14.8215 20.6634 16.1221 20.0019C17.1752 19.4641 18.1107 18.7223 18.8743 17.8198C19.6378 16.9172 20.2141 15.8719 20.5697 14.7447C20.9877 13.4333 21.1038 12.0754 20.9064 10.7176V10.706Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/RocketIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const RocketIcon_RocketIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const RocketIcon_RocketIcon = ({ size = 16, width = size, height = size, color =
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.6024 23H11.3866V19.2422H12.6024V23ZM10.7177 21.7471H9.50186V19.2422H10.7177V21.7471ZM14.4726 21.7471H13.2567V19.2422H14.4726V21.7471ZM12.0185 1C12.2428 1 12.4596 1.08286 12.6269 1.23242C14.9433 3.27841 16.2752 6.35794 16.2753 9.68066V10.2207C16.2792 10.2225 16.2841 10.2237 16.288 10.2256L16.9833 10.6328C17.4133 10.8872 17.7796 11.2368 18.0526 11.6553C18.3257 12.0739 18.4989 12.5506 18.5585 13.0469L19.1425 17.8926L16.1298 17.1826C15.8467 17.9848 15.1726 18.5679 14.3417 18.6436L12.9364 18.7744C12.6295 18.8018 12.3224 18.8135 12.0185 18.8135C11.7145 18.8135 11.4103 18.8139 11.1064 18.7744L9.6962 18.6309C8.86918 18.5557 8.19563 17.9789 7.91006 17.1826L4.85342 17.8926L5.41592 13.0615C5.47455 12.5662 5.6465 12.0913 5.91788 11.6729C6.18935 11.2543 6.55289 10.903 6.98135 10.6475L7.68643 10.2402C7.71035 10.2237 7.7367 10.2111 7.7626 10.1982V9.68066C7.76268 6.35801 9.09068 3.27842 11.4101 1.23242C11.5773 1.08289 11.7942 1.00003 12.0185 1ZM12.0165 2.32129C11.0349 3.27539 10.2598 4.42128 9.73721 5.68652C9.21443 6.95223 8.956 8.31143 8.97842 9.68066V16.333C8.97846 16.9076 9.34349 17.391 9.80557 17.4336L11.2128 17.5615C11.7478 17.6102 12.2862 17.6102 12.8212 17.5615L14.2284 17.4336C14.6905 17.391 15.0555 16.9076 15.0556 16.333V9.68066C15.078 8.31141 14.8196 6.95225 14.2968 5.68652C13.7741 4.42103 12.9984 3.2755 12.0165 2.32129ZM7.60733 11.6963C7.33665 11.8555 7.10688 12.0761 6.93643 12.3398C6.76593 12.6038 6.65976 12.9044 6.62589 13.2168L6.32217 15.8037L7.72061 16.0156C7.7341 16.0083 7.74864 16.0033 7.7626 15.9971V11.6035L7.60733 11.6963ZM16.2753 15.998L17.6649 15.7891L17.3603 13.2012C17.3251 12.8889 17.2186 12.5889 17.0478 12.3252C16.8769 12.0615 16.6466 11.8413 16.3759 11.6816L16.2753 11.6221V15.998ZM14.123 8.70801L12.0067 7.65332L9.90323 8.69336L12.0067 5.38867L14.123 8.70801Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/RotateCwIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const RotateCwIcon_RotateCwIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const RotateCwIcon_RotateCwIcon = ({ size = 16, width = size, height = size, col
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M20.165 9.4631H16.4992C16.0332 9.4631 15.65 9.07995 15.65 8.61396C15.65 8.14796 16.0332 7.76481 16.4992 7.76481H17.9697C16.6442 5.89047 14.4592 4.66853 11.9842 4.66853C7.93524 4.66853 4.65256 7.95121 4.65256 12.0002C4.65256 16.0492 7.93524 19.3318 11.9842 19.3318C16.0332 19.3318 19.3159 16.0492 19.3159 12.0002C19.3159 11.5342 19.699 11.151 20.165 11.151C20.631 11.151 21.0142 11.5342 21.0142 12.0002C21.0142 16.9812 16.9755 21.0198 11.9946 21.0198C7.0136 21.0198 2.97498 16.9812 2.97498 12.0002C2.97498 7.01922 7.0136 2.98059 11.9946 2.98059C15.0184 2.98059 17.6901 4.47178 19.3262 6.74998V5.23808C19.3262 4.77208 19.7094 4.38893 20.1754 4.38893C20.6414 4.38893 21.0245 4.77208 21.0245 5.23808V8.62431C21.0038 9.09031 20.631 9.4631 20.165 9.4631Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/ScanFaceIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ScanFaceIcon_ScanFaceIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const ScanFaceIcon_ScanFaceIcon = ({ size = 16, width = size, height = size, col
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M2.94611 15.5673C3.35753 15.5675 3.69019 15.9009 3.69025 16.3124V18.4491C3.69025 19.4781 4.52355 20.3113 5.55256 20.3114H7.68928C8.10092 20.3114 8.43439 20.6449 8.43439 21.0565H8.44416C8.44398 21.468 8.11057 21.8007 7.69904 21.8007H5.55256C3.70026 21.8005 2.201 20.3014 2.201 18.4491V16.3124C2.20106 15.9008 2.53451 15.5673 2.94611 15.5673ZM21.0584 15.5673C21.4698 15.5675 21.8025 15.9009 21.8026 16.3124V18.4491C21.8026 20.3015 20.3033 21.8006 18.451 21.8007H16.3143C15.9027 21.8007 15.5693 21.468 15.5692 21.0565C15.5692 20.6449 15.9026 20.3114 16.3143 20.3114H18.451C19.4801 20.3113 20.3133 19.4782 20.3133 18.4491V16.3124C20.3134 15.9008 20.6468 15.5673 21.0584 15.5673ZM8.47346 15.6659C8.75769 15.3817 9.21845 15.3622 9.52229 15.6268C10.1985 16.2539 11.0806 16.5965 12.0018 16.5966C12.9229 16.5966 13.805 16.2539 14.4813 15.6268C14.8047 15.3524 15.2849 15.3816 15.5692 15.705C15.8338 16.0088 15.8144 16.4696 15.5203 16.7538C14.5599 17.6358 13.3052 18.1356 12.0018 18.1356C10.6983 18.1356 9.4339 17.6456 8.48322 16.7538C8.17944 16.4598 8.17956 15.9697 8.47346 15.6659ZM12.5115 8.89343C12.933 8.89347 13.2762 9.23666 13.2762 9.65808V13.2352C13.2761 14.0878 12.58 14.7831 11.7274 14.7831H11.3162C10.8949 14.7831 10.5518 14.4407 10.5516 14.0194C10.5516 13.598 10.8948 13.2548 11.3162 13.2548H11.7274C11.7371 13.2548 11.7372 13.2451 11.7469 13.245V9.65808C11.7469 9.23664 12.0901 8.89343 12.5115 8.89343ZM8.13068 8.89343C8.54207 8.89357 8.86485 9.22623 8.86506 9.62781V11.0594C8.8649 11.4709 8.53231 11.8034 8.13068 11.8036C8.12088 11.8036 8.12092 11.5389 8.12092 11.5389V11.8036C7.70937 11.8036 7.38571 11.4709 7.38557 11.0692V9.62781C7.38578 9.21635 7.71917 8.89343 8.13068 8.89343ZM15.991 8.88367C16.4025 8.88378 16.7359 9.21642 16.7362 9.62781V11.0594C16.736 11.4709 16.4025 11.8035 15.991 11.8036C15.5795 11.8036 15.2461 11.471 15.2459 11.0594V9.62781C15.2461 9.21635 15.5795 8.88367 15.991 8.88367ZM7.68928 2.1991C8.10092 2.1991 8.43439 2.53257 8.43439 2.94421C8.43424 3.35572 8.10082 3.68835 7.68928 3.68835H5.55256C4.52366 3.68847 3.69043 4.52177 3.69025 5.55066V7.68738H3.43537V7.69714H3.70002C3.70002 8.10866 3.36735 8.44206 2.95588 8.44226C2.54424 8.44226 2.201 8.10879 2.201 7.69714V5.55066C2.20117 3.69849 3.70037 2.19921 5.55256 2.1991H7.68928ZM18.451 2.1991C20.3032 2.19916 21.8024 3.69846 21.8026 5.55066V7.68738L21.5379 7.69714H21.8026C21.8026 8.10863 21.4698 8.44201 21.0584 8.44226C20.6468 8.44226 20.3133 8.10879 20.3133 7.69714V5.55066C20.3131 4.52174 19.4799 3.68841 18.451 3.68835H16.3143C15.9027 3.68835 15.5693 3.35572 15.5692 2.94421C15.5692 2.53257 15.9026 2.1991 16.3143 2.1991H18.451Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/SearchIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const SearchIcon_SearchIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const SearchIcon_SearchIcon = ({ size = 16, width = size, height = size, color =
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M20.2361 18.5672L17.2598 15.5884C19.4534 12.5941 19.1959 8.36667 16.49 5.66077C13.5009 2.67167 8.65299 2.67167 5.66388 5.66077C2.67478 8.64987 2.67478 13.4978 5.66388 16.4869C8.36978 19.1928 12.5973 19.4503 15.5915 17.2567L18.5703 20.2355C19.0312 20.6964 19.7752 20.6964 20.2361 20.2355C20.6969 19.7721 20.6969 19.0281 20.2361 18.5672ZM6.91256 15.2357C4.61345 12.9366 4.61345 9.20856 6.91256 6.90945C9.21167 4.61034 12.9397 4.61034 15.2388 6.90945C17.5379 9.20856 17.5379 12.9366 15.2388 15.2357C12.9423 17.5348 9.21425 17.5348 6.91256 15.2357Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/SearchListIcon.js

@@ -1,11 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const SearchListIcon_SearchListIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
-    const stroke = props.stroke || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -14,8 +12,8 @@ const SearchListIcon_SearchListIcon = ({ size = 16, width = size, height = size,
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M2.66853 13.3356H6.66892C7.03716 13.3356 7.33635 13.0365 7.33635 12.6682C7.33635 12.3 7.03716 12.0029 6.66892 12.0029H2.66853C2.30029 12.0029 2.0011 12.3021 2.0011 12.6703C2.0011 13.0385 2.30029 13.3356 2.66853 13.3356ZM21.8106 18.9073L19.5154 16.6121C20.2267 15.7041 20.6682 14.5784 20.6682 13.3356C20.6682 10.3897 18.2788 8.00248 15.335 8.00248C12.3912 8.00248 9.99979 10.3897 9.99979 13.3356C9.99979 16.2815 12.3891 18.6688 15.333 18.6688C16.5758 18.6688 17.7035 18.2252 18.6094 17.516L20.9067 19.8133C21.1557 20.0622 21.5595 20.0622 21.8106 19.8133C22.0616 19.5622 22.0616 19.1584 21.8106 18.9073ZM18.1931 16.1267C18.1826 16.1372 18.1638 16.1414 18.1554 16.1539C18.1449 16.1644 18.1408 16.1832 18.1282 16.1916C17.4064 16.8967 16.4251 17.3339 15.335 17.3339C13.1256 17.3339 11.3347 15.543 11.3347 13.3336C11.3347 11.1241 13.1256 9.33316 15.335 9.33316C17.5445 9.33316 19.3354 11.1262 19.3354 13.3356C19.3375 14.4236 18.8982 15.407 18.1931 16.1267ZM2.66853 5.33486H14.6697C15.0379 5.33486 15.3371 5.03567 15.3371 4.66743C15.3371 4.29919 15.0379 4 14.6697 4H2.66853C2.30029 4 2.0011 4.29919 2.0011 4.66743C2.0011 5.03567 2.30029 5.33486 2.66853 5.33486ZM8.00169 8.00039H2.66853C2.30029 8.00039 2.0011 8.29958 2.0011 8.66782C2.0011 9.03606 2.30029 9.33525 2.66853 9.33525H8.00169C8.36992 9.33525 8.66912 9.03606 8.66912 8.66782C8.66912 8.29958 8.36992 8.00039 8.00169 8.00039ZM8.00169 16.0033H2.66853C2.30029 16.0033 2.0011 16.3025 2.0011 16.6707C2.0011 17.0389 2.30029 17.3381 2.66853 17.3381H8.00169C8.36992 17.3381 8.66912 17.0389 8.66912 16.6707C8.66912 16.3004 8.36992 16.0033 8.00169 16.0033Z",
-            fill: fill,
-            stroke: stroke,
+            fill: _color,
+            stroke: _color,
             strokeWidth: 0.216541
         })
     });

package/dist/web/SearchPlusIcon.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const SearchPlusIcon_SearchPlusIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
@@ -14,11 +13,11 @@ const SearchPlusIcon_SearchPlusIcon = ({ size = 16, width = size, height = size,
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M11.7617 3C16.6223 3 20.5771 6.95482 20.5771 11.8154C20.5771 14.1745 19.6401 16.3144 18.126 17.8984L21.0703 20.8418C21.1973 20.969 21.2686 21.1416 21.2686 21.3213C21.2684 21.5011 21.1965 21.6737 21.0693 21.8008C21.0065 21.8639 20.9318 21.914 20.8496 21.9482C20.7673 21.9825 20.679 22 20.5898 22C20.5008 22 20.4123 21.9825 20.3301 21.9482C20.2479 21.914 20.1731 21.8639 20.1104 21.8008L17.1133 18.8037C15.6276 19.9443 13.775 20.6309 11.7617 20.6309C6.90118 20.6308 2.94637 16.676 2.94629 11.8154C2.94629 6.95483 6.90113 3.00002 11.7617 3ZM11.7617 4.35645C7.64907 4.35647 4.30273 7.70278 4.30273 11.8154C4.30282 15.928 7.64912 19.2744 11.7617 19.2744C15.8743 19.2744 19.2206 15.928 19.2207 11.8154C19.2207 7.70276 15.8744 4.35645 11.7617 4.35645ZM11.7617 8.08594C11.9415 8.08594 12.1141 8.15709 12.2412 8.28418C12.3683 8.4113 12.4394 8.5839 12.4395 8.76367V11.1377H14.8516C15.0313 11.1378 15.204 11.2089 15.3311 11.3359C15.4581 11.4631 15.5293 11.6357 15.5293 11.8154C15.5293 11.9952 15.4581 12.1678 15.3311 12.2949C15.204 12.422 15.0313 12.4931 14.8516 12.4932H12.4395V14.8672C12.4393 15.0469 12.3683 15.2196 12.2412 15.3467C12.1141 15.4737 11.9415 15.5449 11.7617 15.5449C11.582 15.5449 11.4094 15.4737 11.2822 15.3467C11.1552 15.2196 11.0841 15.0469 11.084 14.8672V12.4932H8.70996C8.53025 12.4931 8.35755 12.422 8.23047 12.2949C8.1034 12.1678 8.03226 11.9952 8.03223 11.8154C8.03223 11.6357 8.10345 11.4631 8.23047 11.3359C8.35755 11.2089 8.53025 11.1378 8.70996 11.1377H11.084V8.76367C11.084 8.5839 11.1551 8.4113 11.2822 8.28418C11.4094 8.15707 11.5819 8.08595 11.7617 8.08594Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M20.5771 11.8154C20.5771 6.95482 16.6223 3 11.7617 3C6.90113 3.00002 2.94629 6.95483 2.94629 11.8154C2.94637 16.676 6.90118 20.6308 11.7617 20.6309C13.775 20.6309 15.6276 19.9443 17.1133 18.8037L20.1104 21.8008C20.1731 21.8639 20.2479 21.914 20.3301 21.9482C20.4123 21.9825 20.5008 22 20.5898 22C20.679 22 20.7673 21.9825 20.8496 21.9482C20.9318 21.914 21.0065 21.8639 21.0693 21.8008C21.1965 21.6737 21.2684 21.5011 21.2686 21.3213C21.2686 21.1416 21.1973 20.969 21.0703 20.8418L18.126 17.8984C19.6401 16.3144 20.5771 14.1745 20.5771 11.8154ZM19.1211 11.8154C19.1211 7.75799 15.8192 4.45605 11.7617 4.45605C7.83104 4.45608 4.60951 7.55497 4.41211 11.4375L4.40234 11.8154C4.40243 15.8728 7.70435 19.1748 11.7617 19.1748V19.2744C7.64912 19.2744 4.30282 15.928 4.30273 11.8154C4.30273 7.70278 7.64907 4.35647 11.7617 4.35645C15.8744 4.35645 19.2207 7.70276 19.2207 11.8154C19.2206 15.928 15.8743 19.2744 11.7617 19.2744V19.1748C15.6924 19.1748 18.9139 16.0758 19.1113 12.1934L19.1211 11.8154ZM10.9844 14.8672V12.5928H8.70996C8.50394 12.5927 8.30612 12.5112 8.16016 12.3652C8.01426 12.2193 7.93265 12.0215 7.93262 11.8154C7.93262 11.6093 8.01434 11.4116 8.16016 11.2656C8.30612 11.1197 8.50394 11.0382 8.70996 11.0381V11.1377C8.53025 11.1378 8.35755 11.2089 8.23047 11.3359C8.10345 11.4631 8.03223 11.6357 8.03223 11.8154C8.03226 11.9952 8.1034 12.1678 8.23047 12.2949C8.35755 12.422 8.53025 12.4931 8.70996 12.4932H11.084V14.8672C11.0841 15.0469 11.1552 15.2196 11.2822 15.3467C11.4094 15.4737 11.582 15.5449 11.7617 15.5449C11.9415 15.5449 12.1141 15.4737 12.2412 15.3467C12.3683 15.2196 12.4393 15.0469 12.4395 14.8672V12.4932H14.8516C15.0313 12.4931 15.204 12.422 15.3311 12.2949C15.4581 12.1678 15.5293 11.9952 15.5293 11.8154C15.5293 11.6357 15.4581 11.4631 15.3311 11.3359C15.204 11.2089 15.0313 11.1378 14.8516 11.1377V11.0381C15.0576 11.0382 15.2554 11.1197 15.4014 11.2656C15.5472 11.4116 15.6289 11.6093 15.6289 11.8154C15.6289 12.0215 15.5473 12.2193 15.4014 12.3652C15.2554 12.5112 15.0576 12.5927 14.8516 12.5928H12.5391V14.8672C12.5389 15.0732 12.4575 15.271 12.3115 15.417C12.1839 15.5445 12.0168 15.6239 11.8389 15.6416L11.7617 15.6445C11.5556 15.6445 11.3579 15.5628 11.2119 15.417C11.066 15.271 10.9845 15.0732 10.9844 14.8672ZM12.4395 8.76367C12.4394 8.5839 12.3683 8.4113 12.2412 8.28418C12.1141 8.15709 11.9415 8.08594 11.7617 8.08594C11.5819 8.08595 11.4094 8.15707 11.2822 8.28418C11.1551 8.4113 11.084 8.5839 11.084 8.76367V11.1377H8.70996V11.0381H10.9844V8.76367C10.9844 8.55756 11.0659 8.35986 11.2119 8.21387C11.3579 8.06792 11.5555 7.98634 11.7617 7.98633L11.8389 7.98926C12.0168 8.00692 12.1838 8.08625 12.3115 8.21387C12.4392 8.34155 12.5185 8.50863 12.5361 8.68652L12.5391 8.76367V11.0381H14.8516V11.1377H12.4395V8.76367ZM20.6768 11.8154C20.6767 14.1666 19.7554 16.3012 18.2637 17.8955L21.1406 20.7715C21.2863 20.9174 21.3682 21.1152 21.3682 21.3213C21.368 21.5274 21.2861 21.7254 21.1406 21.8711C21.0685 21.9436 20.982 22.0018 20.8877 22.041C20.8168 22.0704 20.742 22.0892 20.666 22.0967L20.5898 22.0996C20.4878 22.0996 20.3864 22.0802 20.292 22.041C20.1977 22.0018 20.1111 21.9436 20.0391 21.8711V21.8701L17.1035 18.9346C15.7078 19.9849 13.9999 20.6434 12.1416 20.7227L11.7617 20.7305C6.84595 20.7304 2.84676 16.7312 2.84668 11.8154C2.84668 6.89961 6.8459 2.90041 11.7617 2.90039L12.2197 2.91211C16.9236 3.15133 20.6768 7.0532 20.6768 11.8154Z",
-                fill: fill
+                fill: _color
             })
         ]
     });

package/dist/web/SecureTips1Icon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const SecureTips1Icon_SecureTips1Icon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const SecureTips1Icon_SecureTips1Icon = ({ size = 16, width = size, height = siz
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.4815 4.92658C12.6854 4.92938 12.8808 5.00809 13.0297 5.14732C13.1785 5.28654 13.2701 5.47628 13.2866 5.67945C13.303 5.88261 13.243 6.0846 13.1185 6.24593C12.9939 6.40726 12.8136 6.51634 12.6129 6.55185L12.4797 6.56265H4.63598V19.3614H17.4366V11.5177C17.4366 11.1127 17.7335 10.7743 18.1223 10.7113L18.2555 10.7005C18.6623 10.7005 18.9988 10.9975 19.0636 11.3845L19.0744 11.5195V20.1804C19.0746 20.3744 19.006 20.5623 18.8808 20.7106C18.7555 20.8588 18.5818 20.9579 18.3905 20.9903L18.2537 20.9993H3.81884C3.62467 20.9998 3.43663 20.9313 3.28828 20.806C3.13993 20.6808 3.04091 20.5069 3.00891 20.3153L2.99991 20.1804V5.74371C2.99991 5.33695 3.29688 5.00037 3.68385 4.93558L3.81884 4.92478H12.4815V4.92658ZM18.2555 3.00073C18.983 3.00073 19.6807 3.28972 20.1951 3.80413C20.7095 4.31854 20.9985 5.01623 20.9985 5.74371C20.9985 6.4712 20.7095 7.16888 20.1951 7.68329C19.6807 8.1977 18.983 8.48669 18.2555 8.48669C17.528 8.48669 16.8303 8.1977 16.3159 7.68329C15.8015 7.16888 15.5125 6.4712 15.5125 5.74371C15.5125 5.01623 15.8015 4.31854 16.3159 3.80413C16.8303 3.28972 17.528 3.00073 18.2555 3.00073ZM18.2555 4.6386C18.1065 4.63259 17.9578 4.65674 17.8184 4.70962C17.679 4.76249 17.5516 4.84299 17.4441 4.94629C17.3365 5.04958 17.251 5.17354 17.1925 5.31073C17.1341 5.44791 17.1039 5.59549 17.1039 5.74461C17.1039 5.89373 17.1341 6.04131 17.1925 6.1785C17.251 6.31568 17.3365 6.43964 17.4441 6.54294C17.5516 6.64623 17.679 6.72673 17.8184 6.77961C17.9578 6.83248 18.1065 6.85664 18.2555 6.85062C18.5491 6.85062 18.8306 6.734 19.0382 6.52642C19.2458 6.31883 19.3624 6.03728 19.3624 5.74371C19.3624 5.45014 19.2458 5.16859 19.0382 4.96101C18.8306 4.75342 18.5491 4.6368 18.2555 4.6368V4.6386Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/SecureTips2Icon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const SecureTips2Icon_SecureTips2Icon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const SecureTips2Icon_SecureTips2Icon = ({ size = 16, width = size, height = siz
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12 18.1714C15.4714 18.1714 18.1714 15.3429 18.1714 12C18.1714 8.65714 15.4714 5.82857 12 5.82857C8.52857 5.82857 5.82857 8.65714 5.82857 12C5.82857 15.3429 8.52857 18.1714 12 18.1714ZM12 6.98571C14.7 6.98571 17.0143 9.17143 17.0143 12C17.0143 13.1571 16.6286 14.1857 15.9857 14.9571L9.04286 8.01429C9.81429 7.37143 10.8429 6.98571 12 6.98571ZM8.01429 9.04286L14.9571 15.9857C14.1857 16.6286 13.0286 17.0143 12 17.0143C9.3 17.0143 6.98571 14.8286 6.98571 12C6.98571 10.8429 7.37143 9.81429 8.01429 9.04286ZM19.5857 3H4.41429C3.64286 3 3 3.64286 3 4.41429V19.5857C3 20.3571 3.64286 21 4.41429 21H19.5857C20.3571 21 21 20.3571 21 19.5857V4.41429C21 3.64286 20.3571 3 19.5857 3ZM19.5857 19.5857H4.41429V4.41429H19.5857V19.5857Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/SendIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const SendIcon_SendIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const SendIcon_SendIcon = ({ size = 16, width = size, height = size, color = 'cu
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M21.1895 7.37109C21.7803 8.63216 22.1104 10.0359 22.1104 11.5127C22.1101 17.0098 17.5659 21.4343 12 21.4346C6.43384 21.4346 1.88889 17.01 1.88867 11.5127C1.88867 10.0359 2.21872 8.63217 2.80957 7.37109L3.62402 7.75293L4.43945 8.13477C3.9579 9.16258 3.68945 10.3061 3.68945 11.5127C3.68967 15.9811 7.3928 19.6348 12 19.6348C16.6069 19.6345 20.3094 15.9809 20.3096 11.5127C20.3096 10.3062 20.0411 9.16256 19.5596 8.13477L20.375 7.75293L21.1895 7.37109ZM12.002 2.2627C12.0347 2.26271 12.0671 2.26943 12.0967 2.2832C12.1262 2.29698 12.1523 2.31697 12.1729 2.3418L15.2256 6.04883C15.2512 6.08004 15.2678 6.11757 15.2725 6.15723C15.2771 6.1969 15.2697 6.23741 15.252 6.27344C15.2341 6.30957 15.2058 6.34094 15.1709 6.3623C15.1361 6.38352 15.0958 6.39443 15.0547 6.39453H12.8789V12.3594H11.125V6.39453H8.94922C8.90813 6.39447 8.86782 6.3835 8.83301 6.3623C8.79809 6.34094 8.76982 6.30957 8.75195 6.27344C8.73421 6.23739 8.7268 6.19693 8.73145 6.15723C8.73616 6.11754 8.75265 6.08005 8.77832 6.04883L11.8311 2.3418C11.8516 2.31703 11.8777 2.29696 11.9072 2.2832C11.9368 2.26947 11.9692 2.2627 12.002 2.2627Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/SettingsIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const SettingsIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const SettingsIcon = ({ size = 16, width = size, height = size, color = 'current
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M21.7908 10.049C21.6739 9.4314 21.2968 9.03239 20.8301 9.03239C20.8241 9.03239 20.8181 9.03244 20.8148 9.03256H20.7288C19.379 9.03256 18.2809 7.93441 18.2809 6.58459C18.2809 6.14654 18.4922 5.65545 18.494 5.65121C18.7359 5.1067 18.5498 4.43898 18.0615 4.09833L18.032 4.07752L15.5511 2.69936L15.5197 2.6856C15.3581 2.61535 15.1813 2.57973 14.994 2.57973C14.6103 2.57973 14.2329 2.73376 13.9846 2.99148C13.7125 3.27235 12.7733 4.07408 12.0516 4.07408C11.3234 4.07408 10.3786 3.2566 10.1054 2.97053C9.85581 2.70755 9.47539 2.55054 9.08777 2.55054C8.90419 2.55054 8.73052 2.58491 8.57169 2.65265L8.53945 2.66632L5.97107 4.07715L5.94073 4.09819C5.45089 4.43853 5.26375 5.10565 5.50539 5.64988C5.50752 5.65477 5.71914 6.14319 5.71914 6.58453C5.71914 7.93435 4.62099 9.0325 3.27117 9.0325H3.1866C3.18071 9.03239 3.17486 9.0323 3.16903 9.0323C2.70275 9.0323 2.32597 9.43135 2.20913 10.049C2.2006 10.0943 2.00029 11.168 2.00029 12.0078C2.00029 12.8476 2.2006 13.9213 2.20915 13.9667C2.32608 14.5843 2.70309 14.9833 3.16968 14.9833C3.17559 14.9833 3.18171 14.9832 3.18523 14.9831H3.27117C4.62099 14.9831 5.71914 16.0812 5.71914 17.431C5.71914 17.8696 5.50789 18.3601 5.50601 18.3644C5.26432 18.9085 5.44987 19.5761 5.93786 19.9177L5.96683 19.9379L8.40041 21.2988L8.43134 21.3124C8.59287 21.3834 8.76924 21.4193 8.95553 21.4193C9.34468 21.4193 9.72482 21.2586 9.9724 20.9894C10.318 20.6138 11.2558 19.8383 11.9484 19.8383C12.6983 19.8383 13.66 20.7077 13.9375 21.012C14.1856 21.2857 14.5683 21.4492 14.9614 21.4494C15.1441 21.4494 15.3174 21.4146 15.4764 21.346L15.508 21.3324L18.0306 19.9382L18.0604 19.9173C18.5494 19.5766 18.736 18.9095 18.4949 18.3665C18.4928 18.3615 18.2809 17.8666 18.2809 17.4311C18.2809 16.0813 19.379 14.9831 20.7288 14.9831L20.8122 14.9831C20.8178 14.9832 20.8233 14.9833 20.8288 14.9833C21.2964 14.9832 21.6739 14.5842 21.7906 13.967C21.7927 13.9561 21.9997 12.8686 21.9997 12.0078C21.9997 11.1641 21.7993 10.0941 21.7908 10.049ZM8.96823 20.0062L6.83943 18.8158C6.93324 18.5749 7.12439 18.0125 7.12439 17.4311C7.12439 15.412 5.5706 13.7427 3.56946 13.5892C3.5206 13.3044 3.40566 12.5745 3.40566 12.0079C3.40566 11.442 3.52054 10.7115 3.56938 10.4265C5.5706 10.273 7.12439 8.60375 7.12439 6.58456C7.12439 6.00466 6.93426 5.44386 6.84065 5.20284L9.10594 3.95866C9.10588 3.95866 9.106 3.95866 9.10594 3.95866C9.18758 4.04207 9.51442 4.36626 9.96549 4.6877C10.7025 5.21308 11.4044 5.47948 12.0516 5.47948C12.6924 5.47948 13.3887 5.21825 14.1211 4.70302C14.5693 4.38776 14.8945 4.06985 14.9759 3.98783C14.9758 3.98786 14.9761 3.9878 14.9759 3.98783L17.1601 5.20094C17.0664 5.44192 16.8755 6.00389 16.8755 6.58459C16.8755 8.60378 18.4293 10.2731 20.4305 10.4265C20.4793 10.7119 20.5943 11.4437 20.5943 12.0079C20.5943 12.5743 20.4794 13.3045 20.4306 13.5893C18.4294 13.7427 16.8756 15.412 16.8756 17.4312C16.8756 18.0118 17.066 18.5729 17.1597 18.8139L14.9486 20.0358C14.8532 19.9345 14.5314 19.6045 14.0859 19.2737C13.3346 18.7158 12.6154 18.4329 11.9483 18.4329C11.2877 18.4329 10.5739 18.7105 9.82693 19.2579C9.38786 19.5798 9.06384 19.9065 8.96823 20.0062ZM15.4987 11.9949C15.4987 10.0419 13.9097 8.45302 11.9566 8.45302C10.0036 8.45302 8.41477 10.0419 8.41477 11.9949C8.41477 13.9479 10.0036 15.5368 11.9566 15.5368C13.9097 15.5368 15.4987 13.9479 15.4987 11.9949ZM11.9566 9.85842C13.1348 9.85842 14.0933 10.8168 14.0933 11.9949C14.0933 13.173 13.1348 14.1315 11.9566 14.1315C10.7786 14.1315 9.82017 13.173 9.82017 11.9949C9.82017 10.8168 10.7786 9.85842 11.9566 9.85842Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/ShareIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ShareIcon_ShareIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const ShareIcon_ShareIcon = ({ size = 16, width = size, height = size, color = '
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M16.6638 2.14331C18.8093 2.14331 20.5554 3.88849 20.5554 6.03394C20.5554 8.17943 18.8093 9.92456 16.6638 9.92456C15.7593 9.92448 14.9268 9.61323 14.2654 9.09351L11.0105 10.9636C11.1542 11.3692 11.2332 11.8053 11.2332 12.2595C11.2331 12.7204 11.1514 13.1624 11.0037 13.573L13.8054 15.3289C14.5167 14.5583 15.5349 14.0751 16.6638 14.075C18.8093 14.075 20.5553 15.8201 20.5554 17.9656C20.5554 20.1111 18.8093 21.8562 16.6638 21.8562C14.5185 21.856 12.7732 20.1109 12.7732 17.9656C12.7732 17.5078 12.8529 17.0682 12.9988 16.6599L10.1931 14.9021C9.48206 15.6685 8.46804 16.1501 7.34253 16.1501C5.19714 16.1501 3.45204 14.4049 3.4519 12.2595C3.4519 10.114 5.19706 8.3689 7.34253 8.3689C8.47508 8.3689 9.4961 8.85486 10.2078 9.62964L13.2429 7.88647C12.9434 7.33543 12.7732 6.70405 12.7732 6.03394C12.7733 3.88864 14.5185 2.1435 16.6638 2.14331ZM16.6638 15.6316C15.3767 15.6318 14.3299 16.6785 14.3298 17.9656C14.3298 19.2527 15.3767 20.3003 16.6638 20.3005C17.9511 20.3005 18.9988 19.2528 18.9988 17.9656C18.9987 16.6784 17.9511 15.6316 16.6638 15.6316ZM7.34253 9.92456C6.05524 9.92456 5.00854 10.9722 5.00854 12.2595C5.00868 13.5467 6.05534 14.5935 7.34253 14.5935C8.62974 14.5935 9.67736 13.5467 9.67749 12.2595C9.67749 10.9722 8.62982 9.92456 7.34253 9.92456ZM16.6638 3.69995C15.3767 3.70014 14.3299 4.74681 14.3298 6.03394C14.3298 7.32111 15.3767 8.3687 16.6638 8.3689C17.9511 8.3689 18.9988 7.32123 18.9988 6.03394C18.9987 4.74669 17.9511 3.69995 16.6638 3.69995Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/ShieldAlertFilledIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ShieldAlertFilledIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const ShieldAlertFilledIcon = ({ size = 16, width = size, height = size, color =
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.9287 2.14844C12.9383 2.15645 14.0936 2.99048 15.8984 3.72168C16.9795 4.14471 18.1211 4.39268 19.2803 4.45605H19.2852L20.8242 4.47852V5.21777L20.8281 13.3564C20.8281 14.4508 20.5063 15.5933 19.8711 16.7549C19.2702 17.8238 18.5096 18.7948 17.6162 19.6348C16.7763 20.4441 15.8302 21.1356 14.8037 21.6895C13.7767 22.2285 12.8073 22.5136 12.001 22.5137C11.1898 22.5137 10.2292 22.235 9.21484 21.7021C8.24049 21.1902 7.26276 20.4747 6.38281 19.6348C4.33984 17.6861 3.17196 15.3983 3.17188 13.3584V4.47852L4.71582 4.45605C5.8778 4.40082 7.023 4.15267 8.10352 3.72168C9.90698 2.98939 11.0278 2.17972 11.0771 2.14355L11.9961 1.47656L12.9287 2.14844ZM12.0039 14.3906C11.2465 14.3906 10.6318 14.9942 10.6318 15.7383C10.6319 16.4823 11.2466 17.0859 12.0039 17.0859C12.7611 17.0858 13.3749 16.4822 13.375 15.7383C13.375 14.9942 12.7612 14.3908 12.0039 14.3906ZM11.9971 7.99414C11.5113 7.99424 11.1172 8.38099 11.1172 8.85742V12.5244C11.1173 13.0016 11.5114 13.3876 11.9971 13.3877C12.4828 13.3877 12.8768 13.0016 12.877 12.5244V8.85742C12.877 8.38091 12.4829 7.99414 11.9971 7.99414Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/ShieldAlertIcon.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ShieldAlertIcon_ShieldAlertIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
@@ -14,11 +13,11 @@ const ShieldAlertIcon_ShieldAlertIcon = ({ size = 16, width = size, height = siz
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M20.8246 5.21933V4.48011L19.2855 4.45773H19.2807C18.1213 4.39438 16.9795 4.14647 15.8983 3.72334C14.0935 2.99213 12.9383 2.15853 12.9287 2.15052L11.9959 1.47852L11.0775 2.14573C11.0295 2.18091 9.90786 2.99052 8.10306 3.72331C7.02254 4.1543 5.87785 4.40249 4.71587 4.45773L3.17188 4.48013V13.3601C3.17188 15.4001 4.33986 17.6881 6.38305 19.6369C7.26305 20.4769 8.24066 21.1921 9.21507 21.7041C10.2294 22.2369 11.1894 22.5153 12.0007 22.5153C12.8071 22.5153 13.7767 22.2305 14.8039 21.6913C15.8304 21.1374 16.7767 20.4463 17.6167 19.6369C18.51 18.797 19.2702 17.8258 19.8711 16.7569C20.5063 15.5953 20.8279 14.4529 20.8279 13.3585L20.8247 5.22092L20.8246 5.21933ZM11.9559 3.36172L11.9959 3.32973L12.0375 3.36172C12.1735 3.45934 13.4327 4.34253 15.3271 5.11372C17.1831 5.86573 18.9271 5.94891 19.2567 5.95852L19.3175 5.96012L19.3223 13.3601C19.3255 14.9889 18.3239 16.8801 16.5783 18.5505C15.0375 20.0225 13.199 21.0113 12.0007 21.0113C11.4455 21.0113 10.6982 20.7793 9.89827 20.3601C8.9942 19.8725 8.16136 19.2631 7.42306 18.5489C5.67746 16.8801 4.67586 14.9889 4.67586 13.3569V5.95852L4.73984 5.95534C4.81667 5.95534 6.67587 5.92013 8.66947 5.11213C9.82451 4.6488 10.9263 4.06249 11.9559 3.36334V3.36172H11.9559Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("path", {
                 d: "M11.9973 13.3864C12.4831 13.3864 12.8774 13.0005 12.8774 12.5232V8.85638C12.8774 8.37986 12.4831 7.99316 11.9973 7.99316C11.5114 7.99316 11.1171 8.37988 11.1171 8.85638V12.5232C11.1171 13.0005 11.5114 13.3864 11.9973 13.3864ZM12.0036 17.0845C11.2462 17.0845 10.6321 16.4813 10.6321 15.7371C10.6321 14.993 11.2462 14.3898 12.0036 14.3898C12.761 14.3898 13.375 14.993 13.375 15.7371C13.375 16.4813 12.761 17.0845 12.0036 17.0845Z",
-                fill: fill
+                fill: _color
             })
         ]
     });

package/dist/web/ShieldBanIcon.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ShieldBanIcon_ShieldBanIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
@@ -14,7 +13,7 @@ const ShieldBanIcon_ShieldBanIcon = ({ size = 16, width = size, height = size, c
         children: [
             /*#__PURE__*/ jsx("path", {
                 d: "M6.03027 5.8291C5.28445 5.94501 4.78227 5.95502 4.74023 5.95508L4.67578 5.95898V13.3564C4.67578 14.9884 5.67734 16.8801 7.42285 18.5488C8.16114 19.263 8.99437 19.8727 9.89844 20.3604C10.6983 20.7795 11.4458 21.0117 12.001 21.0117C13.1993 21.0115 15.0375 20.0225 16.5781 18.5508C17.0507 18.0986 17.4668 17.6283 17.8252 17.1533L18.915 18.1992C18.5213 18.7112 18.0881 19.193 17.6162 19.6367C16.7763 20.446 15.8302 21.1375 14.8037 21.6914C13.7767 22.2305 12.8073 22.5156 12.001 22.5156C11.1898 22.5156 10.2292 22.2369 9.21484 21.7041C8.24049 21.1921 7.26276 20.4767 6.38281 19.6367C4.33984 17.688 3.17196 15.4002 3.17188 13.3604V4.48047L4.60352 4.45898L6.03027 5.8291ZM12.9287 2.15039C12.9383 2.15841 14.0936 2.99243 15.8984 3.72363C16.9795 4.14666 18.1211 4.39464 19.2803 4.45801H19.2852L20.8242 4.48047V5.2207L20.8281 13.3584C20.8281 14.0078 20.7121 14.6734 20.4873 15.3506L19.2529 14.1162C19.2976 13.8592 19.3227 13.607 19.3223 13.3604L19.3174 5.95996L19.2568 5.95898C18.9272 5.94938 17.1832 5.8653 15.3271 5.11328C13.4328 4.3421 12.1731 3.45894 12.0371 3.36133L11.9961 3.33008L11.9561 3.36133V3.36328C11.2568 3.83816 10.5227 4.2584 9.7627 4.62598L8.63184 3.49512C10.123 2.83135 11.0328 2.17799 11.0771 2.14551L11.9961 1.47852L12.9287 2.15039Z",
-                fill: fill
+                fill: _color
             }),
             /*#__PURE__*/ jsx("rect", {
                 x: 2.92969,
@@ -23,7 +22,7 @@ const ShieldBanIcon_ShieldBanIcon = ({ size = 16, width = size, height = size, c
                 height: 1.7747,
                 rx: 0.887349,
                 transform: "rotate(45 2.92969 0.817383)",
-                fill: fill
+                fill: _color
             })
         ]
     });

package/dist/web/ShieldCheckFilledIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ShieldCheckFilledIcon_ShieldCheckFilledIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const ShieldCheckFilledIcon_ShieldCheckFilledIcon = ({ size = 16, width = size,
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.9287 2.14844C12.9383 2.15645 14.0936 2.99048 15.8984 3.72168C16.9795 4.14471 18.1211 4.39268 19.2803 4.45605H19.2852L20.8242 4.47852V5.21777L20.8281 13.3564C20.8281 14.4508 20.5063 15.5933 19.8711 16.7549C19.2702 17.8238 18.5096 18.7948 17.6162 19.6348C16.7763 20.4441 15.8302 21.1356 14.8037 21.6895C13.7767 22.2285 12.8073 22.5136 12.001 22.5137C11.1898 22.5137 10.2292 22.235 9.21484 21.7021C8.24049 21.1902 7.26276 20.4747 6.38281 19.6348C4.33984 17.6861 3.17196 15.3983 3.17188 13.3584V4.47852L4.71582 4.45605C5.8778 4.40082 7.023 4.15267 8.10352 3.72168C9.90698 2.98939 11.0278 2.17972 11.0771 2.14355L11.9961 1.47656L12.9287 2.14844ZM15.5068 8.67285C15.2834 8.6958 15.0784 8.8063 14.9365 8.98047L11.2422 13.5176L9.03711 11.0215C8.9635 10.9382 8.87425 10.8701 8.77441 10.8213C8.67441 10.7725 8.56518 10.7441 8.4541 10.7373C8.34319 10.7305 8.23205 10.7452 8.12695 10.7812C8.02171 10.8174 7.9242 10.8745 7.84082 10.9482C7.75755 11.0219 7.68941 11.111 7.64062 11.2109C7.59186 11.3108 7.56353 11.4193 7.55664 11.5303C7.5498 11.6413 7.5644 11.7532 7.60059 11.8584C7.63676 11.9636 7.69392 12.0602 7.76758 12.1436L10.1465 14.8359C10.4364 15.1633 10.8407 15.332 11.248 15.332C11.4665 15.3318 11.6824 15.2829 11.8799 15.1895C12.0772 15.096 12.252 14.9597 12.3906 14.791L16.25 10.0498C16.3918 9.87557 16.4594 9.65222 16.4365 9.42871C16.4136 9.20526 16.3021 9.00024 16.1279 8.8584C15.9537 8.71661 15.7303 8.64998 15.5068 8.67285Z",
-            fill: fill
+            fill: _color
         })
     });
 };

package/dist/web/ShieldCheckIcon.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { isThemeColor, useIconsContext } from "../core/index.js";
+import { isThemeColor } from "../core/index.js";
+import { getHexColorFromCSSVariable } from "@particle-network/ui-shared";
 const ShieldCheckIcon_ShieldCheckIcon = ({ size = 16, width = size, height = size, color = 'currentColor', ...props })=>{
-    const { getColor } = useIconsContext();
-    const _color = isThemeColor(color) ? getColor(color) : color;
-    const fill = props.fill || _color;
+    const _color = isThemeColor(color) ? getHexColorFromCSSVariable(color) : color;
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
@@ -13,7 +12,7 @@ const ShieldCheckIcon_ShieldCheckIcon = ({ size = 16, width = size, height = siz
         ...props,
         children: /*#__PURE__*/ jsx("path", {
             d: "M12.7568 1.67188C12.7664 1.67989 13.9219 2.51393 15.7266 3.24512C16.8078 3.66825 17.95 3.91615 19.1094 3.97949H19.1143L20.6533 4.00195V4.74219L20.6562 12.8799C20.6562 13.9743 20.3344 15.1167 19.6992 16.2783C19.0984 17.3471 18.3386 18.3183 17.4453 19.1582C16.6054 19.9675 15.6592 20.659 14.6328 21.2129C13.6056 21.7521 12.6355 22.0371 11.8291 22.0371C11.018 22.0371 10.0582 21.7583 9.04395 21.2256C8.06953 20.7136 7.09192 19.9982 6.21191 19.1582C4.16877 17.2094 3.00004 14.9218 3 12.8818V4.00195L4.54492 3.97949C5.70672 3.92422 6.85129 3.67603 7.93164 3.24512C9.73645 2.51232 10.8583 1.70217 10.9062 1.66699L11.8242 1L12.7568 1.67188ZM11.7842 2.88379V2.88477C10.7547 3.58389 9.65304 4.17048 8.49805 4.63379C6.50447 5.44178 4.64519 5.47656 4.56836 5.47656L4.50488 5.48047V12.8789C4.50504 14.5108 5.50649 16.4016 7.25195 18.0703C7.99018 18.7844 8.82258 19.3943 9.72656 19.8818C10.5265 20.301 11.2739 20.5332 11.8291 20.5332C13.0275 20.5332 14.8664 19.5443 16.4072 18.0723C18.1527 16.4019 19.1545 14.5106 19.1514 12.8818L19.1465 5.48145L19.085 5.48047C18.7546 5.47082 17.0107 5.38752 15.1553 4.63574C13.2624 3.86515 12.0038 2.98251 11.8662 2.88379L11.8242 2.85156L11.7842 2.88379ZM15.791 8.11816C15.9946 8.09743 16.1986 8.15801 16.3574 8.28711C16.5161 8.41644 16.6177 8.60401 16.6387 8.80762C16.6594 9.01132 16.598 9.21619 16.4688 9.375L12.3145 14.4785C12.1783 14.6441 12.0063 14.7784 11.8125 14.8701C11.6189 14.9617 11.4066 15.0095 11.1924 15.0098C10.8424 15.0097 10.4938 14.8827 10.2217 14.6357L10.1094 14.5225L7.54883 11.625C7.48181 11.5492 7.43048 11.4599 7.39746 11.3643C7.36455 11.2685 7.35034 11.1665 7.35645 11.0654C7.36268 10.9643 7.38918 10.8645 7.43359 10.7734C7.47807 10.6824 7.54033 10.6004 7.61621 10.5332C7.69212 10.4662 7.78121 10.4148 7.87695 10.3818C7.97276 10.3489 8.07468 10.3346 8.17578 10.3408C8.2769 10.3471 8.37673 10.3735 8.46777 10.418C8.55863 10.4625 8.64001 10.5248 8.70703 10.6006L11.1904 13.4102L15.2705 8.39844C15.3998 8.23979 15.5874 8.13914 15.791 8.11816ZM11.0527 14.9023L11.1924 14.9102C11.2422 14.9101 11.2925 14.907 11.3418 14.9014C11.2924 14.9069 11.2423 14.9091 11.1924 14.9092C11.1043 14.9092 11.016 14.8999 10.9297 14.8828C10.9703 14.8909 11.0116 14.8981 11.0527 14.9023ZM7.45605 11.0713C7.45072 11.1592 7.46259 11.2477 7.49121 11.3311C7.51996 11.4145 7.56559 11.4925 7.62402 11.5586L10.1846 14.4561L7.62402 11.5576C7.56567 11.4915 7.5209 11.4144 7.49219 11.3311C7.46346 11.2475 7.45161 11.1585 7.45703 11.0703L7.45605 11.0713Z",
-            fill: fill
+            fill: _color
         })
     });
 };