icons (#24418)

Author: patriciasantaana

src/content/docs/style-guide/components/cards.mdx

@@ -4,6 +4,8 @@ styleGuide:
   component: Card
 ---
 
+import { Render } from "~/components";
+
 Cards are a built-in component provided by [Starlight](https://starlight.astro.build/components/cards/).
 
 ## Cards
@@ -43,3 +45,12 @@ import { LinkTitleCard } from "~/components";
 	Interesting content you want to highlight.
 </LinkTitleCard>
 ```
+
+## Card icons
+
+<Render
+	file="icons"
+	params={{
+		component: "cards",
+	}}
+/>

src/content/docs/style-guide/components/icons.mdx

@@ -2,6 +2,8 @@
 title: Icons
 ---
 
+import { Render } from "~/components";
+
 There are two icon components which pull from two different icon sets.
 
 ## astro-icon
@@ -24,4 +26,13 @@ The Starlight icon set is available to use in `Tab`, `Card` and other Starlight
 import { StarlightIcon } from "~/components";
 
 <StarlightIcon name="seti:shell" color="var(--sl-color-text-accent)" size="3rem" />
-```
+```
+
+## Icon library
+
+<Render
+	file="icons"
+	params={{
+		component: "cards or tabs",
+	}}
+/>

src/content/docs/style-guide/components/tabs.mdx

@@ -4,7 +4,7 @@ styleGuide:
   component: Tabs
 ---
 
-import { Tabs, TabItem } from '~/components';
+import { Tabs, TabItem, Render } from '~/components';
 
 This component can help you create a tabbed interface to show related information more efficiently. Use it when there are different ways of getting the same thing done:
 
@@ -27,6 +27,15 @@ import { Tabs, TabItem } from '~/components';
 </Tabs>
 ```
 
+### Tab icons 
+
+<Render
+	file="icons"
+	params={{
+		component: "tab labels",
+	}}
+/>
+
 ## Synchronize Tabs
 
 If you have tabs that follow a particular pattern (Dashboard / API / Terraform), add a `syncKey` parameter that includes a `string` value.

src/content/partials/style-guide/icons.mdx

@@ -0,0 +1,6 @@
+---
+params:
+  - component
+---
+
+Optionally, you can choose a corresponding icon from Starlight’s [Icons](https://starlight.astro.build/reference/icons/#all-icons) for {props.component}.