docs(Icons): add content in the MDX

Author: jmfrancois

packages/storybook/src/icons/UsingIcons.mdx

@@ -1,3 +1,23 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Icons/Using the icons" />
+
+# Using the icons
+
+## With React
+
+The icons are available as React components in the `@qlik/sprout-icons/react` package. You can import them directly from the package and use them in your React application.
+
+```tsx
+import { AddIcon } from "@qlik/sprout-icons/react";
+
+function MyComponent() {
+  return <AddIcon />;
+}
+```
+
+They accept any SVGSVGElement props
+
+## With VueJS
+
+The icons are available as Vue components in the `@qlik/sprout-icons/vue` package.

packages/storybook/src/icons/icons.stories.tsx

@@ -12,6 +12,10 @@ export default meta;
 
 const SIZES = ["s", "m", "l", "xl", "xxl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl"] as const;
 
+function removeTrailingIconFromName(name: string) {
+  return name.endsWith("Icon") ? name.slice(0, -4) : name;
+}
+
 export const AllIcons = {
   render: () => {
     const [search, setSearch] = useState("");
@@ -50,7 +54,9 @@ export const AllIcons = {
                 className={classNames("flex", "flex-col", "gap-m", "p-m", "border-default", "radius-soft")}
                 style={{ blockSize: 150, inlineSize: 150 }}
               >
-                <span className={classNames("font-script-s", "text-weak", "break-all")}>{name}</span>
+                <span className={classNames("font-script-s", "text-weak", "break-all")}>
+                  {removeTrailingIconFromName(name)}
+                </span>
                 <div className={classNames("flex", "items-center", "justify-center", "flex-1", "text-default")}>
                   <Icon className={classNames(`size-${size}`)} />
                 </div>