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

1. Fork it!
2. Create your feature branch: git checkout -b shiny-new-feature
3. Commit your changes: git commit -am 'feat: add some feature'
4. Push to the branch: git push origin shiny-new-feature
5. Submit a PR.