Heroicons as Astro components
npm install astro-heroicons 
š©āš Heroicons as Astro components
Add astro-heroicons to your project:
``sh`
npm install astro-heroiconsor
yarn add astro-heroicons
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
``