@lil-icons/react

lil-icons

Demo

Installation

npm install @lil-icons/react

or

yarn add @lil-icons/react

Usage

Use icon as a common component:

import { IconSuccess } from '@lil-icons/react';

const MyComponent = () => (
  <div>
    <IconSuccess />
  </div>
);

You can use LilIconsContext to declare props once in the root component, they will be passed down to all the icons. It uses Context API:

import { LilIconsContext, IconSuccess } from '@lil-icons/react';

const App = () => (
  <div>
    <LilIconsContext.Provider value={{ color: 'green', width: 64, height: 64 }}>
      <IconSuccess /> // green 64x64
    </LilIconsContext.Provider>
  </div>
);

Icon props have a higher priority than provider props:

<LilIconsContext.Provider value={{ color: 'green' }}>
  <IconSuccess color="red" /> // red
</LilIconsContext.Provider>

You can get props from context in your custom components using withLilIconsContext:

import { withLilIconsContext } from '@lil-icons/react';

const SomeIcon = ({ width, height, color }) => (
  <svg width={width} height={height} color={color}>
    ...
  </svg>
);

const MyCustomIcon = withLilIconsContext(SomeIcon);

Props

Prop	Type	Required
color	String	No
width	String or Number	No
height	String or Number	No