Simply beautiful open source icons as Astro components (basically an Astro wrapper for Feather). With full type-safety support for props.
With npm:
# with npm
npm install astro-feather
# with yarn
yarn add astro-feather
# with pnpm
pnpm install astro-feather---
// import only what you need
import { FeatherIcon } from 'astro-feather';
---
<FeatherIcon />Alternatively, if you really want to import everything you can do:
---
import * as AstroFeather from 'astro-feather'
---
<AstroFeather.FeatherIcon />astro-feather supports the following props, which are mapped to the SVG element under the hood. Note that all props are optional.
| Name | Type | Default value | Description |
|---|---|---|---|
size |
number |
24 |
Sets size for both width and height for the icon. |
width |
number |
24 |
Sets width for the icon, overrides size iif provided. |
height |
number |
24 |
Sets height for the icon, overrides size if provided. |
strokeWidth |
number |
2 |
Sets stroke-width for the icon. |
stroke |
string |
"currentColor" |
Sets stroke for the icon. |
strokeLinecap |
"round" | "butt" | "square" | "inherit" |
"round" |
Sets stroke-linecap for the icon. |
strokeLinejoin |
"round" | "inherit" | "miter" | "bevel" |
"round" |
Sets stroke-linejoin for the icon. |
fill |
string |
"none" |
Sets fill for the icon. |
viewBox |
string |
"0 0 24 24" |
Sets viewBox for the icon. |
customClasses |
string |
"" |
Allows you to set custom classes to the icon, which appends to the built-in "feather feather-x" classes. |
- Fork it!
- Create your feature branch:
git checkout -b shiny-new-feature - Commit your changes:
git commit -am 'feat: add some feature' - Push to the branch:
git push origin shiny-new-feature - Submit a PR.