astro-feather
Simply beautiful open source icons as Astro components (basically an Astro wrapper for Feather). With full type-safety support for props.
Install
With npm:
# with npm
npm install astro-feather
# with yarn
yarn add astro-feather
# with pnpm
pnpm install astro-feather
Usage
---
// 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 />
Props
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. |
Contributing
- 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.