reorganize phosphor icons and use correct icons in MyTheme page

packages/configuration-builder/src/ColorEditor/Palette.tsx

@@ -1,7 +1,7 @@
 import { Box } from "@buildo/bento-design-system";
 import { LightnessInterpolation } from "./ColorEditor";
 import { useState } from "react";
-import { IconEyedropper } from "../Icons/IconEyedropper";
+import { IconEyedropper } from "../PhosphorIcons";
 import { HSLToHex, HexColor } from "../utils/colorUtils";
 
 type Props = {

packages/configuration-builder/src/ColorsSection/SectionCompleted.tsx

@@ -1,6 +1,6 @@
 import { Button, Feedback, Inline, Stack } from "@buildo/bento-design-system";
 import { useTranslation } from "react-i18next";
-import { IconConfetti } from "../Icons/IconConfetti";
+import { IconConfetti } from "../PhosphorIcons";
 import { useNavigate } from "react-router-dom";
 
 export function SectionCompleted() {

packages/configuration-builder/src/MyTheme.tsx

@@ -13,7 +13,6 @@ import {
 } from "@buildo/bento-design-system";
 import { useTranslation } from "react-i18next";
 import { SectionCard } from "./SectionCard/SectionCard";
-import { IconSwatches } from "./Icons/IconSwatches";
 import { useConfiguratorStatusContext } from "./ConfiguratorStatusContext";
 import { useNavigate } from "react-router-dom";
 import foundationsImg from "./assets/Foundations.png";
@@ -22,8 +21,17 @@ import exportImg from "./assets/Export.png";
 import image1 from "./assets/1.svg";
 import image2 from "./assets/2.svg";
 import image3 from "./assets/3.svg";
-import { IconFigmaLogo } from "./Icons/FigmaLogo";
-import { IconAtom } from "./Icons/ReactLogo";
+import {
+  IconFigmaLogo,
+  IconAtom,
+  IconTextAa,
+  IconSubtract,
+  IconCards,
+  IconLayout,
+  IconDiamond,
+  IconDiamondsFour,
+  IconSwatches,
+} from "./PhosphorIcons";
 
 const numberImages = [image1, image2, image3];
 
@@ -107,19 +115,19 @@ export function MyTheme() {
           <SectionCard
             name={t("Theme.Foundations.Typography.title")}
             description={t("Theme.Foundations.Typography.description")}
-            icon={IconSwatches}
+            icon={IconTextAa}
             disabled
           />
           <SectionCard
             name={t("Theme.Foundations.Elevations.title")}
             description={t("Theme.Foundations.Elevations.description")}
-            icon={IconSwatches}
+            icon={IconSubtract}
             disabled
           />
           <SectionCard
             name={t("Theme.Foundations.Tokens.title")}
             description={t("Theme.Foundations.Tokens.description")}
-            icon={IconSwatches}
+            icon={IconCards}
             disabled
           />
         </Stack>
@@ -135,19 +143,19 @@ export function MyTheme() {
           <SectionCard
             name={t("Theme.Configuration.General.title")}
             description={t("Theme.Configuration.General.description")}
-            icon={IconSwatches}
+            icon={IconLayout}
             disabled
           />
           <SectionCard
             name={t("Theme.Configuration.Components.title")}
             description={t("Theme.Configuration.Components.description")}
-            icon={IconSwatches}
+            icon={IconDiamond}
             disabled
           />
           <SectionCard
             name={t("Theme.Configuration.Patterns.title")}
             description={t("Theme.Configuration.Patterns.description")}
-            icon={IconSwatches}
+            icon={IconDiamondsFour}
             disabled
           />
         </Stack>

packages/configuration-builder/src/PhosphorIcons.tsx

@@ -0,0 +1,38 @@
+import { IconProps, svgIconProps } from "@buildo/bento-design-system";
+import {
+  Atom,
+  Cards,
+  FigmaLogo,
+  Subtract,
+  type Icon as PhosphorIcon,
+  TextAa,
+  CaretRight,
+  CheckCircle,
+  Confetti,
+  Diamond,
+  DiamondsFour,
+  Layout,
+  Eyedropper,
+  Swatches,
+} from "@phosphor-icons/react";
+
+function phosphorToBento(Icon: PhosphorIcon) {
+  return (props: IconProps) => {
+    const { viewBox, ...svgProps } = svgIconProps(props);
+    return <Icon width={undefined} height={undefined} {...svgProps} />;
+  };
+}
+
+export const IconFigmaLogo = phosphorToBento(FigmaLogo);
+export const IconAtom = phosphorToBento(Atom);
+export const IconCards = phosphorToBento(Cards);
+export const IconCaretRight = phosphorToBento(CaretRight);
+export const IconCheckCircle = phosphorToBento(CheckCircle);
+export const IconConfetti = phosphorToBento(Confetti);
+export const IconDiamond = phosphorToBento(Diamond);
+export const IconDiamondsFour = phosphorToBento(DiamondsFour);
+export const IconEyedropper = phosphorToBento(Eyedropper);
+export const IconLayout = phosphorToBento(Layout);
+export const IconSubtract = phosphorToBento(Subtract);
+export const IconSwatches = phosphorToBento(Swatches);
+export const IconTextAa = phosphorToBento(TextAa);

packages/configuration-builder/src/SectionCard/SectionCard.tsx

@@ -10,9 +10,8 @@ import {
   Stack,
   Title,
 } from "@buildo/bento-design-system";
-import { IconCaretRight } from "../Icons/IconCaretRight";
+import { IconCaretRight, IconCheckCircle } from "../PhosphorIcons";
 import { match } from "ts-pattern";
-import { IconCheckCircle } from "../Icons/IconCheckCircle";
 import { useTranslation } from "react-i18next";
 
 type Props = {