Icona

Introducció

Astro Icon is ready to use, with zero additional configuration. The included Icon component allows you to inline svgs directly into your HTML.

Local Icons

By default, Astro Icon supports custom local svg icons. They are optimized with svgo automatically with no extra build step. See “A Pretty Good SVG Icon System” from CSS Tricks.

  1. Create a directory inside of src/ named icons/.
  2. Add each desired icon as an individual .svg file to src/icons/
  3. Reference a specific icon file using the name prop.
---
import { Icon } from 'astro-icon/components';
---

<!-- Loads the SVG in `/src/icons/filename.svg` -->
<Icon name="filename" />

Iconify Icons

Astro Icon also supports Iconify icon sets out-of-the-box.

  1. Find an Icon Set to use on the Iconify Icon Sets website
  2. Install the package (eg. deno add -D npm:@iconify-json/mdi)
  3. Reference a specific icon using the name prop with (eg. mdi:account)

Material Design Icons

---
import { Icon } from 'astro-icon/components'
---

<!-- Automatically fetches and inlines Material Design Icon's "account" SVG -->
<Icon name="mdi:account" />

Tailwind

Tailwind support in Astro projects is provided by the Astro Tailwind integration.

The Icon component automatically passes the class prop through to the underlying svg element.

<Icon name="mdi:linux" class="text-xl text-emerald-700" />

TODO