Pular para o conteúdo
Starlight

⚠️ Test Page ⚠️

Este conteúdo não está disponível em sua língua ainda.

<Icon> component

Icons from the built-in default set:

<Icon name="starlight" />
<Icon name="starlight" color="goldenrod" size="2rem" />
Preview

Icons from the built-in seti set:

<Icon name="seti:tsconfig" />
<Icon name="seti:tsconfig" color="royalblue" size="2rem" />
Preview

Icons from the user-installed Iconify mdi set:

<Icon name="mdi:bike-fast" />
<Icon name="mdi:bike-fast" color="mediumvioletred" size="2rem" />
Preview

Icons from the user src/icons/ directory:

<Icon name="test" />
<Icon name="test" color="chartreuse" size="2rem" />
Preview

<Card> component

Card component with icon from the built-in default set:

<Card icon="rocket" title="Example">
  A card with an icon from the built-in default set.
</Card>
Preview

Example

A card with an icon from the built-in default set.

Card component with icon from the built-in seti set:

<Card icon="seti:bicep" title="Example">
  A card with an icon from the built-in `seti` set.
</Card>
Preview

Example

A card with an icon from the built-in seti set.

Card component with icon from the user-installed Iconify mdi set:

<Card icon="mdi:parachute-outline" title="Example">
  A card with an icon from the user-installed Iconify `mdi` set.
</Card>
Preview

Example

A card with an icon from the user-installed Iconify mdi set.

Card component with icon from the user src/icons/ directory:

<Card icon="test" title="Example">
  A card with an icon from the user `src/icons/` directory.
</Card>
Preview

Example

A card with an icon from the user src/icons/ directory.

<Aside> component

Aside component with icon from the built-in default set:

<Aside icon="phone">Aside with an icon from the built-in default set.</Aside>
Preview

Aside component with icon from the built-in seti set:

<Aside icon="seti:github" type="tip">
  Aside with an icon from the built-in `seti` set.
</Aside>
Preview

Aside component with icon from the user-installed Iconify mdi set:

<Aside icon="mdi:emoticon-cool" type="caution">
  Aside with an icon from the user-installed Iconify `mdi` set.
</Aside>
Preview

Aside component with icon from the user src/icons/ directory:

<Aside icon="test" type="danger">
  Aside with an icon from the user `src/icons/` directory.
</Aside>
Preview

Aside directives

Aside directive with icon from the built-in default set:

:::note{icon="astro"}
Aside with an icon from the built-in default set.
:::
Preview

Aside directive with icon from the built-in seti set:

:::tip[Wow]{icon="seti:yml"}
Aside with an icon from the built-in `seti` set.
:::
Preview

Aside directive with icon from the user-installed Iconify mdi set:

:::caution[Coffee break]{icon="mdi:coffee-outline"}
Aside with an icon from the user-installed Iconify `mdi` set.
:::
Preview

Aside directive with icon from the user src/icons/ directory:

:::danger[Highly experimental]{icon="test"}
Aside with an icon from the user `src/icons/` directory.
:::
Preview