Drop radix icons (#1350)

We have all icons in figma. Here replaced with alternatives or exported
from figma. See diff.

apps/builder/app/builder/features/style-panel/sections/layout/shared/flex-grid.tsx

@@ -5,7 +5,7 @@ import {
   DeprecatedIconButton,
 } from "@webstudio-is/design-system";
 import { toValue } from "@webstudio-is/css-engine";
-import { DotFilledIcon } from "@webstudio-is/icons";
+import { DotIcon } from "@webstudio-is/icons";
 import type { CreateBatchUpdate } from "../../../shared/use-style-data";
 import { getStyleSource, type StyleInfo } from "../../../shared/style-info";
 import { theme } from "@webstudio-is/design-system";
@@ -110,7 +110,7 @@ export const FlexGrid = ({
                 batchUpdate.publish();
               }}
             >
-              <DotFilledIcon />
+              <DotIcon />
             </DeprecatedIconButton>
           </Flex>
         );

apps/builder/app/builder/features/style-panel/shared/show-more.tsx

@@ -1,6 +1,9 @@
 import { useState } from "react";
 import { Flex, Button, Collapsible } from "@webstudio-is/design-system";
-import { TriangleDownIcon, TriangleRightIcon } from "@webstudio-is/icons";
+import {
+  ChevronFilledDownIcon,
+  ChevronFilledRightIcon,
+} from "@webstudio-is/icons";
 
 export const ShowMore = ({
   styleConfigs,
@@ -17,7 +20,9 @@ export const ShowMore = ({
         <Collapsible.Trigger asChild>
           <Button
             css={{ width: "100%" }}
-            prefix={isOpen ? <TriangleDownIcon /> : <TriangleRightIcon />}
+            prefix={
+              isOpen ? <ChevronFilledDownIcon /> : <ChevronFilledRightIcon />
+            }
           >
             Show more
           </Button>

apps/builder/app/builder/shared/fonts-manager/fonts-manager.tsx

@@ -12,7 +12,7 @@ import {
 } from "~/builder/shared/assets";
 import { useEffect, useMemo, useState } from "react";
 import { useMenu } from "./item-menu";
-import { CheckIcon } from "@webstudio-is/icons";
+import { CheckMarkIcon } from "@webstudio-is/icons";
 import {
   type Item,
   filterIdsByFamily,
@@ -140,7 +140,7 @@ export const FontsManager = ({ value, onChange }: FontsManagerProps) => {
     return (
       <ListItem
         {...itemProps}
-        prefix={itemProps.current ? <CheckIcon /> : undefined}
+        prefix={itemProps.current ? <CheckMarkIcon /> : undefined}
         suffix={item.type === "uploaded" ? renderMenu(index) : undefined}
       >
         {item.label}

packages/design-system/src/components/list.stories.tsx

@@ -1,5 +1,5 @@
 import type { ComponentStory } from "@storybook/react";
-import { CheckIcon, MenuIcon } from "@webstudio-is/icons";
+import { CheckMarkIcon, MenuIcon } from "@webstudio-is/icons";
 import { useState } from "react";
 import { List, ListItem, useList } from "./list";
 
@@ -13,11 +13,11 @@ export const Declarative: ComponentStory<typeof List> = () => {
       <ListItem>Apple</ListItem>
       <ListItem state="disabled">Banana</ListItem>
       <ListItem state="selected">Orange</ListItem>
-      <ListItem prefix={<CheckIcon />} suffix={<MenuIcon />}>
+      <ListItem prefix={<CheckMarkIcon />} suffix={<MenuIcon />}>
         Strawberry
       </ListItem>
       <ListItem
-        prefix={<CheckIcon />}
+        prefix={<CheckMarkIcon />}
         suffix={<MenuIcon />}
         current
         state="selected"
@@ -47,7 +47,7 @@ export const WithHook: ComponentStory<typeof List> = () => {
           <ListItem
             {...itemProps}
             key={index}
-            prefix={itemProps.current ? <CheckIcon /> : undefined}
+            prefix={itemProps.current ? <CheckMarkIcon /> : undefined}
           >
             {item}
           </ListItem>

packages/design-system/src/components/toast.tsx

@@ -1,11 +1,7 @@
 import * as ToastPrimitive from "@radix-ui/react-toast";
 import toast, { useToaster } from "react-hot-toast/headless";
 import { keyframes, styled } from "../stitches.config";
-import {
-  CheckCircledIcon,
-  CrossCircledIcon,
-  InfoIcon,
-} from "@webstudio-is/icons";
+import { InfoIcon } from "@webstudio-is/icons";
 import { Box } from "./box";
 import { theme } from "../stitches.config";
 
@@ -118,8 +114,6 @@ export const Toaster = () => {
               },
             }}
           >
-            {toast.type === "success" && <CheckCircledIcon />}
-            {toast.type === "error" && <CrossCircledIcon />}
             {toast.type === "blank" && <InfoIcon />}
           </Box>
           <StyledTitle>{toast.message}</StyledTitle>

packages/design-system/src/components/tree/tree-node.tsx

@@ -1,5 +1,8 @@
 import { useCallback, useRef, useEffect, useMemo, useState } from "react";
-import { TriangleRightIcon, TriangleDownIcon } from "@webstudio-is/icons";
+import {
+  ChevronFilledDownIcon,
+  ChevronFilledRightIcon,
+} from "@webstudio-is/icons";
 import { cssVars } from "@webstudio-is/css-vars";
 import { Box } from "../box";
 import * as Collapsible from "@radix-ui/react-collapsible";
@@ -366,7 +369,7 @@ export const TreeItemBody = <Data extends { id: string }>({
           // We don't want this trigger to be focusable
           tabIndex={-1}
         >
-          {isExpanded ? <TriangleDownIcon /> : <TriangleRightIcon />}
+          {isExpanded ? <ChevronFilledDownIcon /> : <ChevronFilledRightIcon />}
         </CollapsibleTrigger>
       )}
 

packages/icons/package.json

@@ -30,7 +30,6 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@radix-ui/react-icons": "^1.1.0",
     "@webstudio-is/css-vars": "workspace:^",
     "react": "^17.0.2"
   },

packages/icons/src/index.stories.tsx

@@ -1,5 +1,4 @@
 import * as icons from "./index";
-import * as legacyIcons from "./legacy";
 
 export const Icons = ({ testColor }: { testColor: boolean }) => {
   return (
@@ -45,7 +44,6 @@ export const Icons = ({ testColor }: { testColor: boolean }) => {
                   }}
                 >
                   {name.replace(/Icon$/, "")}
-                  {name in legacyIcons && " (legacy)"}
                 </div>
               </div>
             );

packages/icons/src/index.ts

@@ -1,4 +1,3 @@
-export * from "./legacy";
 export * from "./__generated__";
 export * from "./list-nested";
 export * from "./undo";