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 phosphor phosphoricons
Last synced: 2 months ago
JSON representation
👩🚀 Phosphor icons as Astro components
- Host: GitHub
- URL: https://github.com/seanmcp/phosphor-astro
- Owner: SeanMcP
- License: other
- Created: 2022-11-30T02:51:51.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2022-11-30T02:56:32.000Z (over 1 year ago)
- Last Synced: 2024-04-18T06:44:01.491Z (3 months ago)
- Topics: astro, astrojs, phosphor, phosphoricons
- Language: JavaScript
- Homepage:
- Size: 120 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- 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/outline/Sparkle.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](/LICENSE)