/astro-feather

Simply beautiful open source icons as Astro components.

Primary LanguageTypeScriptMIT LicenseMIT

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.