Astro Feather Icons
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.
npm install astro-feather-icons
pnpm i astro-feather-icons
yarn add astro-feather-icons
Usage
All of the icons are available from a single import.
---
import { AirPlay, AtSign, Zap } from 'astro-feather-icons'
---
<AirPlay />
<AtSign />
<Zap size="60" fill="gold" />
When importing all of the icons, only the ones that get used will be added to the page
---
import * as Icon from 'astro-feather-icons'
---
<Icon.AirPlay />
<Icon.AtSign />
<Icon.Zap size="60" fill="gold" />
The icons are also available as individual imports.
---
import AirPlayIcon from 'astro-feather-icons/AirPlay'
import AtSignIcon from 'astro-feather-icons/AtSign'
import ZapIcon from 'astro-feather-icons/Zap'
---
<AirPlayIcon />
<AtSignIcon />
<ZapIcon size="60" fill="gold" />
Prop Types
The following Props
interface is available to every icon:
export interface Props {
'fill'?: string;
'fill-opacity'?: number | string;
'fill-rule'?: "nonzero" | "evenodd" | "inherit";
'height'?: number | string;
'size'?: number | string;
'stroke'?: string;
'stroke-dasharray'?: string | number;
'stroke-dashoffset'?: string | number;
'stroke-linecap'?: "butt" | "round" | "square" | "inherit";
'stroke-linejoin'?: "miter" | "round" | "bevel" | "inherit";
'stroke-miterlimit'?: number | string;
'stroke-opacity'?: number | string;
'stroke-width'?: number | string;
'viewBox'?: string;
'width'?: number | string;
}
- The
Props
interface additionally includes:- All HTML global attributes.
- All WAI-ARIA attributes and the WAI-ARIA role attribute.
- The
title
attribute transforms into a<title>
element within the<svg>
. - The
size
attribute transforms values like1.5x
into1.5em
. - The
size
attribute is used as the default values forwidth
andheight
.
Acknowledgements
This package is maintained by Edazpotato and based on svelte-feather-icons by dylanblokhuis.
Licensed under the MIT License. Feather Icons & Feather name Copyright © 2013–present Cole Bemis.