react-styled-system-icons
v0.0.4
Published
SVG React icons of popular icon packs using ES6 imports
Downloads
6
Readme
React Icons
Include popular icons in your React projects easly with react-styled-system-icons
, which utilizes ES6 imports that allows you to include only the icons that your project is using.
Installation
npm install react-styled-system-icons --save
Usage
import { FaBeer } from 'react-styled-system-icons/fa';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}
View the documentation for further usage examples and how to use icons from other packages. NOTE: each Icon package has it's own subfolder under react-styled-system-icons
you import from.
For example, to use an icon from Material Design, your import would be: import { ICON_NAME } from 'react-styled-system-icons/md';
Icons
- Font Awesome License: CC BY 4.0 License
- Ionicons License: MIT
- Material Design icons License: Apache License Version 2.0
- Typicons License: CC BY-SA 3.0
- Github Octicons icons License: MIT
- Feather License: MIT
- Game Icons License: CC BY 3.0
- Weather Icons License: SIL OFL 1.1
You can add more icons by submitting pull requests or creating issues.
Configuration
You can configure react-styled-system-icons props using React context API.
requirement React 16.3 or higher.
import { IconContext } from "react-styled-system-icons";
<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
<div>
<FaFolder />
</div>
</IconContext.Provider>
key|default|memo ---|---|--- color|undefined(inherit)| size|1em| className|undefined| style|undefined|can overwrite size and color attr|undefined|overwritten by other attributes
Migrate from version 2 -> 3
Change import style
Import path has changed. You need to rewrite from the old style.
// OLD IMPORT STYLE
import FaBeer from 'react-styled-system-icons/lib/fa/beer';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}
// NEW IMPORT STYLE
import { FaBeer } from 'react-styled-system-icons/fa';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}
Ending up with a large JS bundle? Check out this issue.
Adjustment CSS
From version 3, vertical-align: middle
is not automatically given.
Please use IconContext to specify className or style.
example for global styling
<IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
example for give global className
// app.tsx
<IconContext.Provider value={{ className: 'react-styled-system-icons' }}>
// app.css
.react-styled-system-icons {
vertical-align: middle;
}
TypeScript native support
Dependencies on @types/react-styled-system-icons
can be deleted.
npm remove @types/react-styled-system-icons
Contribute
development
yarn
yarn submodule # fetch icon sources
cd packages/react-styled-system-icons
yarn build
scripts for run demo
cd packages/react-styled-system-icons
yarn build
cd ../demo
yarn start
run preview site
cd packages/react-styled-system-icons
yarn build
cd ../preview
yarn start
Tips
SVG
Svg is supported by all major browsers.
Why ES6 import and not fonts
With react-styled-system-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.
Related
Licence
MIT
- Icons are taken from the other projects so please check each project licences accordingly.