astro-heroicons

 

👩‍🚀 Heroicons as Astro components

Installation

Add astro-heroicons to your project:

``sh
npm install astro-heroicons


or


yarn add astro-heroicons
`

Use

Import the icons from astro-hericons and add it to your code:

`jsx
---
import Bold from 'astro-heroicons/solid/Bold.astro';
import Italic from 'astro-heroicons/outline/Italic.astro';
import Underline from 'astro-heroicons/mini/Underline.astro';
import Strikethrough from 'astro-heroicons/micro/Strikethrough.astro';
---









`

Astro components

The components exported from astro-heroicons are the raw svg elements from Hericons with {...Astro.props} added to the root element. This should enable you to customize the element as you see fit.

`jsx
// mini/Bolt.astro
{...Astro.props}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>


`

Any prop that you pass to the component will be added to the top-level svg element:

`jsx

`

$3

Heroicons adds aria-hidden="true" to its top-level svg elements by default. If you want those elements to be accessible to screenreaders, you need to manually pass aria-hidden="false" to the component:

`jsx

``

License

MIT