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

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

Last synced: 3 days 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 (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-08-26T20:09:09.000Z (5 months ago)
• Last Synced: 2024-12-16T16:44:16.454Z (26 days ago)
• Language: JavaScript
• Homepage:
• Size: 294 KB
• Stars: 31
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• 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-heroicons` 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

  

```

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)