Fixing icons

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

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'],

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>

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>

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>

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']}

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 (