From d0ecd0c69a1e608e6ca9bdd7af91f3fee11cf02f Mon Sep 17 00:00:00 2001
From: Sergey Kozlov <dartess@mail.ru>
Date: Wed, 21 Feb 2024 19:18:01 +0400
Subject: [PATCH] use standard @storybook/icons instead of custom ucons

---
 package.json       |  1 +
 src/Tool.tsx       |  6 ++----
 src/icons/Moon.tsx | 19 -------------------
 src/icons/Sun.tsx  | 28 ----------------------------
 4 files changed, 3 insertions(+), 51 deletions(-)
 delete mode 100644 src/icons/Moon.tsx
 delete mode 100644 src/icons/Sun.tsx

diff --git a/package.json b/package.json
index d6c97fba..1d9c3541 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@storybook/components": "^8.0.0-beta.4",
     "@storybook/core-events": "^8.0.0-beta.4",
     "@storybook/global": "^5.0.0",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "^8.0.0-beta.4",
     "@storybook/theming": "^8.0.0-beta.4",
     "fast-deep-equal": "^3.1.3",
diff --git a/src/Tool.tsx b/src/Tool.tsx
index c6b6943e..cdbd7344 100644
--- a/src/Tool.tsx
+++ b/src/Tool.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { global } from '@storybook/global';
 import { themes, ThemeVars } from '@storybook/theming';
 import { IconButton } from '@storybook/components';
+import { MoonIcon, SunIcon } from '@storybook/icons';
 import {
   STORY_CHANGED,
   SET_STORIES,
@@ -11,9 +12,6 @@ import { API, useParameter } from '@storybook/manager-api';
 import equal from 'fast-deep-equal';
 import { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME } from './constants';
 
-import { Sun } from './icons/Sun';
-import { Moon } from './icons/Moon';
-
 const { document, window } = global as { document: Document; window: Window };
 const modes = ['light', 'dark'] as const;
 type Mode = typeof modes[number];
@@ -260,7 +258,7 @@ export function DarkMode({ api }: DarkModeProps) {
       }
       onClick={handleIconClick}
     >
-      {isDark ? <Sun /> : <Moon />}
+      {isDark ? <SunIcon aria-hidden="true" /> : <MoonIcon aria-hidden="true" />}
     </IconButton>
   );
 }
diff --git a/src/icons/Moon.tsx b/src/icons/Moon.tsx
deleted file mode 100644
index a0149a13..00000000
--- a/src/icons/Moon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react';
-
-export function Moon() {
-  return (
-    <svg
-      version="1.1"
-      id="Capa_1"
-      x="0px"
-      y="0px"
-      viewBox="0 0 438.277 438.277"
-      style={{
-        fill: 'currentColor',
-        height: 13,
-      }}
-    >
-      <path d="M428.756,300.104c-0.664-3.81-2.334-7.047-4.996-9.713c-5.9-5.903-12.752-7.142-20.554-3.716   c-20.937,9.708-42.641,14.558-65.097,14.558c-28.171,0-54.152-6.94-77.943-20.838c-23.791-13.894-42.631-32.736-56.525-56.53   c-13.899-23.793-20.844-49.773-20.844-77.945c0-21.888,4.333-42.683,12.991-62.384c8.66-19.7,21.176-36.973,37.543-51.82   c6.283-5.898,7.713-12.752,4.287-20.557c-3.236-7.801-9.041-11.511-17.415-11.132c-29.121,1.141-56.72,7.664-82.797,19.556   C111.33,31.478,88.917,47.13,70.168,66.548c-18.747,19.414-33.595,42.399-44.54,68.95c-10.942,26.553-16.416,54.39-16.416,83.511   c0,29.694,5.806,58.054,17.416,85.082c11.613,27.028,27.218,50.344,46.824,69.949c19.604,19.599,42.92,35.207,69.951,46.822   c27.028,11.607,55.384,17.415,85.075,17.415c42.64,0,81.987-11.563,118.054-34.69c36.069-23.124,63.05-54.006,80.944-92.645   C429,307.519,429.427,303.906,428.756,300.104z M306.565,384.168c-24.646,11.711-50.676,17.562-78.087,17.562   c-24.743,0-48.39-4.853-70.947-14.558c-22.554-9.705-41.971-22.695-58.246-38.972c-16.271-16.272-29.259-35.686-38.97-58.241   c-9.707-22.556-14.561-46.203-14.561-70.948c0-40.922,12.135-77.466,36.403-109.636c24.266-32.165,55.531-53.959,93.788-65.379   c-19.795,31.405-29.694,65.379-29.694,101.926c0,34.644,8.564,66.715,25.697,96.223c17.128,29.499,40.446,52.811,69.95,69.948   c29.499,17.129,61.565,25.694,96.211,25.694c10.656,0,21.129-0.855,31.408-2.57C352.199,356.155,331.21,372.472,306.565,384.168z" />
-    </svg>
-  );
-}
diff --git a/src/icons/Sun.tsx b/src/icons/Sun.tsx
deleted file mode 100644
index 9b61cea2..00000000
--- a/src/icons/Sun.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-
-export function Sun() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      viewBox="0 0 129 129"
-      enableBackground="new 0 0 129 129"
-      style={{
-        fill: 'currentColor',
-        height: 13,
-      }}
-    >
-      <g>
-        <path d="m64.5,92.6c15.5,0 28-12.6 28-28s-12.6-28-28-28-28,12.6-28,28 12.5,28 28,28zm0-47.9c11,0 19.9,8.9 19.9,19.9 0,11-8.9,19.9-19.9,19.9s-19.9-8.9-19.9-19.9c0-11 8.9-19.9 19.9-19.9z" />
-        <path d="m68.6,23.6v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1z" />
-        <path d="m60.4,105.6v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1z" />
-        <path d="m96.4,38.5l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8 0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z" />
-        <path d="m23.5,105.6c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8z" />
-        <path d="m122.5,64.6c0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h12.9c2.2,1.42109e-14 4.1-1.8 4.1-4.1z" />
-        <path d="m10.6,68.7h12.9c2.3,0 4.1-1.8 4.1-4.1 0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.9,4.1 4.1,4.1z" />
-        <path d="m102.6,106.8c1,0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.9,1.2 2.9,1.2z" />
-        <path d="m38.4,38.5c1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z" />
-      </g>
-    </svg>
-  );
-}