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/.