yarn add acmesquita-icons
npm install acmesquita-icons --save
import { AcBeer } from 'acmesquita-icons/ac';
class Question extends React.Component {
render() {
return <h3> Lets go for a <AcBeer />? </h3>
}
}
You can configure react-icons props using React Context API.
Requires React 16.3 or higher.
import { IconContext } from "react-icons";
<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
<div>
<FaFolder />
</div>
</IconContext.Provider>
Key | Default | Notes |
---|---|---|
color |
undefined (inherit) |
|
size |
1em |
|
className |
undefined |
|
style |
undefined |
Can overwrite size and color |
attr |
undefined |
Overwritten by other attributes |
title |
undefined |
Icon description for accessibility |
<IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
Component
<IconContext.Provider value={{ className: 'react-icons' }}>
CSS
.react-icons {
vertical-align: middle;
}
Dependencies on @types/react-icons
can be deleted.
yarn remove @types/react-icons
npm remove @types/react-icons
yarn
yarn submodule # fetch icon sources
cd packages/react-icons
yarn build
The preview site is the react-icons
website, built in NextJS.
cd packages/react-icons
yarn build
cd ../preview
yarn start
SVG is supported by all major browsers. With react-icons
, you can serve only the needed icons instead of one big font file to the users, helping you to recognize which icons are used in your project.
MIT
- Icons are taken from the other projects so please check each project licences accordingly.