https://github.com/egmaleta/qwik-feather-icons

Feather icons for Qwik, the Resumable Framework
https://github.com/egmaleta/qwik-feather-icons

feather-icons icons qwik qwik-framework svg svg-icons ui-components

Last synced: 3 months ago
JSON representation

Feather icons for Qwik, the Resumable Framework

• Host: GitHub
• URL: https://github.com/egmaleta/qwik-feather-icons
• Owner: egmaleta
• License: mit
• Created: 2022-10-30T12:38:09.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-01T15:03:30.000Z (over 1 year ago)
• Last Synced: 2024-05-14T23:40:24.549Z (6 months ago)
• Topics: feather-icons, icons, qwik, qwik-framework, svg, svg-icons, ui-components
• Language: TypeScript
• Homepage:
• Size: 209 KB
• Stars: 5
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-qwik - Qwik Feather Icons

README

        
# 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](https://feathericons.com).

### Installation

```shell

npm install --save qwik-feather-icons

```

### Usage

#### Include

You can import the icon(s) you need as usual:

```ts

import { ThumbsUpIcon } from "qwik-feather-icons";

```

or import them all at once:

```ts

import * as IconPack from "qwik-feather-icons";

export const App = component$(() => {

  return (

    


      

      

    

  );

});


```

#### Props

All icons have these optional `props`:

```ts

export interface IconProps {

    size?: number,

    color?: string,

    strokeWidth?: number,

    strokeLineCap?: string,

    strokeLineJoin?: string,

    class?: string

}

```

With default values defined in a `defaultIconProps` object:

```ts

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`:

```tsx

import { Icon } from "qwik-feather-icons";

export const App = component$(() => {

  return (

    


       { /* equivalent to  */ }

    

  );

});

```


Although is better to use the `<'Name'Icon />` variant (such as ``) because it wraps the actual inline ``.

#### `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.

```tsx

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 (

    


       { /* huge (96px) hotpink icon */ }

          { /* same here */ }

    

  );

});

```


### License

This package is licensed under the [MIT License](https://github.com/yeyon/qwik-feather-icons/blob/main/LICENSE).

### Acknowledgment

Thanks to **Cole Bemis** for the Feather Project. Here is his website https://colebemis.com/.