@nurkit/feather-icons

Installation

Inside your React project directory, run any of the following commands to install this package.

npm install @nursoft/feather-icons
yarn add @nursoft/feather-icons

Import

import FeaterIcons, { SupportIcon } from "@nurkit/feather-icons";

Example

<Flex>
  <FeaterIcons.Activity width="64px" height="64px" />
  <SupportIcon color="tomato" />
</Flex>

Add new Icons

As you can see in the src folder, every icon is in it own file. We use the function createIcon from @chakra-ui/icon to generate them. Example:

const HalfFilledCircle = createIcon({
  displayName: "HalfFilledCircle",
  viewBox: "0 0 24 25",
  path: (
    <g fill="none" stroke="currentColor">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M12.7639 7.02094C12.3422 7.02094 12 7.41205 12 7.89395V18.3701C12 18.8529 12.3422 19.2432 12.7639 19.2432C15.7117 19.2432 18.1111 16.501 18.1111 13.132C18.1111 9.76221 15.7117 7.02094 12.7639 7.02094Z"
        fill="currentColor"
      />
      <circle cx="12" cy="13" r="9" stroke="currentColor" />
    </g>
  ),
});

If you want to reduce the size and minify the markup of the icon, in the documentation of @chakra-ui they recomend to use SvgOmg.

About Feather

We want to have only one package that export feather icons and our icons, thats why in the index we export everything from react-feather. Not all the params are compatible, for example, w and h doesn't work in the native icons from react-feather.