npm install --save react-icons-kit
To use react-icons-kit, import the Icon component plus an icon from any of the iconset.
1
2
3
4
5
6
7
import { Icon } from 'react-icons-kit'
import { home } from 'react-icons-kit/icomoon/home'
export const IconHome () => <Icon icon={home} />
You can set the size of an icon using the size attribute. The size attribute can take in percentage instead of a number such that it can use the size of the container
<InlineItems> <Center><Icon icon={home} /></Center> <Center><Icon size={32} icon={home} /></Center> <Center><Icon size={64} icon={home} /></Center> <Center> <div style={{width: 24, height: 24}}> <Icon size={'100%'} icon={home}/> </div> </Center> </InlineItems>
The component takes in the color of the container by default. To change the color, just set the color of the container.
<Center> <InlineItems> <div style={{ color: '#F4A261' }}> <Icon size={64} icon={home}/> </div> <div style={{ color: '#2A9D8F' }}> <Icon size={64} icon={home}/> </div> <div style={{ color: '#E9C46A' }}> <Icon size={64} icon={home}/> </div> </InlineItems> </Center>
You should normally have the Icon not referred directly but rather exported such that you only change it in one place. You can use withBaseIcon function helper for this purpose. Below is an example of a file called ProjectIcons.js which contains icons used throughout a specific project
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//File ProjectIcons.js
import React from 'react'
import { withBaseIcon } from 'react-icons-kit'
import { home } from 'react-icons-kit/icomoon'
import { home2 } from 'react-icons-kit/icomoon'
import { home3 } from 'react-icons-kit/icomoon'
//lets say the icons on your side navigation are all color red
const SideIconContainer =
withBaseIcon({ size: 64, style: {color: '#EF233C'}})
export const HomeIcon1 = () => <SideIconContainer icon={home}/>
export const HomeIcon2 = () => <SideIconContainer icon={home2}/>
export const HomeIcon3 = () => <SideIconContainer icon={home3}/>
So to use the icons, you would import them as normal then render them as their own component as per the live example below.
// import { HomeIcon1, HomeIcon2, HomeIcon 3} from ... <Center> <div> <div><HomeIcon1/></div> <div><HomeIcon2/></div> <div><HomeIcon3/></div> </div> </Center>