https://github.com/seanmcp/astro-heroicons

👩‍🚀 Heroicons as Astro components
https://github.com/seanmcp/astro-heroicons

Last synced: 2 months ago
JSON representation

👩‍🚀 Heroicons as Astro components

• Host: GitHub
• URL: https://github.com/seanmcp/astro-heroicons
• Owner: SeanMcP
• License: mit
• Created: 2022-11-16T18:18:47.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-12-19T16:38:50.000Z (7 months ago)
• Last Synced: 2024-04-18T06:43:57.906Z (3 months ago)
• Language: JavaScript
• Size: 669 KB
• Stars: 28
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• my-awesome-astro - astro-heroicons - Icon components for [Heroicons](https://heroicons.com/) (What Do I Use... / If I want to add icons?)

README

        
# astro-heroicons

[![npm](https://img.shields.io/npm/v/astro-heroicons.svg)](https://npmjs.com/package/astro-heroicons) [![npm](https://img.shields.io/npm/dt/astro-heroicons.svg)](https://npmjs.com/package/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 RocketLaunch from 'astro-heroicons/solid/RocketLaunch.astro';

import ArrowLongRight from 'astro-heroicons/mini/ArrowLongRight.astro';

import Sparkles from 'astro-heroicons/outline/Sparkles.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

  

```

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

```jsx

```

### `aria-hidden`

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](/LICENSE)