Rich Icon documentation (#562)

apps/docs/content/components/icons/Icon.mdx

@@ -1,12 +1,12 @@
 ---
 title: Icon
-description: An icon component allow you to render a custom icon.
+description: An icon component is used to render a custom icon.
 category: "icons"
 links:
     source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/icons/src/Icon.tsx
 ---
 
-<Example src="icons/docs/preview" isOpen />
+<Example src="icons/docs/icon/preview" isOpen />
 
 Hopper provides multiple ways to use icons in your project:
 
@@ -82,13 +82,13 @@ function CustomIcon(props: CreatedIconProps) {
 
 An icon can vary in size. When used inside another component, it'll generally be sized automatically. If you use a standalone icon, you can use the size prop to control the sizing.
 
-<Example src="icons/docs/sizes" />
+<Example src="icons/docs/icon/sizes" />
 
 ### Styling
 
 The color of the icon can be changed using the `fill` prop. All the styled system props are also available.
 
-<Example src="icons/docs/styling" />
+<Example src="icons/docs/icon/styling" />
 
 <FeatureFlag flag="next">
     ## Advanced customization

apps/docs/content/components/icons/RichIcon.mdx

@@ -1,49 +1,81 @@
 ---
 title: RichIcon
-description: TBD
+description: A rich icon component is used to render a rich custom icon.
 category: "icons"
 links:
     source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/icons/src/RichIcon.tsx
-status: WIP
 ---
 
-## Props
+<Example src="icons/docs/richIcon/preview" isOpen />
+
+Similar to icons, RichIcons are vibrant and colorful. Perfect for decorative purposes or drawing attention to specific elements.
+
+Hopper provides multiple ways to use rich icons in your project:
+
+- Using the [Workleap icon library](/icons/overview/introduction)
+- [Creating your own icons](#creating-your-custom-rich-icons)
+
+## Creating your custom rich icons
 
-TODO: Add the props table, if we have multiple props table (ex: TagList and Tag) in the same file,  use the name of the component in ### before the each props table
+To use an rich icon component to create custom rich icons you must first import your SVG icon as a component by using [`@svgr/webpack`](https://react-svgr.com/docs/getting-started/).
 
-## Guidelines
+Hopper provides two methods for creating your custom icons:
 
-TODO: If we have some guidelines about this component's usage
+- Using the `createRichIcon` function (recommended)
+- Using the `RichIcon` component
 
-### Accessibility ?
+Both `RichIcon` and `createRichIcon` enable you to style the icon using the styled system.
 
-TODO: If we have some guidelines about this component and accessibility
+### Using the createRichIcon function
 
-## Anatomy
+The `createRichIcon` function is a convenience wrapper around the process of generating rich icons with `RichIcon`, allowing you to achieve the same functionality with less effort.
 
-TODO: We have anatomy screenshots from the Figma, we could most likely use them here
+```tsx {6}
+import CustomRichIcon24 from "./path/to/custom-rich-icon-24.svg";
+import CustomRichIcon32 from "./path/to/custom-rich-icon-32.svg";
+import CustomRichIcon40 from "./path/to/custom-rich-icon-40.svg";
+import { createRichIcon } from "@hopper-ui/icons";
 
-### Concepts
+const CustomRichIcon = createRichIcon(CustomRichIcon24, CustomRichIcon32, CustomRichIcon40, "CustomIcon")
+```
 
-TODO: links to related concepts
+### Using the RichIcon component
 
-### Composed Components
+```tsx {8-12}
+import CustomRichIcon24 from "./path/to/custom-icon-24.svg"
+import CustomRichIcon32 from "./path/to/custom-icon-32.svg"
+import CustomRichIcon40 from "./path/to/custom-icon-40.svg"
+import { Icon, type CreatedRichIconProps } from "@hopper-ui/icons";
 
-TODO: links to related components (most likely all component which are used by the slots)
+function CustomRichIcon(props: CreatedRichIconProps) {
+  return (
+    <RichIcon
+        src24={CustomIcon24}
+        src32={CustomRichIcon24}
+        src40={CustomRichIcon32}
+        {...props} />
+  )
+}
+```
 
-## Usage
+### Sizes
 
-## Advanced customization
+A rich icon can vary in size. When used inside another component, it'll generally be sized automatically. If you use a standalone icon, you can use the size prop to control the sizing.
 
-### Contexts
-TODO: Example of context + content about the context
+<Example src="icons/docs/richIcon/sizes" />
 
-### Custom Children
+### Styling
 
-TODO: Example of passing custom childrens to the components to fake a slot
+The color of the rich icon can be changed using the `fill` prop. All the styled system props are also available.
 
-### Custom Component
+<Example src="icons/docs/richIcon/styling" />
 
-TODO: Example of creating a custom version of this component
+### Variants
+
+The color of the rich icon can be changed using the `variant` prop.
+
+<Example src="icons/docs/richIcon/variants" />
+
+## Props
 
-## Migration Notes (WIP)
+<PropTable component="RichIcon" />

apps/docs/examples/Preview.ts

@@ -734,21 +734,33 @@ export const Previews: Record<string, Preview> = {
     "inputs/docs/textField/fluid": {
         component: lazy(() => import("@/../../packages/components/src/inputs/docs/textField/fluid.tsx"))
     },
-    "icons/docs/preview": {
-        component: lazy(() => import("@/../../packages/icons/docs/preview.tsx"))
+    "icons/docs/icon/preview": {
+        component: lazy(() => import("@/../../packages/icons/docs/icon/preview.tsx"))
     },
-    "icons/docs/sizes": {
-        component: lazy(() => import("@/../../packages/icons/docs/sizes.tsx"))
+    "icons/docs/icon/sizes": {
+        component: lazy(() => import("@/../../packages/icons/docs/icon/sizes.tsx"))
     },
-    "icons/docs/styling": {
-        component: lazy(() => import("@/../../packages/icons/docs/styling.tsx"))
+    "icons/docs/icon/styling": {
+        component: lazy(() => import("@/../../packages/icons/docs/icon/styling.tsx"))
     },
     "IconList/docs/preview": {
         component: lazy(() => import("@/../../packages/components/src/IconList/docs/preview.tsx"))
     },
     "IconList/docs/size": {
         component: lazy(() => import("@/../../packages/components/src/IconList/docs/size.tsx"))
     },
+    "icons/docs/richIcon/preview": {
+        component: lazy(() => import("@/../../packages/icons/docs/richIcon/preview.tsx"))
+    },
+    "icons/docs/richIcon/sizes": {
+        component: lazy(() => import("@/../../packages/icons/docs/richIcon/sizes.tsx"))
+    },
+    "icons/docs/richIcon/styling": {
+        component: lazy(() => import("@/../../packages/icons/docs/richIcon/styling.tsx"))
+    },
+    "icons/docs/richIcon/variants": {
+        component: lazy(() => import("@/../../packages/icons/docs/richIcon/variants.tsx"))
+    },
     "ErrorMessage/docs/preview": {
         component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/preview.tsx"))
     },

apps/docs/scripts/generateComponentData.ts

@@ -29,6 +29,7 @@ export interface Options {
 
 const PACKAGES = path.join(process.cwd(), "..", "..", "packages", "components", "src");
 const ICON_FILE = path.join(process.cwd(), "..", "..", "packages", "icons", "src", "Icon.tsx");
+const RICH_ICON_FILE = path.join(process.cwd(), "..", "..", "packages", "icons", "src", "RichIcon.tsx");
 const COMPONENT_DATA = path.join(process.cwd(), "datas", "components");
 
 const tsConfigParser = docgenTs.withCustomConfig(
@@ -311,7 +312,8 @@ async function generateComponentData() {
 
     // Manually add Icon.tsx to the component list
     const iconComponent: ComponentData = { name: "Icon", filePath: ICON_FILE };
-    const components = [...componentList, iconComponent];
+    const richIconComponent: ComponentData = { name: "RichIcon", filePath: RICH_ICON_FILE };
+    const components = [...componentList, iconComponent, richIconComponent];
 
     if (!components.length) {
         console.error("No components found");

packages/icons/docs/preview.tsx → packages/icons/docs/icon/preview.tsx

@@ -1,6 +1,6 @@
 import { createIcon } from "@hopper-ui/icons";
 
-import { Sparkles16, Sparkles24, Sparkles32 } from "./src/index.ts";
+import { Sparkles16, Sparkles24, Sparkles32 } from "../src/index.ts";
 
 const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon");
 

packages/icons/docs/sizes.tsx → packages/icons/docs/icon/sizes.tsx

@@ -1,7 +1,7 @@
 import { Inline } from "@hopper-ui/components";
 import { createIcon } from "@hopper-ui/icons";
 
-import { Sparkles16, Sparkles24, Sparkles32 } from "./src/index.ts";
+import { Sparkles16, Sparkles24, Sparkles32 } from "../src/index.ts";
 
 const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon");
 

packages/icons/docs/styling.tsx → packages/icons/docs/icon/styling.tsx

@@ -1,6 +1,6 @@
 import { createIcon } from "@hopper-ui/icons";
 
-import { Sparkles16, Sparkles24, Sparkles32 } from "./src/index.ts";
+import { Sparkles16, Sparkles24, Sparkles32 } from "../src/index.ts";
 
 const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon");
 

packages/icons/docs/richIcon/preview.tsx

@@ -0,0 +1,13 @@
+import { createRichIcon } from "@hopper-ui/icons";
+
+import { SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40 } from "../src/index.ts";
+
+const CustomRichIcon = createRichIcon(SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40, "SparklesRichIcon");
+
+export default function Example() {
+    return (
+        <CustomRichIcon />
+    );
+}
+
+