@particle-network/icons 0.4.0-beta.6 → 0.4.0-beta.8

package/dist/web/InstagramIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const InstagramIcon_InstagramIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/InternetIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const InternetIcon_InternetIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 25 24",
         fill: "none",
         ...props,

package/dist/web/InviteIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const InviteIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/JackpotIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const JackpotIcon_JackpotIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/JoinCommunityIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const JoinCommunityIcon_JoinCommunityIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/KeyboardIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const KeyboardIcon_KeyboardIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/KolInfluencersIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const KolInfluencersIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LanguagesIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LanguagesIcon_LanguagesIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/Layers2Icon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const Layers2Icon_Layers2Icon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LayersIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LayersIcon_LayersIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LayoutBottomIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LayoutBottomIcon_LayoutBottomIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LayoutFloatIcon.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LayoutFloatIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LayoutIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LayoutIcon_LayoutIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LayoutLeftIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LayoutLeftIcon_LayoutLeftIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LayoutRightIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LayoutRightIcon_LayoutRightIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LayoutSplitIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LayoutSplitIcon_LayoutSplitIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LeaderboardIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LeaderboardIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LeafIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LeafIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LinkIcon.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LinkIcon_LinkIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LiquidityAddIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LiquidityAddIcon_LiquidityAddIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LiquidityPoolIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LiquidityPoolIcon_LiquidityPoolIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LiquidityRemoveIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LiquidityRemoveIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/List2Icon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const List2Icon_List2Icon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/ListCheckIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const ListCheckIcon_ListCheckIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/ListCopyDownIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const ListCopyDownIcon_ListCopyDownIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/ListCopyUpIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const ListCopyUpIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/ListHistoryIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const ListHistoryIcon_ListHistoryIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/ListIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const ListIcon_ListIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/ListSettingIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const ListSettingIcon_ListSettingIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/ListSettingsIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const ListSettingsIcon_ListSettingsIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/Lock2Icon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const Lock2Icon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/LockIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const LockIcon_LockIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/MailHeartIcon.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const MailHeartIcon_MailHeartIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsxs("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/MailIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const MailIcon_MailIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/ManualIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const ManualIcon_ManualIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,

package/dist/web/MarketStatsIcon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { twMerge } from "tailwind-merge";
+import { useWebColor } from "../core/index.js";
 const MarketStatsIcon_MarketStatsIcon = ({ size = 16, width = size, height = size, className, color = 'currentColor', ...props })=>{
-    const clsx = 'currentColor' !== color && `text-${color}`;
+    const clsx = useWebColor(color, className);
     return /*#__PURE__*/ jsx("svg", {
         width: width,
         height: height,
-        className: twMerge(clsx, className),
+        className: clsx,
         viewBox: "0 0 24 24",
         fill: "none",
         ...props,