@mirohq/design-system-icons 0.46.0-red-icons.0 → 0.47.0

package/react/sticky-corners.tsx

@@ -4,30 +4,34 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStickyCorners: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeLinecap='round'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
         d='M3 7v-4h4m10 0h4v4m0 10v4h-4m-10 0h-4v-4m13-4v-5h-8v8h5m3-3-3 3m3-3h-3v3'
       />
     )
+  }
 )
 
 IconStickyCorners[iconSymbol] = true

package/react/sticky-eye-closed.tsx

@@ -4,35 +4,39 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStickyEyeClosed: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeLinecap='round'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
         d='M21 11v3m0 0h-7v7m7-7-7 7m-8-18h-2c-.5523 0-1 .4477-1 1v16c0 .5523.4477 1 1 1h10m-4.5-17s.3776.6608 1.0918 1.4082m0 0c.6673.6982 1.6283 1.472 2.8496 1.853m-2.8496-1.853-1.5918 1.5918m4.4414.2612a5.2099 5.2099 0 0 0 1.5586.2388c.5584 0 1.0786-.089 1.5586-.2388m-3.1172 0-.4414 1.7388m3.5586-1.7388.4414 1.7388m-.4414-1.7388c1.2213-.381 2.1823-1.1548 2.8496-1.853m0 0c.7142-.7474 1.0918-1.4082 1.0918-1.4082m-1.0918 1.4082 1.5918 1.5918'
       />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
         d='M14 14v.0001'
       />
     )
+  }
 )
 
 IconStickyEyeClosed[iconSymbol] = true

package/react/sticky-eye-open.tsx

@@ -4,31 +4,35 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStickyEyeOpen: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
-      <circle cx={15} cy={6} r={2} fill='red' />,
+      <circle cx={15} cy={6} r={2} fill='currentColor' />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeLinecap='round'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
         d='M21 11v3m0 0h-7v7m7-7-7 7m-8-18h-2c-.5523 0-1 .4477-1 1v16c0 .5523.4477 1 1 1h10m-5-15c0-.5 2-4 6-4s6 3.5 6 4-2 4-6 4-6-3.5-6-4Z'
       />
     )
+  }
 )
 
 IconStickyEyeOpen[iconSymbol] = true

package/react/sticky-note-stack.tsx

@@ -4,30 +4,34 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStickyNoteStack: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeLinecap='round'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
         d='M21 14v-8h-15v15h8m7-7-7 7m7-7h-7v7m-11-2v-16h15.5'
       />
     )
+  }
 )
 
 IconStickyNoteStack[iconSymbol] = true

package/react/sticky-note-wide.tsx

@@ -4,30 +4,34 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStickyNoteWide: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeLinecap='round'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
         d='M22 12v-7h-20v14h13m7-7-7 7m7-7h-7v7'
       />
     )
+  }
 )
 
 IconStickyNoteWide[iconSymbol] = true

package/react/sticky-note.tsx

@@ -4,35 +4,39 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStickyNote: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeLinecap='round'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
         d='M21 14.5v-11.5h-18v18h11.5m6.5-6.5-6.5 6.5m6.5-6.5h-6.5v6.5'
       />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
         d='M12 3v.0001'
       />
     )
+  }
 )
 
 IconStickyNote[iconSymbol] = true

package/react/sticky-notes-two.tsx

@@ -4,29 +4,33 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStickyNotesTwo: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
         d='M16 8v-4.5a.5.5 0 0 0-.5-.5h-12a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h4.5m8-8h-7.5a.5.5 0 0 0-.5.5v7.5m8-8h4.5a.5.5 0 0 1 .5.5v6.5m-13 1v4.5a.5.5 0 0 0 .5.5h6.5m0 0 6-6m-6 6v-6h6'
       />
     )
+  }
 )
 
 IconStickyNotesTwo[iconSymbol] = true

package/react/stop-circle.tsx

@@ -4,38 +4,42 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStopCircle: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
         d='M21 12c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9Z'
       />,
       <path
-        fill='red'
+        fill='currentColor'
         d='M9 10c0-.5523.4477-1 1-1h4c.5523 0 1 .4477 1 1v4c0 .5523-.4477 1-1 1h-4c-.5523 0-1-.4477-1-1v-4Z'
       />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
         d='M12 11.9999v.0001'
       />
     )
+  }
 )
 
 IconStopCircle[iconSymbol] = true

package/react/story-points.tsx

@@ -4,35 +4,39 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStoryPoints: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        fill='red'
+        fill='currentColor'
         fillRule='evenodd'
         d='M11.046 20.95a9.001 9.001 0 0 1 .954-17.95 9.0008 9.0008 0 0 1 8.953 8.072c-.15-.018-.3-.033-.451-.044-5.644-.422-9.881 3.974-9.475 9.687.006.079.012.157.02.235h-.001Zm8.631-7.95-6.672 6.673c.131-3.856 2.931-6.63 6.672-6.672v-.001Zm3.323-1c0 .333-.143.649-.378.885l-9.737 9.737a1.2566 1.2566 0 0 1-.885.378c-6.075 0-11-4.925-11-11s4.925-11 11-11 11 4.925 11 11Z'
         clipRule='evenodd'
       />,
       <path
-        fill='red'
+        fill='currentColor'
         fillRule='evenodd'
         d='M9.2666 8c0-.5523.4477-1 1-1h3.7301a1 1 0 0 1 .8152 1.5792l-1.3322 1.8751c.103.0586.2041.1232.3022.1938.6523.4699 1.2148 1.2499 1.2148 2.3519 0 1.1274-.5646 1.9136-1.2342 2.3819-.6272.4388-1.3635.6181-1.8973.6181-.9392 0-1.6255-.3592-2.0726-.7321a3.0917 3.0917 0 0 1-.4864-.5092 2.6166 2.6166 0 0 1-.1273-.1839 2.1259 2.1259 0 0 1-.0385-.0636l-.0132-.0235-.0053-.0095-.0022-.0042-.001-.0019-.0005-.0009c-.0003-.0005-.0005-.0009.882-.4712l-.8825.4703c-.2597-.4874-.0752-1.0931.4122-1.3528.4813-.2565 1.0778-.0798 1.3428.3939a.6379.6379 0 0 0 .0297.0424c.0337.0446.0905.1109.1713.1783.1524.1271.3986.2679.7915.2679.1552 0 .4847-.0707.7509-.2569.224-.1567.3806-.3705.3806-.7431 0-.3393-.148-.5592-.3837-.729-.2725-.1963-.6006-.271-.7478-.271a1 1 0 0 1-.8152-1.5792l1.0095-1.4208h-1.7929c-.5523 0-1-.4477-1-1Zm1.6152 5.5279.0001.0002-.0001-.0001v-.0001Zm.0005.001-.0001-.0001-.0001-.0002.0002.0003Z'
         clipRule='evenodd'
       />
     )
+  }
 )
 
 IconStoryPoints[iconSymbol] = true

package/react/stroke-1.tsx

@@ -4,27 +4,31 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStroke1: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        fill='red'
+        fill='currentColor'
         d='M4.3182 19.6818c-.4243-.4242-.4243-1.1121 0-1.5364l13.8272-13.8272c.4243-.4243 1.1122-.4243 1.5364 0 .4243.4242.4243 1.1121 0 1.5363l-13.8272 13.8273c-.4243.4243-1.1121.4243-1.5364 0Z'
       />
     )
+  }
 )
 
 IconStroke1[iconSymbol] = true

package/react/stroke-2.tsx

@@ -4,27 +4,31 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStroke2: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        fill='red'
+        fill='currentColor'
         d='M4.612 19.388c-.816-.8161-.816-2.1392 0-2.9552l11.8208-11.8208c.816-.816 2.1391-.816 2.9552 0 .816.816.816 2.1392 0 2.9552l-11.8208 11.8208c-.816.816-2.1391.816-2.9552 0Z'
       />
     )
+  }
 )
 
 IconStroke2[iconSymbol] = true

package/react/stroke-3.tsx

@@ -4,27 +4,31 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStroke3: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        fill='red'
+        fill='currentColor'
         d='M4.8842 19.1158c-1.179-1.179-1.179-3.0905 0-4.2695l9.9621-9.962c1.179-1.179 3.0905-1.179 4.2695 0 1.1789 1.179 1.1789 3.0904 0 4.2694l-9.9621 9.9621c-1.179 1.1789-3.0905 1.1789-4.2695 0Z'
       />
     )
+  }
 )
 
 IconStroke3[iconSymbol] = true

package/react/stroke-4.tsx

@@ -4,27 +4,31 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStroke4: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        fill='red'
+        fill='currentColor'
         d='M5.137 18.8629c-1.516-1.5161-1.516-3.9742 0-5.4903l8.2356-8.2355c1.5161-1.5161 3.9742-1.5161 5.4903 0 1.5161 1.5161 1.5161 3.9742 0 5.4903l-8.2355 8.2355c-1.5161 1.5161-3.9742 1.5161-5.4903 0Z'
       />
     )
+  }
 )
 
 IconStroke4[iconSymbol] = true

package/react/stroke-5.tsx

@@ -4,27 +4,31 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStroke5: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        fill='red'
+        fill='currentColor'
         d='M5.3726 18.6274c-1.8301-1.8301-1.8301-4.7973 0-6.6274l6.6274-6.6274c1.8301-1.8301 4.7973-1.8301 6.6274 0 1.8301 1.83 1.8301 4.7973 0 6.6274l-6.6274 6.6274c-1.8301 1.8301-4.7973 1.8301-6.6274 0Z'
       />
     )
+  }
 )
 
 IconStroke5[iconSymbol] = true

package/react/stroke-6.tsx

@@ -4,27 +4,31 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconStroke6: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        fill='red'
+        fill='currentColor'
         d='M5.2574 18.6924c-2.3432-2.3432-2.3432-6.1421 0-8.4853l4.9497-4.9497c2.3432-2.3432 6.1421-2.3432 8.4853 0 2.3431 2.3431 2.3431 6.1421 0 8.4852l-4.9498 4.9498c-2.3431 2.3431-6.1421 2.3431-8.4852 0Z'
       />
     )
+  }
 )
 
 IconStroke6[iconSymbol] = true

package/react/switch.tsx

@@ -4,31 +4,35 @@
  */
 import React, { forwardRef, createElement } from 'react'
 import { iconSymbol } from '@mirohq/design-system-base-icon'
+import { useLocalStorage } from '@mirohq/design-system-use-local-storage'
 
 import { StyledIcon } from '../src/icon'
 import type { IconComponentType } from '../src/icon'
 
 export const IconSwitch: IconComponentType = forwardRef(
-  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) =>
-    createElement(
+  ({ size = 'medium', weight = 'normal', ...props }, forwardRef) => {
+    const [debug] = useLocalStorage('DEBUG_ICON', false)
+    return createElement(
       StyledIcon,
       {
         ...props,
         weight,
+        debug,
         size,
         viewBox: '0 0 24 24',
-        fill: 'red',
+        fill: 'none',
         ref: forwardRef,
       },
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeLinecap='round'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
         d='M7 18c-7 0-7-11 0-11h10c7 0 7 11 0 11h-10Z'
       />,
-      <circle cx={8.5} cy={12.5} r={3.5} fill='red' />
+      <circle cx={8.5} cy={12.5} r={3.5} fill='currentColor' />
     )
+  }
 )
 
 IconSwitch[iconSymbol] = true