# react-i
**Repository Path**: mirrors_leecade/react-i
## Basic Information
- **Project Name**: react-i
- **Description**: A tiny (1 KB) Component for React(-like).
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-09
- **Last Updated**: 2026-02-14
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# react-i
[](https://npmjs.org/package/react-i "View this project on npm")
[](https://npmjs.org/package/react-i "View this project on npm")
[](https://github.com/leecade/react-i/pulls?q=is%3Apr+is%3Aclosed)
[](https://github.com/leecade/react-i/issues?q=is%3Aissue+is%3Aclosed)
[](https://circleci.com/gh/leecade/react-i)
[](https://github.com/feross/standard)
A tiny (1 KB gzipped) `` Component for React(-like).
> SVG is the best way for cross platform scalable vector graphics, also we can use `react-i` in react-native or react-android project.
[DEMO](https://view.gitlab.pro/react/react-i)
### Compatibility
- IE8+
- React 0.14+
### Usage
```sh
npm i react-i --save
```
```jsx
import I from 'react-i'
iconicon
```
#### Props
```jsx
static propTypes = {
icon: PropTypes.oneOfType([
PropTypes.func,
PropTypes.string
]).isRequired,
size: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]),
style: PropTypes.object,
// Use `fill` and `stroke` is a convenient way, auto merge to `style`
fill: PropTypes.string,
stroke: PropTypes.string,
dir: PropTypes.oneOf([
'left',
'right'
])
}
```
#### How to create a icon
Consider for reduce size in the real world, there provides a simple way to create your iconset.
- First of all, open the `tools/simple.sketch` file in Sketch
This is a template file, you may draw your vector icon by yourself, then export as `svg` type (If you want complete the step in AI or PS, notice that keep the canvas size 24x24)
- Open the svg file in editor, we will get the code like:
```xml
```
Don't case the redundant code, we have a tool (in `./tools` folder) to convert it.
run `./svg-icon origin.svg`, output:
**UPDATE**
> There is a standone tool see: https://github.com/leecade/react-i-cli
```sh
$ npm i react-i-cli -g
$ react-i origin.svg
```
```js
export const Origin = () =>
```
Great, we hava a component named `Origin`.
- Use it in project
Convert all svg file to a js file.
```sh
./svg-icon *.svg >> icons.js
```
Then, we can use it with `react-i`.
```
import React, { Component } from 'react'
import ReactDOM, { render } from 'react-dom'
import I from 'react-i'
import {
Origin
} from './icons'
const App = () =>
render(
,
document.getElementById('root')
)
```
A effective easy and cheap way to organizing and use your icons, right?
#### More Case
```jsx
icon-left icon-right Inherit Color Custom Color Custom Icon Support Shadow big icon very big icon small icon
```
Animation Svg example:
> Notice that, React(v0.14.x) not support `animateTransform` yet, there is a temporary solution with `dangerouslySetInnerHTML`
```jsx
const Spinner = () => ' }}>
```
Try your self:
```sh
git clone https://github.com/leecade/react-i.git
npm i
// edit demo/index.js
npm run dev
// open demo/index.html
```
## Need more open-source iconset
- [material-design-icons](https://elements.polymer-project.org/elements/iron-icons?view=demo:demo/index.html&active=iron-icons)
- [Twig](https://github.com/leecade/twig/tree/master/svg/24)
- [polyicon](https://github.com/PolymerLabs/polyicon)
## Refs
- [Tips for Creating and Exporting Better SVGs for the Web](http://sarasoueidan.com/blog/svg-tips-for-designers)
- [SVG `symbol` a Good Choice for Icons](https://css-tricks.com/svg-symbol-good-choice-icons/)
- [An Overview of SVG Sprite Creation Techniques](https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/)
- [Optimising SVGs for Web Use](https://medium.com/larsenwork-andreas-larsen/optimising-svgs-for-web-use-part-1-67e8f2d4035)