docs(Icon): add v2 docs

packages/components/src/__illustrations__/Icon/v1/_docs/Icon.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta, Story } from "@storybook/blocks"
-import { ResourceLinks } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as IconStories from "./Icon.stories"
 
 <Meta of={IconStories} />
@@ -8,16 +8,13 @@ import * as IconStories from "./Icon.stories"
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Icons"
-
 />
 
 ## Installation
 
 Each icon is imported separately, for example if you'd like the `AddIcon` you will use the following import.
 
-```js
-import { AddIcon } from "@kaizen/components"
-```
+<KAIOInstallation exportNames={["AddIcon" ]} family="illustrations" version="1" />
 
 See: Reference for all icons available to import.
 
@@ -36,7 +33,7 @@ There are two ways you can apply the colour:
 
 1. Add a `classNameOverride` to the icon element
 
-```jsx
+```tsx
 <AddIcon classNameOverride="text-blue-500" />
 ```
 

packages/components/src/__illustrations__/Icon/v2/_docs/Icon.mdx

@@ -0,0 +1,48 @@
+import { Canvas, Controls, Meta, Story } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
+import * as IconStories from "../../v1/_docs/Icon.stories"
+
+<Meta title="Illustrations/Icon/Icon (v2)"/>
+
+# Icon
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Icons"
+/>
+
+## Installation
+
+Each icon is imported separately, for example if you'd like the `AddIcon` you will use the following import.
+
+<KAIOInstallation exportNames={["AddIcon" ]} family="illustrations" version="2" />
+
+See: Reference for all icons available to import.
+
+## Overview
+
+All Icon components can be meaningful or presentational icons.
+
+<Canvas of={IconStories.Playground} />
+<Controls of={IconStories.Playground} />
+
+## Applying Colour
+
+Icon's inherit the text colour through `currentColor`.
+
+There are two ways you can apply the colour:
+
+1. Add a `classNameOverride` to the icon element
+
+```tsx
+<AddIcon classNameOverride="text-blue-500" />
+```
+
+2. Change the text colour of the wrapping element
+
+<Canvas of={IconStories.ApplyColour} sourceState="shown" />
+
+## Reference
+
+Tip: click on the icon you want for a quick copy!
+
+<Story of={IconStories.Reference} />

packages/components/src/__illustrations__/Icon/v2/index.ts

@@ -0,0 +1 @@
+export * from "../v1"