📝 Add docs + ♻️ Rework component

.changeset/tiny-plants-divide.md

@@ -0,0 +1,6 @@
+---
+"@ledgerhq/native-ui": patch
+"@ledgerhq/react-ui": patch
+---
+
+Improvements for the crypto icons library

libs/ui/packages/native/src/components/Icon/CryptoIcon.tsx

@@ -14,7 +14,15 @@ export type Props = {
   circleIcon?: boolean;
   disabled?: boolean;
   tokenIcon?: string;
-  fallbackIcon?: React.ReactNode;
+  fallbackIcon?: JSX.Element;
+};
+
+type IconBoxProps = {
+  children: JSX.Element;
+} & Props;
+
+type FallbackProps = {
+  name: string;
 };
 
 export const iconNames = Array.from(
@@ -59,11 +67,15 @@ const TokenContainer = styled(Flex).attrs(
   }),
 )<{ size: number }>``;
 
-type IconBoxProps = {
-  children: JSX.Element;
-} & Props;
+function Fallback({ name }: FallbackProps) {
+  return (
+    <Text uppercase color="neutral.c70">
+      {name.slice(0, 1)}
+    </Text>
+  );
+}
 
-export const IconBox = ({
+const IconBox = ({
   children,
   color,
   backgroundColor,
@@ -96,18 +108,6 @@ export const IconBox = ({
   return children;
 };
 
-type FallbackProps = {
-  name: string;
-};
-
-function Fallback({ name }: FallbackProps) {
-  return (
-    <Text uppercase color="neutral.c70">
-      {name.slice(0, 1)}
-    </Text>
-  );
-}
-
 const CryptoIcon = ({
   name,
   size = 16,
@@ -140,7 +140,7 @@ const CryptoIcon = ({
     );
   }
   if (fallbackIcon) {
-    return <>{fallbackIcon}</>;
+    return fallbackIcon;
   }
   return <Fallback name={name} />;
 };

libs/ui/packages/react/src/components/asorted/Icon/CryptoIcon.tsx

@@ -13,7 +13,15 @@ export type Props = {
   circleIcon?: boolean;
   disabled?: boolean;
   tokenIcon?: string;
-  fallbackIcon?: React.ReactNode;
+  fallbackIcon?: JSX.Element;
+};
+
+type IconBoxProps = {
+  children: JSX.Element;
+} & Props;
+
+type FallbackProps = {
+  name: string;
 };
 
 export const iconNames = Array.from(
@@ -57,11 +65,16 @@ const TokenContainer = styled(Flex).attrs(
     zIndex: 0,
   }),
 )<{ size: number }>``;
-type IconBoxProps = {
-  children: JSX.Element;
-} & Props;
 
-export const IconBox = ({
+function Fallback({ name }: FallbackProps) {
+  return (
+    <Text uppercase color="neutral.c70">
+      {name.slice(0, 1)}
+    </Text>
+  );
+}
+
+const IconBox = ({
   children,
   color,
   backgroundColor,
@@ -94,18 +107,6 @@ export const IconBox = ({
   return children;
 };
 
-type FallbackProps = {
-  name: string;
-};
-
-function Fallback({ name }: FallbackProps) {
-  return (
-    <Text uppercase color="neutral.c70">
-      {name.slice(0, 1)}
-    </Text>
-  );
-}
-
 const CryptoIcon = ({
   name,
   size = 16,
@@ -138,7 +139,7 @@ const CryptoIcon = ({
     );
   }
   if (fallbackIcon) {
-    return <>{fallbackIcon}</>;
+    return fallbackIcon;
   }
   return <Fallback name={name} />;
 };

libs/ui/packages/react/src/components/asorted/Icon/CryptoIcons.stories.tsx

@@ -3,6 +3,25 @@ import styled from "styled-components";
 import { Text, SearchInput, Flex, Grid, CryptoIcon } from "../../..";
 import * as cryptoIcons from "@ledgerhq/crypto-icons-ui/react";
 
+const description = `
+### A customizable crypto-icon component.
+
+### Props
+
+\`\`\`tsx
+type Props = {
+  name: string;
+  size?: number;
+  color?: string;
+  backgroundColor?: string; // overrides background color to ensure contrast with icon color
+  circleIcon?: boolean; // if icon is in a circle or not
+  tokenIcon?: string; // ref to the token icon to show as a sub icon
+  disabled?: boolean;
+  fallback?: JSX.Element; // fallback element if no icon found - defaults to an icon with first letter of icon name
+};
+\`\`\`
+`;
+
 type CryptoIconsProps = {
   name: keyof typeof cryptoIcons;
   size?: number;
@@ -82,6 +101,13 @@ const Story = {
       defaultValue: "",
     },
   },
+  parameters: {
+    docs: {
+      description: {
+        component: description,
+      },
+    },
+  },
 };
 export default Story;