From 2680411c8418cf1130afd9fec5a60efccbdb5498 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 18 Mar 2025 17:07:12 +0000
Subject: [PATCH] Fixing icons

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 canon-docs/src/app/(docs)/components/button/props.ts |  2 +-
 .../src/components/CustomTheme/customTheme.tsx       |  2 +-
 canon-docs/src/components/HeadlessBanners/BaseUI.tsx |  2 +-
 canon-docs/src/components/Toolbar/theme-name.tsx     |  2 +-
 canon-docs/src/snippets/button.tsx                   | 12 ++++++------
 packages/canon/src/components/Icon/Icon.tsx          |  2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/canon-docs/src/app/(docs)/components/button/props.ts b/canon-docs/src/app/(docs)/components/button/props.ts
index 3a8f98e000..813dcaa6f0 100644
--- a/canon-docs/src/app/(docs)/components/button/props.ts
+++ b/canon-docs/src/app/(docs)/components/button/props.ts
@@ -1,7 +1,7 @@
 import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
 import type { PropDef } from '../../../../utils/propDefs';
 
-export const boxPropDefs: Record<string, PropDef> = {
+export const buttonPropDefs: Record<string, PropDef> = {
   variant: {
     type: 'enum',
     values: ['primary', 'secondary'],
diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/canon-docs/src/components/CustomTheme/customTheme.tsx
index e8628b83ff..66b4afc47c 100644
--- a/canon-docs/src/components/CustomTheme/customTheme.tsx
+++ b/canon-docs/src/components/CustomTheme/customTheme.tsx
@@ -125,7 +125,7 @@ export const CustomTheme = () => {
                 className={styles.buttonClose}
                 onClick={() => setOpen(!open)}
               >
-                <Icon name={open ? 'chevronDown' : 'chevronUp'} />
+                <Icon name={open ? 'chevron-down' : 'chevron-up'} />
               </button>
             </div>
           </div>
diff --git a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
index 8401cafd78..86a0e1ecbd 100644
--- a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
+++ b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
@@ -35,7 +35,7 @@ export const BaseUI = ({ href }: BaseUIProps) => {
         {href && (
           <a className={styles.button} href={href} target="_blank">
             Discover more
-            <Icon name="externalLink" />
+            <Icon name="external-link" />
           </a>
         )}
       </div>
diff --git a/canon-docs/src/components/Toolbar/theme-name.tsx b/canon-docs/src/components/Toolbar/theme-name.tsx
index 6b35d0efcc..277ecad9df 100644
--- a/canon-docs/src/components/Toolbar/theme-name.tsx
+++ b/canon-docs/src/components/Toolbar/theme-name.tsx
@@ -24,7 +24,7 @@ export const ThemeNameSelector = () => {
           placeholder="Select a theme"
         />
         <Select.Icon className={styles.SelectIcon}>
-          <Icon name="chevronDown" />
+          <Icon name="chevron-down" />
         </Select.Icon>
       </Select.Trigger>
       <Select.Portal>
diff --git a/canon-docs/src/snippets/button.tsx b/canon-docs/src/snippets/button.tsx
index a7df4315f9..aa20b3e46a 100644
--- a/canon-docs/src/snippets/button.tsx
+++ b/canon-docs/src/snippets/button.tsx
@@ -28,8 +28,8 @@ export const ButtonWithIcons = () => {
   return (
     <Flex align="center">
       <Button iconStart="cloud">Button</Button>
-      <Button iconEnd="chevronRight">Button</Button>
-      <Button iconStart="cloud" iconEnd="chevronRight">
+      <Button iconEnd="chevron-right">Button</Button>
+      <Button iconStart="cloud" iconEnd="chevron-right">
         Button
       </Button>
     </Flex>
@@ -40,8 +40,8 @@ export const ButtonFullWidth = () => {
   return (
     <Flex direction="column" style={{ width: '300px' }}>
       <Button iconStart="cloud">Button</Button>
-      <Button iconEnd="chevronRight">Button</Button>
-      <Button iconStart="cloud" iconEnd="chevronRight">
+      <Button iconEnd="chevron-right">Button</Button>
+      <Button iconStart="cloud" iconEnd="chevron-right">
         Button
       </Button>
     </Flex>
@@ -78,7 +78,7 @@ export const ButtonPlayground = () => {
                 Button
               </Button>
               <Button
-                iconEnd="chevronRight"
+                iconEnd="chevron-right"
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
               >
@@ -86,7 +86,7 @@ export const ButtonPlayground = () => {
               </Button>
               <Button
                 iconStart="cloud"
-                iconEnd="chevronRight"
+                iconEnd="chevron-right"
                 style={{ width: '200px' }}
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
diff --git a/packages/canon/src/components/Icon/Icon.tsx b/packages/canon/src/components/Icon/Icon.tsx
index ebb4d80d98..e81acd4c74 100644
--- a/packages/canon/src/components/Icon/Icon.tsx
+++ b/packages/canon/src/components/Icon/Icon.tsx
@@ -28,7 +28,7 @@ export const Icon = (props: IconProps) => {
 
   if (!CanonIcon) {
     console.error(`Icon "${name}" not found or is not a valid component.`);
-    return <svg />; // Return a default icon or handle the error appropriately
+    return null;
   }
 
   return (