Package Exports

astro-icon
astro-icon/index.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (astro-icon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Astro Icon

A straight-forward Icon component for Astro.

astro-icon will automatically optimize icons with svgo and inline them directly into your HTML—no extra build step, no spritesheet complexity, no cross-browser concerns! See "A Pretty Good SVG Icon System" from CSS Tricks.

Usage

Install astro-icon.

npm i astro-icon
# or
yarn add astro-icon

Create a directory inside of src/ named icons/.
Add each desired icon as an individual .svg file to src/icons/
Reference a specific icon file using the name prop.

---
import Icon from 'astro-icon';
---

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

Styling

Styling your astro-icon is straightforward. Any styles can be targeted to the [astro-icon] attribute selector. If you want to target a specific icon, you may target it by name using [astro-icon="filename"].

---
import Icon from 'astro-icon';
---

<style lang="css">
    [astro-icon] {
        color: blue;
    }
    [astro-icon="annotation"] {
        color: red;
    }
</style>

<Icon name="adjustment" /> <!-- will be blue -->
<Icon name="annotation" /> <!-- will be red -->

Props

<Icon> requires the name prop to reference a specific icon.

<Icon> optionally accepts the optimize prop as a boolean. Defaults to true. In the future it will control svgo options.

<Icon> also accepts any global HTML attributes and aria attributes. They will be forwarded to the rendered <svg> element.

See the Props.ts file for more details.