Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/seanmcp/phosphor-astro
👩🚀 Phosphor icons as Astro components
https://github.com/seanmcp/phosphor-astro
astro astrojs icons phosphor phosphor-icons phosphoricons
Last synced: 27 days ago
JSON representation
👩🚀 Phosphor icons as Astro components
- Host: GitHub
- URL: https://github.com/seanmcp/phosphor-astro
- Owner: SeanMcP
- License: mit
- Created: 2022-11-30T02:51:51.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-20T10:58:52.000Z (4 months ago)
- Last Synced: 2024-09-30T10:41:36.777Z (about 1 month ago)
- Topics: astro, astrojs, icons, phosphor, phosphor-icons, phosphoricons
- Language: JavaScript
- Homepage:
- Size: 325 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-astro - phosphor-astro - Icon components for [Phosphor icons](https://phosphoricons.com/) (What Do I Use... / If I want to add icons?)
README
# phosphor-astro
[](https://npmjs.com/package/phosphor-astro) [](https://npmjs.com/package/phosphor-astro)
👩🚀 Phosphor icons as Astro components
## Installation
Add `phosphor-astro` to your project:
```sh
npm install phosphor-astro
# or
yarn add phosphor-astro
```
## Use
Import the icons from `phoshor-astro` and add it to your code:
```jsx
---
import RocketLaunch from 'phosphor-astro/RocketLaunch.astro':
import ArrowRight from 'phosphor-astro/ArrowRightBold.astro':
import Sparkle from 'phosphor-astro/SparkleDuotone.astro':
---
```
## Astro components
The components exported from `phosphor-astro` are the raw `svg` elements from Phosphor with `{...Astro.props}` added to the root element. This should enable you to customize the element as you see fit.
```jsx
// Book.astro
```
Any prop that you pass to the component will be added to the top-level `svg` element:
```jsx
// Heart.astro
```
## License
[MIT](/LIBRARY_LICENSE)