react-iconfonts

A Project For React To Use Iconfont Intelligently

Installation

$ npm i -S react-iconfonts

import IconFont from 'react-iconfonts'

Iconfont

Upload your icons(SVG) to your icon project you have created and download it from Iconfont, unzip download.zip.

FontClass

Add iconfont.css to your project

// Import css
import '/PATH TO YOUR ICONFONT FOLDER/iconfont.css'

Symbol, Svg

Add iconfont.js to your project

// import js
import '/PATH TO YOUR ICONFONT FOLDER/iconfont.js'

Warning: If there is something wrong with iconfont.js because of Eslint, add this comment to the first line of iconfont.js: // eslint-disable-next-line no-unused-expressions

Usage

import React from 'react'
import './App.css'
import IconFont from 'react-iconfonts'
import '/PATH TO YOUR ICONFONT FOLDER/iconfont.css'
import '/PATH TO YOUR ICONFONT FOLDER/iconfont.js'

<!-- FontClass -->
<div>
  Hello
  <IconFont type="icon" name="hasSelected" color="f00" size="30" /> FontIcon
</div>
<div>
  Hello
  <IconFont type="icon" name="notSelected" color="f00" size="30" /> FontIcon
</div>

<!-- Symbol, Svg -->
<div>
  Hello
  <IconFont type="svg" name="hasSelected" color="f00" size="30" /> SvgIcon
</div>
<div>
  Hello
  <IconFont type="svg" name="notSelected" color="f00" size="30" /> SvgIcon
</div>

Example Here