Components
Astro Icon’s main API is an Icon
component that automatically inlines an <svg>
directly in your markup.
Icon
You can use the Icon
component by importing it from astro-icon/components
and rendering it as a normal Astro Component.
Because astro-icon
is powered by Astro, this component only renders on the server to static HTML. It has no runtime footprint.
Props
The Icon
component accepts the following properties:
The Icon
also accepts any global HTML attributes and aria
attributes. They will be forwarded to the rendered <svg>
element.
Automatically optimized sprites
Because Astro controls the entire rendering lifecycle for a given Request
, astro-icon
is able to automatically optimize repeated references to the same icon on a page.
The approach uses a novel take on the more traditional SVG Sprite system that leverages a single <svg>
sprite for your entire site. The first time the Icon
component is included on a page, it defines a sprite <symbol>
with a unique ID and immediately renders that symbol with the <use>
element. If the same icon is referenced again, Icon
will render only a <use>
element, reducing the overall size of your HTML document by referencing the existing <symbol>
.
Usage with Framework Components
The <Icon />
component, like any other Astro component, cannot be used directly in UI framework components.
But, you can pass the static content generated by <Icon />
to a framework component inside a .astro
file as children or using a named <slot/>
: