# react-styled-system-icons
> SVG React icons of popular icon packs using ES6 imports
Latest version **0.0.4** (published 2019-11-07) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-styled-system-icons
pnpm add react-styled-system-icons
yarn add react-styled-system-icons
bun add react-styled-system-icons
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support; large bundle; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.4 |
| Published | 2019-11-07 |
| First published | 2019-11-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mrtnbroder |
## Links
- npm: https://www.npmjs.com/package/react-styled-system-icons
- Repository: https://github.com/mrtnbroder/react-styled-system-icons
- Homepage: https://github.com/mrtnbroder/react-styled-system-icons#readme
- Issues: https://github.com/mrtnbroder/react-styled-system-icons/issues
- npm.io page: https://npm.io/package/react-styled-system-icons
## Recent versions
- 0.0.4 (latest) — 2019-11-07
- 0.0.3 — 2019-11-06
- 0.0.2 — 2019-11-06
- 0.0.1 — 2019-11-06
## README
# [React Icons](https://react-styled-system-icons.netlify.com)
[![npm][npm-image]][npm-url]
[npm-image]: https://img.shields.io/npm/v/react-styled-system-icons.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/react-styled-system-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
```bash
npm install react-styled-system-icons --save
```
## Usage
```jsx
import { FaBeer } from 'react-styled-system-icons/fa';
class Question extends React.Component {
render() {
return Lets go for a ?
}
}
```
[View the documentation](https://react-styled-system-icons.netlify.com) 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](https://fontawesome.com/)
License: [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)
- [Ionicons](https://ionicons.com/)
License: [MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE)
- [Material Design icons](http://google.github.io/material-design-icons/)
License: [Apache License Version 2.0](https://github.com/google/material-design-icons/blob/master/LICENSE)
- [Typicons](http://s-ings.com/typicons/)
License: [CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/)
- [Github Octicons icons](https://octicons.github.com/)
License: [MIT](https://github.com/primer/octicons/blob/master/LICENSE)
- [Feather](https://feathericons.com/)
License: [MIT](https://github.com/feathericons/feather/blob/master/LICENSE)
- [Game Icons](https://game-icons.net/)
License: [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/)
- [Weather Icons](https://erikflowers.github.io/weather-icons/)
License: [SIL OFL 1.1](http://scripts.sil.org/OFL)
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](https://reactjs.org/docs/context.html).
requirement React 16.3 or higher.
```jsx
import { IconContext } from "react-styled-system-icons";
```
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.
```jsx
// OLD IMPORT STYLE
import FaBeer from 'react-styled-system-icons/lib/fa/beer';
class Question extends React.Component {
render() {
return Lets go for a ?
}
}
```
```jsx
// NEW IMPORT STYLE
import { FaBeer } from 'react-styled-system-icons/fa';
class Question extends React.Component {
render() {
return Lets go for a ?
}
}
```
Ending up with a large JS bundle? Check out [this issue](https://github.com/react-styled-system-icons/react-styled-system-icons/issues/154).
### Adjustment CSS
From version 3, `vertical-align: middle` is not automatically given.
Please use IconContext to specify className or style.
example for global styling
```tsx
```
example for give global className
```tsx
// app.tsx
// app.css
.react-styled-system-icons {
vertical-align: middle;
}
```
### TypeScript native support
Dependencies on `@types/react-styled-system-icons` can be deleted.
```bash
npm remove @types/react-styled-system-icons
```
## Contribute
development
```bash
yarn
yarn submodule # fetch icon sources
cd packages/react-styled-system-icons
yarn build
```
scripts for run demo
```bash
cd packages/react-styled-system-icons
yarn build
cd ../demo
yarn start
```
run preview site
```bash
cd packages/react-styled-system-icons
yarn build
cd ../preview
yarn start
```
## Tips
### SVG
Svg is [supported](http://caniuse.com/#search=svg) 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
- [react-svg-morph](https://github.com/gorangajic/react-svg-morph/)
## Licence
MIT
- Icons are taken from the other projects so please check each project licences accordingly.
---
_Source: https://npm.io/package/react-styled-system-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._