chore: optimize icon exports (#552)

cube-js · Dec 19, 2024 · 2ddc0fa · 2ddc0fa
1 parent 51444ba
commit 2ddc0fa
Show file tree

Hide file tree

Showing 82 changed files with 482 additions and 350 deletions.
diff --git a/.changeset/stale-rabbits-double.md b/.changeset/stale-rabbits-double.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Optimize icon exports.
diff --git a/.size-limit.js b/.size-limit.js
@@ -26,13 +26,13 @@ module.exports = [
     path: './dist/es/index.js',
     webpack: true,
     import: '{ Button }',
-    limit: '38 kB',
+    limit: '22 kB',
   },
   {
     name: 'Tree shaking (just an Icon)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ AiIcon }',
-    limit: '28 kB',
+    limit: '11 kB',
   },
 ];
diff --git a/src/icons/AiIcon.tsx b/src/icons/AiIcon.tsx
@@ -1,10 +1,13 @@
-export const AiIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const AiIcon = wrapIcon(
+  'AiIcon',
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
     <path
       fill="currentColor"
       fillRule="evenodd"
       d="M9.704 3.88a.6.6 0 0 1-1.2 0V1.468a.6.6 0 0 1 1.2 0V3.88ZM8.662 6.454a.625.625 0 0 1 .884.884l-7.468 7.468a.625.625 0 1 1-.884-.884l7.468-7.468Zm.442 6.47a.6.6 0 0 0 .6-.6V9.912a.6.6 0 0 0-1.2 0v2.412a.6.6 0 0 0 .6.6ZM6.088 6.296a.6.6 0 0 1 0 1.2H3.676a.6.6 0 1 1 0-1.2h2.412Zm9.044.6a.6.6 0 0 0-.6-.6H12.12a.6.6 0 1 0 0 1.2h2.412a.6.6 0 0 0 .6-.6ZM11.66 5.188a.6.6 0 1 1-.848-.849l1.705-1.705a.6.6 0 1 1 .849.848L11.66 5.188Zm-4.264 0a.6.6 0 0 0 0-.849L5.69 2.634a.6.6 0 1 0-.848.848l1.705 1.706a.6.6 0 0 0 .849 0Zm5.97 5.122a.6.6 0 1 1-.848.848l-1.706-1.705a.6.6 0 0 1 .849-.849l1.705 1.706Z"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/AreaChartIcon.tsx b/src/icons/AreaChartIcon.tsx
@@ -1,4 +1,7 @@
-export const AreaChartIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const AreaChartIcon = wrapIcon(
+  'AreaChartIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const AreaChartIcon = (
       d="M13.4 7.048V13.4H2.6v-2.269l4.332-2.976L8.58 9.77a.6.6 0 0 0 .76.067l4.06-2.79Zm1.2-1.149V1.982a.6.6 0 0 0-.94-.495L9.068 4.643 7.42 3.026a.6.6 0 0 0-.76-.067L2.6 5.75V2a.6.6 0 0 0-1.2 0v12a.6.6 0 0 0 .6.6h12a.6.6 0 0 0 .588-.72.6.6 0 0 0 .012-.12V5.9Zm-1.2-.307L9.068 8.569 7.42 6.952a.6.6 0 0 0-.76-.066L2.6 9.676V7.204l4.332-2.977L8.58 5.845a.6.6 0 0 0 .76.067l4.06-2.79v2.47Z"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/BackwardIcon.tsx b/src/icons/BackwardIcon.tsx
@@ -1,4 +1,7 @@
-export const BackwardIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const BackwardIcon = wrapIcon(
+  'BackwardIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const BackwardIcon = (
       d="M7.688 2.304a.65.65 0 1 1 .92.92L3.83 8l4.776 4.777a.65.65 0 1 1-.92.919L2.453 8.46a.65.65 0 0 1 0-.92zm4.94 0a.65.65 0 0 1 .92.92L8.772 8l4.776 4.777a.65.65 0 0 1-.92.919L7.394 8.46a.65.65 0 0 1 0-.92z"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/BarChartIcon.tsx b/src/icons/BarChartIcon.tsx
@@ -1,4 +1,7 @@
-export const BarChartIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const BarChartIcon = wrapIcon(
+  'BarChartIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const BarChartIcon = (
       d="M2 1.4a.6.6 0 0 1 .6.6v11.4H14a.6.6 0 1 1 0 1.2H2a.6.6 0 0 1-.6-.6V2a.6.6 0 0 1 .6-.6Zm2.4 9.225V8.3a.7.7 0 0 1 1.4 0v2.6a.7.7 0 1 1-1.4 0v-.275ZM7.2 6.3V10.9a.7.7 0 1 0 1.4 0V6.3a.7.7 0 1 0-1.4 0Zm2.8 4.325V8.3a.7.7 0 1 1 1.4 0v2.6a.7.7 0 1 1-1.4 0v-.275ZM12.8 3.3V10.9a.7.7 0 1 0 1.4 0V3.3a.7.7 0 1 0-1.4 0Z"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/BellFilledIcon.tsx b/src/icons/BellFilledIcon.tsx
@@ -1,4 +1,7 @@
-export const BellFilledIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const BellFilledIcon = wrapIcon(
+  'BellFilledIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const BellFilledIcon = (
       d="M4.592 1.772A4.8 4.8 0 0 1 8 .35a4.8 4.8 0 0 1 3.408 1.422c.736.742 1.097 1.63 1.292 2.526.166.762.218 1.572.267 2.323l.022.34c.12 1.76.327 3.128 1.624 4a.65.65 0 0 1-.363 1.189H1.75a.65.65 0 0 1-.363-1.19c1.297-.87 1.504-2.239 1.624-3.999l.022-.34c.049-.75.1-1.56.267-2.323.195-.897.556-1.784 1.292-2.526M8 14.7c-.794 0-1.35-.584-1.35-1.2h-1.3C5.35 14.928 6.585 16 8 16s2.65-1.072 2.65-2.5h-1.3c0 .616-.556 1.2-1.35 1.2"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/BellIcon.tsx b/src/icons/BellIcon.tsx
@@ -1,4 +1,7 @@
-export const BellIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const BellIcon = wrapIcon(
+  'BellIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -16,5 +19,5 @@ export const BellIcon = (
       fill="currentColor"
       d="M8 14.7c-.794 0-1.35-.584-1.35-1.2h-1.3C5.35 14.928 6.585 16 8 16s2.65-1.072 2.65-2.5h-1.3c0 .616-.556 1.2-1.35 1.2"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/BooleanIcon.tsx b/src/icons/BooleanIcon.tsx
@@ -1,4 +1,7 @@
-export const BooleanIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const BooleanIcon = wrapIcon(
+  'BooleanIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const BooleanIcon = (
       d="M12.427 1.013 4.195 15.001H2.833l8.232-13.988h1.362ZM.04 2.964V1.821H5.25v1.143H3.292V8H1.997V2.964H.04Zm11.736 5.038v6.2h1.238v-2.22h2.591v-1.144h-2.59V9.145h2.868V8.002h-4.107Z"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/CalendarEditIcon.tsx b/src/icons/CalendarEditIcon.tsx
@@ -1,4 +1,7 @@
-export const CalendarEditIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const CalendarEditIcon = wrapIcon(
+  'CalendarEditIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const CalendarEditIcon = (
       d="M4.70474 1.98261V0.995119C4.70474 0.636134 4.99576 0.345118 5.35474 0.345118C5.71373 0.345118 6.00474 0.636133 6.00474 0.995119V1.98261H10.0047V0.995119C10.0047 0.636134 10.2958 0.345118 10.6547 0.345118C11.0137 0.345118 11.3047 0.636133 11.3047 0.995119V1.98261C11.8122 1.9826 12.2321 1.98267 12.5746 2.01066C12.9317 2.03983 13.2614 2.10253 13.5715 2.26055C14.0513 2.50502 14.4414 2.89512 14.6859 3.37494C14.8439 3.68506 14.9066 4.01474 14.9358 4.37177C14.9744 4.84498 14.9702 5.32199 14.9659 5.79772C14.9647 5.93939 14.9634 6.08095 14.9633 6.22227C14.9633 6.77499 14.5149 7.22289 13.9622 7.22227L2.33629 7.20919V11.3164C2.33629 11.8592 2.33679 12.2272 2.36001 12.5114C2.38262 12.788 2.42345 12.9276 2.47253 13.0239C2.59237 13.2591 2.7836 13.4503 3.0188 13.5702C3.11511 13.6192 3.25467 13.6601 3.5313 13.6827C3.81552 13.7059 4.18351 13.7064 4.72629 13.7064H6.27801C6.637 13.7064 6.92801 13.9974 6.92801 14.3564C6.92801 14.7154 6.637 15.0064 6.27801 15.0064H4.69952C4.19022 15.0064 3.76888 15.0064 3.42544 14.9784C3.06841 14.9492 2.73873 14.8865 2.42861 14.7285C1.9488 14.484 1.5587 14.0939 1.31422 13.6141C1.15621 13.304 1.0935 12.9743 1.06433 12.6172C1.03627 12.2738 1.03628 11.8525 1.03629 11.3432V11.3431V5.64585V5.64584C1.03628 5.13654 1.03627 4.7152 1.06433 4.37177C1.0935 4.01474 1.15621 3.68506 1.31422 3.37494C1.5587 2.89512 1.9488 2.50502 2.42861 2.26055C2.73873 2.10253 3.06841 2.03983 3.42544 2.01066C3.76888 1.9826 4.19023 1.9826 4.69954 1.98261H4.70474ZM13.6638 5.67261V6.02193L2.33629 6.00919V5.67261C2.33629 5.12984 2.33679 4.76185 2.36001 4.47763C2.38262 4.20099 2.42345 4.06144 2.47253 3.96512C2.59237 3.72992 2.7836 3.5387 3.0188 3.41885C3.11511 3.36978 3.25467 3.32894 3.5313 3.30634C3.81552 3.28312 4.18351 3.28261 4.72629 3.28261H11.2738C11.8166 3.28261 12.1846 3.28312 12.4688 3.30634C12.7454 3.32894 12.885 3.36978 12.9813 3.41885C13.2165 3.5387 13.4077 3.72992 13.5276 3.96513C13.5766 4.06144 13.6175 4.201 13.6401 4.47763C13.6633 4.76185 13.6638 5.12984 13.6638 5.67261ZM13.5399 9.68673C13.536 9.68283 13.5296 9.68283 13.5257 9.68673L9.65988 13.5526C9.658 13.5545 9.65695 13.557 9.65695 13.5597V14.6725C9.65695 14.6781 9.66143 14.6825 9.66695 14.6825H10.7798C10.7825 14.6825 10.785 14.6815 10.7869 14.6796L14.6528 10.8138C14.6567 10.8098 14.6567 10.8035 14.6528 10.7996L13.5399 9.68673ZM15.572 9.88037L14.4591 8.76749C13.9475 8.25587 13.1181 8.25594 12.6065 8.76749L8.74064 12.6333C8.49496 12.879 8.35695 13.2122 8.35695 13.5597V14.6725C8.35695 15.396 8.94345 15.9825 9.66695 15.9825L10.7798 15.9825C11.1273 15.9825 11.4605 15.8445 11.7061 15.5988L15.572 11.733C16.0836 11.2214 16.0836 10.392 15.572 9.88037Z"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/CalendarIcon.tsx b/src/icons/CalendarIcon.tsx
@@ -1,4 +1,7 @@
-export const CalendarIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const CalendarIcon = wrapIcon(
+  'CalendarIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const CalendarIcon = (
       d="M4.705.995v1c-1.16.004-1.79.032-2.285.284a2.6 2.6 0 0 0-1.137 1.136C1 3.971 1 4.7 1 6.155v4.679c0 1.456 0 2.184.283 2.74A2.6 2.6 0 0 0 2.42 14.71c.556.283 1.284.283 2.74.283h5.68c1.456 0 2.184 0 2.74-.283a2.6 2.6 0 0 0 1.137-1.136c.283-.556.283-1.284.283-2.74V6.155c0-1.456 0-2.184-.283-2.74A2.6 2.6 0 0 0 13.58 2.28c-.493-.252-1.122-.28-2.275-.283v-1a.65.65 0 1 0-1.3 0v1h-4v-1a.65.65 0 1 0-1.3 0m.455 2.3h5.68c.75 0 1.233.001 1.602.032.353.028.484.077.548.11a1.3 1.3 0 0 1 .568.568c.033.065.082.196.11.549.029.343.032.788.032 1.455H2.3c0-.667.003-1.112.031-1.455.029-.353.078-.484.11-.549a1.3 1.3 0 0 1 .569-.568c.064-.033.195-.082.548-.11.369-.03.852-.032 1.602-.032M2.3 7.21v3.625c0 .749.001 1.233.031 1.601.029.354.078.484.11.549a1.3 1.3 0 0 0 .569.568c.064.033.195.082.548.11.369.03.852.031 1.602.031h5.68c.75 0 1.233 0 1.602-.03.353-.03.484-.078.548-.111a1.3 1.3 0 0 0 .568-.568c.033-.065.082-.195.11-.549.031-.368.032-.852.032-1.601V7.209z"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/CaretDownIcon.tsx b/src/icons/CaretDownIcon.tsx
@@ -1,4 +1,7 @@
-export const CaretDownIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const CaretDownIcon = wrapIcon(
+  'CaretDownIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -10,5 +13,5 @@ export const CaretDownIcon = (
       fill="currentColor"
       d="M7.54 10.447a.6.6 0 0 0 .92 0l3.72-4.463A.6.6 0 0 0 11.719 5H4.281a.6.6 0 0 0-.46.984z"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/CaretUpIcon.tsx b/src/icons/CaretUpIcon.tsx
@@ -1,4 +1,7 @@
-export const CaretUpIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const CaretUpIcon = wrapIcon(
+  'CaretUpIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -10,5 +13,5 @@ export const CaretUpIcon = (
       fill="currentColor"
       d="M7.54 5.553a.6.6 0 0 1 .92 0l3.72 4.463a.6.6 0 0 1-.461.984H4.281a.6.6 0 0 1-.46-.984z"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/CheckCircleFilledIcon.tsx b/src/icons/CheckCircleFilledIcon.tsx
@@ -1,4 +1,7 @@
-export const CheckCircleFilledIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const CheckCircleFilledIcon = wrapIcon(
+  'CheckCircleFilledIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const CheckCircleFilledIcon = (
       d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m3.926-9.546a.65.65 0 1 0-.919-.92L7.133 9.41l-2.14-2.14a.65.65 0 0 0-.92.918l2.6 2.6a.65.65 0 0 0 .92 0z"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/CheckCircleIcon.tsx b/src/icons/CheckCircleIcon.tsx
@@ -1,4 +1,7 @@
-export const CheckCircleIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const CheckCircleIcon = wrapIcon(
+  'CheckCircleIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const CheckCircleIcon = (
       d="M14.7 8A6.7 6.7 0 1 1 1.3 8a6.7 6.7 0 0 1 13.4 0M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-4.372-1.342a.65.65 0 0 0-.92-.92l-3.5 3.501-1.916-1.916a.65.65 0 0 0-.92.92l2.376 2.375a.65.65 0 0 0 .92 0z"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/CheckIcon.tsx b/src/icons/CheckIcon.tsx
@@ -1,4 +1,7 @@
-export const CheckIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const CheckIcon = wrapIcon(
+  'CheckIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const CheckIcon = (
       d="M13.977 3.035a.675.675 0 0 1 0 .955L6.12 11.847a.675.675 0 0 1-.954 0L2.023 8.704a.675.675 0 0 1 .954-.955l2.666 2.666 7.38-7.38a.675.675 0 0 1 .954 0"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/CircleFilledIcon.tsx b/src/icons/CircleFilledIcon.tsx
@@ -1,4 +1,7 @@
-export const CircleFilledIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const CircleFilledIcon = wrapIcon(
+  'CircleFilledIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -7,5 +10,5 @@ export const CircleFilledIcon = (
     viewBox="0 0 16 16"
   >
     <circle cx="8" cy="8" r="8" fill="currentColor" />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/CloseCircleFilledIcon.tsx b/src/icons/CloseCircleFilledIcon.tsx
@@ -1,4 +1,7 @@
-export const CloseCircleFilledIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const CloseCircleFilledIcon = wrapIcon(
+  'CloseCircleFilledIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const CloseCircleFilledIcon = (
       d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16M5.646 4.835a.573.573 0 1 0-.81.81L7.188 8l-2.354 2.354a.573.573 0 0 0 .811.81L8 8.812l2.354 2.354a.573.573 0 0 0 .81-.81L8.812 8l2.354-2.354a.573.573 0 1 0-.81-.81L8 7.188z"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/CloseCircleIcon.tsx b/src/icons/CloseCircleIcon.tsx
@@ -1,4 +1,7 @@
-export const CloseCircleIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const CloseCircleIcon = wrapIcon(
+  'CloseCircleIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const CloseCircleIcon = (
       d="M14.7 8A6.7 6.7 0 1 1 1.3 8a6.7 6.7 0 0 1 13.4 0M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.687 4.687a.6.6 0 0 1 .849 0L8 7.151l2.464-2.464a.6.6 0 1 1 .849.849L8.849 8l2.464 2.464a.6.6 0 1 1-.849.849L8 8.849l-2.464 2.464a.6.6 0 0 1-.849-.849L7.152 8 4.687 5.536a.6.6 0 0 1 0-.849"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/CloseIcon.tsx b/src/icons/CloseIcon.tsx
@@ -1,4 +1,7 @@
-export const CloseIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const CloseIcon = wrapIcon(
+  'CloseIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const CloseIcon = (
       d="M13.056 3.863a.65.65 0 0 0-.92-.919L8 7.081 3.863 2.944a.65.65 0 1 0-.919.92L7.081 8l-4.137 4.137a.65.65 0 1 0 .92.919L8 8.919l4.137 4.137a.65.65 0 0 0 .919-.92L8.919 8z"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/CopyIcon.tsx b/src/icons/CopyIcon.tsx
@@ -1,4 +1,7 @@
-export const CopyIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const CopyIcon = wrapIcon(
+  'CopyIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -19,5 +22,5 @@ export const CopyIcon = (
         <path fill="#fff" d="M0 0h16v16H0z" />
       </clipPath>
     </defs>
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/CountIcon.tsx b/src/icons/CountIcon.tsx
@@ -1,4 +1,7 @@
-export const CountIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const CountIcon = wrapIcon(
+  'CountIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const CountIcon = (
       d="M9.6 2.2H6.4c-1.14 0-1.923 0-2.53.05-.592.049-.91.138-1.141.255A2.8 2.8 0 0 0 1.505 3.73c-.117.23-.206.549-.254 1.142C1.2 5.477 1.2 6.26 1.2 7.4v1.2c0 1.14 0 1.923.05 2.53.049.592.138.91.255 1.141a2.8 2.8 0 0 0 1.224 1.224c.23.117.549.206 1.142.255.606.05 1.39.05 2.529.05h3.2c1.14 0 1.923 0 2.53-.05.592-.049.91-.138 1.141-.255a2.8 2.8 0 0 0 1.224-1.224c.117-.23.206-.549.255-1.142.05-.606.05-1.39.05-2.529V7.4c0-1.14 0-1.923-.05-2.53-.049-.592-.138-.91-.255-1.141a2.8 2.8 0 0 0-1.224-1.224c-.23-.117-.549-.206-1.142-.254C11.524 2.2 10.74 2.2 9.6 2.2Zm-9.164.984C0 4.04 0 5.16 0 7.4v1.2c0 2.24 0 3.36.436 4.216a4 4 0 0 0 1.748 1.748C3.04 15 4.16 15 6.4 15h3.2c2.24 0 3.36 0 4.216-.436a4 4 0 0 0 1.748-1.748C16 11.96 16 10.84 16 8.6V7.4c0-2.24 0-3.36-.436-4.216a4 4 0 0 0-1.748-1.748C12.96 1 11.84 1 9.6 1H6.4c-2.24 0-3.36 0-4.216.436A4 4 0 0 0 .436 3.184Zm5.443.998V10h-1.23V5.35h-.035l-1.332.835V5.094l1.44-.912H5.88Zm2.48 6.932V12h4.147v-1.006h-2.443v-.04l.85-.832c.399-.363.709-.675.928-.934.22-.262.373-.5.458-.714.087-.214.13-.43.13-.65 0-.335-.086-.633-.258-.892a1.726 1.726 0 0 0-.725-.608c-.308-.148-.671-.222-1.088-.222-.405 0-.763.077-1.074.23-.31.154-.552.37-.724.65-.172.281-.258.612-.258.992h1.167c0-.185.036-.345.108-.48a.744.744 0 0 1 .307-.31.962.962 0 0 1 .466-.107c.17 0 .323.034.457.102.135.066.24.162.318.287.078.123.117.27.117.44a.993.993 0 0 1-.094.43c-.062.13-.154.263-.275.4-.12.136-.268.29-.444.46l-2.07 1.918Z"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/CubeIcon.tsx b/src/icons/CubeIcon.tsx
@@ -1,4 +1,7 @@
-export const CubeIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const CubeIcon = wrapIcon(
+  'CubeIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const CubeIcon = (
       d="M7.494.632a1.22 1.22 0 0 1 1.012 0l5.954 2.712c.435.198.714.632.714 1.11v7.096c0 .478-.28.912-.715 1.11l-5.954 2.708a1.22 1.22 0 0 1-1.01 0L1.541 12.66a1.22 1.22 0 0 1-.715-1.11V4.454c0-.478.279-.912.714-1.11L7.494.632ZM8 1.765 2.734 4.162 8 6.482l5.266-2.32L8 1.765Zm-5.934 9.772V5.223l5.314 2.34v6.39l-5.314-2.416Zm6.554 2.416 5.314-2.416V5.223L8.62 7.563v6.39Z"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/DangerIcon.tsx b/src/icons/DangerIcon.tsx
@@ -1,10 +1,13 @@
-export const DangerIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const DangerIcon = wrapIcon(
+  'DangerIcon',
   <svg
     fill="currentColor"
     viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M13.58 15.5H2.42a2.4 2.4 0 0 1-2.1-1.21 2.4 2.4 0 0 1 0-2.42l5.59-9.66A2.4 2.4 0 0 1 8 1c.87 0 1.66.45 2.1 1.2l5.57 9.67a2.4 2.4 0 0 1 0 2.42 2.4 2.4 0 0 1-2.09 1.2ZM8 2.6a.8.8 0 0 0-.7.4l-5.58 9.67a.8.8 0 0 0 0 .8c.07.12.28.4.7.4h11.16a.8.8 0 0 0 .7-.4.8.8 0 0 0 0-.8L8.7 3a.8.8 0 0 0-.7-.4Zm0 9.67a.8.8 0 1 1 0-1.62.8.8 0 1 1 0 1.62Zm0-3.23a.8.8 0 0 1-.8-.8V6.64a.8.8 0 1 1 1.6 0v1.6a.8.8 0 0 1-.8.81Z" />
     <path d="M7.2 6.8a.8.8 0 1 1 1.6 0v2.4a.8.8 0 0 1-1.6 0V6.8Z" />
-  </svg>
+  </svg>,
 );
diff --git a/src/icons/DashboardIcon.tsx b/src/icons/DashboardIcon.tsx
@@ -1,4 +1,7 @@
-export const DashboardIcon = (
+import { wrapIcon } from './wrap-icon';
+
+export const DashboardIcon = wrapIcon(
+  'DashboardIcon',
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -12,5 +15,5 @@ export const DashboardIcon = (
       d="M2.2 2.2v2.6h11.6V2.2zM1.6 1a.6.6 0 0 0-.6.6v3.8a.6.6 0 0 0 .6.6h12.8a.6.6 0 0 0 .6-.6V1.6a.6.6 0 0 0-.6-.6zm.6 7.2v5.599h2.6V8.2zM1.6 7a.6.6 0 0 0-.6.6v6.799a.6.6 0 0 0 .6.6h3.8a.6.6 0 0 0 .6-.6V7.6a.6.6 0 0 0-.6-.6zm6.6 6.8V8.2h5.6v5.6zM7 7.6a.6.6 0 0 1 .6-.6h6.8a.6.6 0 0 1 .6.6v6.8a.6.6 0 0 1-.6.6H7.6a.6.6 0 0 1-.6-.6z"
       clipRule="evenodd"
     />
-  </svg>
+  </svg>,
 );