Awesome
Feather Icons for Qwik
What is Feather?
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.
This icon library supports Feather Icons v4.29.0.
Installation
npm install --save qwik-feather-icons
Usage
Include
You can import the icon(s) you need as usual:
import { ThumbsUpIcon } from "qwik-feather-icons";
or import them all at once:
import * as IconPack from "qwik-feather-icons";
export const App = component$(() => {
return (
<div>
<IconPack.ThumbsUpIcon />
<IconPack.BatteryChargingIcon />
</div>
);
});
Props
All icons have these optional props
:
export interface IconProps {
size?: number,
color?: string,
strokeWidth?: number,
strokeLineCap?: string,
strokeLineJoin?: string,
class?: string
}
With default values defined in a defaultIconProps
object:
export const defaultIconProps: IconProps = {
size: 24,
color: "currentColor",
strokeWidth: 2,
strokeLineCap: "round",
strokeLineJoin: "round",
class: ""
};
Icon
Component
This icon library has an Icon
component with a required prop called name
:
import { Icon } from "qwik-feather-icons";
export const App = component$(() => {
return (
<div>
<Icon name="battery-charging" /> { /* equivalent to <BatteryChargingIcon /> */ }
</div>
);
});
Although is better to use the <'Name'Icon />
variant (such as <ThumbsUpIcon />
) because it wraps the actual inline <svg>
.
IconContext
Feather icons use Qwik Context to simply apply default props
to all icons. Use useContextProvider
at the root of the app (or anywhere above the icons in the tree) and pass in a configuration object with props to be applied by default to all icons.
import { component$, useContextProvider } from "@builder.io/qwik";
import { IconContext, WifiOffIcon, ThumbsUpIcon } from "qwik-feather-icons";
export const App = component$(() => {
const newDefaultProps = {
size: 96,
color: "hotpink",
strokeWidth: 2,
strokeLineCap: "round",
strokeLineJoin: "round",
class: "just an example"
};
useContextProvider(IconContext, newDefaultProps);
return (
<div>
<ThumbsDownIcon /> { /* huge (96px) hotpink icon */ }
<WifiOffIcon /> { /* same here */ }
</div>
);
});
License
This package is licensed under the MIT License.
Acknowledgment
Thanks to Cole Bemis for the Feather Project. Here is his website https://colebemis.com/.