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

package/react/globe.tsx

@@ -4,30 +4,38 @@
  */
 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 IconGlobe: 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'
         strokeWidth='var(--svg-stroke-width)'
         d='M11.6633 3c-2.1685 1.6207-3.6633 5.0418-3.6633 9 0 3.9582 1.4948 7.3793 3.6633 9m.6734-18c2.1685 1.6207 3.6633 5.0418 3.6633 9 0 3.9582-1.4948 7.3793-3.6633 9m-8.3367-12h16m-16 6h16m1-3c0 4.9706-4.0294 9-9 9s-9-4.0294-9-9 4.0294-9 9-9 9 4.0294 9 9Z'
       />,
-      <path stroke='red' strokeWidth='var(--svg-stroke-width)' d='M12 3' />
+      <path
+        stroke='currentColor'
+        strokeWidth='var(--svg-stroke-width)'
+        d='M12 3'
+      />
     )
+  }
 )
 
 IconGlobe[iconSymbol] = true

package/react/graduation-cap.tsx

@@ -4,24 +4,27 @@
  */
 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 IconGraduationCap: 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'
         strokeMiterlimit={1.414}
@@ -29,11 +32,12 @@ export const IconGraduationCap: IconComponentType = forwardRef(
         d='m2 8.2308 10.5-5.2308 10.5 5.2308-3.3158 1.5692m-17.6842-1.5692v11.7692m0-11.7692 3.3158 1.5692m0 0 7.1842 3.4 7.1842-3.4m-14.3684 0v3.0158c0 3.9677 3.2165 7.1842 7.1842 7.1842v0c3.9677 0 7.1842-3.2165 7.1842-7.1842v-3.0158'
       />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
         d='M12 13v.0001'
       />
     )
+  }
 )
 
 IconGraduationCap[iconSymbol] = true

package/react/grid-four.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 IconGridFour: 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='M12 3h-8.75a.25.25 0 0 0-.25.25v8.75m9-9h8.75a.25.25 0 0 1 .25.25v8.75m-9-9v18m0 0h8.75a.25.25 0 0 0 .25-.25v-8.75m-9 9h-8.75a.25.25 0 0 1-.25-.25v-8.75m0 0h18'
       />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
         d='M12 12v.0001'
       />
     )
+  }
 )
 
 IconGridFour[iconSymbol] = true

package/react/grid-six.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 IconGridSix: 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='M12 3h-8.75a.25.25 0 0 0-.25.25v5.75m9-6h8.75a.25.25 0 0 1 .25.25v5.75m-9-6v18m0 0h8.75a.25.25 0 0 0 .25-.25v-5.75m-9 6h-8.75a.25.25 0 0 1-.25-.25v-5.75m0-6h18m-18 0v6m18-6v6m-18 0h18'
       />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
         d='M12 12v.0001'
       />
     )
+  }
 )
 
 IconGridSix[iconSymbol] = true

package/react/grid.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 IconGrid: 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 6h18m-18 6h18m-18 6h18m-15-15v18m6-18v18m6-18v18'
       />
     )
+  }
 )
 
 IconGrid[iconSymbol] = true

package/react/hand-filled.tsx

@@ -4,40 +4,44 @@
  */
 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 IconHandFilled: 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='M19 17c0 6.2701-8.5 8-12.5 3l-4.5416-6.3583c-.2688-.3763-.2456-.8891.0617-1.2347.1091-.1227.1948-.2169.2049-.222.165-.1425.3675-.2175.5925-.2175.165 0 .315.045.45.12.03.0075 3.2325 1.845 3.2325 1.845v-8.9325c0-.6225.3775-1 1-1s1 .3775 1 1v5.25a.75.75 0 0 0 1.5 0v-7.25c0-.6225.3775-1 1-1s1 .3775 1 1v7.25a.75.75 0 0 0 1.5 0v-6.25c0-.6225.3775-1 1-1s1 .3775 1 1v6.25a.75.75 0 0 0 1.5 0v-4.25c0-.6225.3775-1 1-1s1 .3775 1 1v11Z'
         clipRule='evenodd'
       />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
         d='M12 12h.0007'
       />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
         d='M12 12v.0001'
       />
     )
+  }
 )
 
 IconHandFilled[iconSymbol] = true

package/react/hand-pointing.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 IconHandPointing: 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='M10.4771 4.75c0-.9665-.7606-1.75-1.7271-1.75s-1.7127.7835-1.7127 1.75v9.5l-1.6884-1.7374c-.3765-.3875-.894-.6695-1.433-.6333-.3287.0221-.6779.1104-.9389.3707a1.6231 1.6231 0 0 0-.2292 2.0113l3.411 4.6203c.2284.3094.4975.5891.8175.8025 5.5261 3.6868 14.061 1.4214 14.061-3.5591v-4.375c-.0373-1-.7835-1.75-1.75-1.75s-1.8102.7835-1.8102 1.75v-2c0-.9665-.7233-1.75-1.6898-1.75-1.1311 0-1.8102.7835-1.8102 1.75m-3.5-5v4m0-4v7.0002m0-3.0002h.0602m-.0602 0c0-.9665.8064-1.75 1.7729-1.75.9665 0 1.7271.7835 1.7271 1.75v1m0 0v1.5m3.5 0v1'
       />
     )
+  }
 )
 
 IconHandPointing[iconSymbol] = true

package/react/hand.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 IconHand: 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='M10.4771 5.75c0-.9665-.7606-1.75-1.7271-1.75s-1.7127.7835-1.7127 1.75v8.5l-1.6884-1.7374c-.3765-.3875-.894-.6695-1.433-.6333-.3287.0221-.6779.1104-.9389.3707a1.6231 1.6231 0 0 0-.2292 2.0113l3.5388 4.7935c.1441.1952.3058.38.489.5393 5.5174 4.7992 14.2617 1.5721 14.2617-3.4691v-9.375c-.0373-1-.7835-1.75-1.75-1.75s-1.8102.7835-1.8102 1.75v-2c0-.9665-.7233-1.75-1.6898-1.75-1.1311 0-1.8102.7835-1.8102 1.75m-3.5 1v-2m0 2v6.0002m0-8.0002h.0602m-.0602 0c0-.9665.8064-1.75 1.7729-1.75.9665 0 1.7271.7835 1.7271 1.75v1m0 0v6.5m3.5-5v6'
       />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
         d='M11 12v.0001'
       />
     )
+  }
 )
 
 IconHand[iconSymbol] = true

package/react/headset-person.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 IconHeadsetPerson: 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='M4 17v-6c0-9.5 16-9.5 16 0v9h-8'
       />,
       <path
-        fill='red'
+        fill='currentColor'
         d='M14.5 15c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5ZM9.5 15c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5Z'
       />,
       <path
-        fill='red'
+        fill='currentColor'
         d='M18.002 11.03a6.04 6.04 0 0 0-5.95-5.03c-3.03 0-6.29 2.51-6.03 6.45a8.0748 8.0748 0 0 0 4.86-5.89c1.31 2.63 4 4.44 7.12 4.47ZM2 13c0-.5523.4477-1 1-1h1c.5523 0 1 .4477 1 1v4c0 .5523-.4477 1-1 1h-1c-.5523 0-1-.4477-1-1v-4ZM19 13c0-.5523.4477-1 1-1h1c.5523 0 1 .4477 1 1v4c0 .5523-.4477 1-1 1h-1c-.5523 0-1-.4477-1-1v-4Z'
       />
     )
+  }
 )
 
 IconHeadsetPerson[iconSymbol] = true

package/react/heart-filled.tsx

@@ -4,32 +4,36 @@
  */
 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 IconHeartFilled: 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='m11.1585 6.5291.8415 1.3105.8415-1.3105c1.5981-2.489 3.8242-2.5291 4.7146-2.5291.4494 0 1.6982.1906 2.7446 1.0014.9742.755 1.8974 2.1398 1.6625 4.8164-.1809 2.0604-1.643 4.2847-3.6841 6.3364-2.0102 2.0206-4.4298 3.7219-6.2213 4.7399a.1155.1155 0 0 1-.0578.016.1155.1155 0 0 1-.0578-.016c-1.7915-1.018-4.2111-2.7193-6.2214-4.7399-2.041-2.0517-3.5031-4.276-3.684-6.3364-.235-2.6766.6883-4.0614 1.6625-4.8164 1.0463-.8108 2.2952-1.0014 2.7445-1.0014.8905 0 3.1166.0402 4.7147 2.5291Z'
       />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
         d='m11.1585 6.5291.8415 1.3105.8415-1.3105c1.5981-2.489 3.8242-2.5291 4.7146-2.5291.4494 0 1.6982.1906 2.7446 1.0014.9742.755 1.8974 2.1398 1.6625 4.8164-.1809 2.0604-1.643 4.2847-3.6841 6.3364-2.0102 2.0206-4.4298 3.7219-6.2213 4.7399a.1155.1155 0 0 1-.0578.016.1155.1155 0 0 1-.0578-.016c-1.7915-1.018-4.2111-2.7193-6.2214-4.7399-2.041-2.0517-3.5031-4.276-3.684-6.3364-.235-2.6766.6883-4.0614 1.6625-4.8164 1.0463-.8108 2.2952-1.0014 2.7445-1.0014.8905 0 3.1166.0402 4.7147 2.5291Z'
       />
     )
+  }
 )
 
 IconHeartFilled[iconSymbol] = true

package/react/heart.tsx

@@ -4,28 +4,32 @@
  */
 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 IconHeart: 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'
         strokeWidth='var(--svg-stroke-width)'
         d='m11.1585 6.5291.8415 1.3105.8415-1.3105c1.5981-2.489 3.8242-2.5291 4.7146-2.5291.4494 0 1.6982.1906 2.7446 1.0014.9742.755 1.8974 2.1398 1.6625 4.8164-.1809 2.0604-1.643 4.2847-3.6841 6.3364-2.0102 2.0206-4.4298 3.7219-6.2213 4.7399a.1155.1155 0 0 1-.0578.016.1155.1155 0 0 1-.0578-.016c-1.7915-1.018-4.2111-2.7193-6.2214-4.7399-2.041-2.0517-3.5031-4.276-3.684-6.3364-.235-2.6766.6883-4.0614 1.6625-4.8164 1.0463-.8108 2.2952-1.0014 2.7445-1.0014.8905 0 3.1166.0402 4.7147 2.5291Z'
       />
     )
+  }
 )
 
 IconHeart[iconSymbol] = true

package/react/hexagon.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 IconHexagon: 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='M17 3h-10l-5 9 5 9h10l5-9-5-9Z'
       />
     )
+  }
 )
 
 IconHexagon[iconSymbol] = true

package/react/highlighter-underline.tsx

@@ -4,42 +4,46 @@
  */
 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 IconHighlighterUnderline: 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,
       },
-      <rect width={18} height={2} x={3} y={20} fill='red' rx={0.5} />,
+      <rect width={18} height={2} x={3} y={20} fill='currentColor' rx={0.5} />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeLinecap='round'
         strokeLinejoin='round'
         strokeWidth='var(--svg-stroke-width)'
         d='m18 9.8571 3-2.8571-4.5-4.5-3 3'
       />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeLinecap='round'
         strokeWidth='var(--svg-stroke-width)'
         d='M11 17h-2l-1 1h-4v-1l1-1 1-1 .5-2.5 2.75-2.75 2.75-2.75 1.5-1.5 4.5 4.3571-7 7.1429Z'
       />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
         d='M12 21v.0001'
       />
     )
+  }
 )
 
 IconHighlighterUnderline[iconSymbol] = true

package/react/highlighter.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 IconHighlighter: 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 22 .8905-7.124a1 1 0 0 1 .9923-.876h1.1172m15 8-.8905-7.124a1 1 0 0 0-.9923-.876h-1.1172m-12 0v-3c0-.5523.4477-1 1-1h1m-2 4h12m0 0v-3c0-.5523-.4477-1-1-1h-1m-8 0v-5.2192a1 1 0 0 1 .7575-.9702l6-1.5c.6311-.1578 1.2425.3196 1.2425.9702v6.7192m-8 0h8'
       />,
       <path
-        stroke='red'
+        stroke='currentColor'
         strokeWidth='var(--svg-stroke-width)'
         d='M12 14v.0001'
       />
     )
+  }
 )
 
 IconHighlighter[iconSymbol] = true