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


d="M48,216a23.9,23.9,0,0,1,24-24H208V32H72A23.9,23.9,0,0,0,48,56Z"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
points="48 216 48 224 192 224"
fill="none"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>

`

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

`jsx
// Heart.astro

``

License

MIT