convert @storybook/components's icon to @storybook/icons's icon

storybookjs · Apr 1, 2024 · 46eb5d2 · 46eb5d2
1 parent e732761
commit 46eb5d2
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/Tool.tsx b/src/Tool.tsx
@@ -1,7 +1,8 @@
 import React, { memo, useCallback, useEffect } from "react";
 import { useGlobals, useStorybookApi } from "@storybook/manager-api";
-import { Icons, IconButton } from "@storybook/components";
+import { IconButton } from "@storybook/components";
 import { ADDON_ID, PARAM_KEY, TOOL_ID } from "./constants";
+import { LightningIcon } from "@storybook/icons";
 
 export const Tool = memo(function MyAddonSelector() {
   const [globals, updateGlobals] = useGlobals();
@@ -32,7 +33,7 @@ export const Tool = memo(function MyAddonSelector() {
       title="Enable my addon"
       onClick={toggleMyTool}
     >
-      <Icons icon="lightning" />
+      <LightningIcon />
     </IconButton>
   );
 });
diff --git a/src/components/List.tsx b/src/components/List.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from "react";
 import { styled, themes, convert } from "@storybook/theming";
-import { Icons, IconsProps } from "@storybook/components";
+import { ArrowDownIcon } from "@storybook/icons";
 
 const ListWrapper = styled.ul({
   listStyle: "none",
@@ -18,7 +18,7 @@ const Wrapper = styled.div({
   },
 });
 
-const Icon = styled(Icons)<IconsProps>({
+const Icon = styled(ArrowDownIcon)({
   height: 10,
   width: 10,
   minWidth: 10,
@@ -68,7 +68,6 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
       <Wrapper>
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
-            icon="arrowdown"
             color={convert(themes.normal).appBorderColor}
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,