react-i
A tiny (1 KB gzipped) <Icon />
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.
Compatibility
- IE8+
- React 0.14+
Usage
npm i react-i --save
import I from 'react-i' <I ='up' /><I ='up'>icon</I><I ='up' ='#f00' ='i-up'>icon</I>
Props
static propTypes = icon: PropTypesisRequired size: PropTypes style: PropTypesobject // Use `fill` and `stroke` is a convenient way, auto merge to `style` fill: PropTypesstring stroke: PropTypesstring dir: PropTypes
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 SketchThis 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:
<!-- Generator: Sketch 3.4 (15575) - http://www.bohemiancoding.com/sketch -->24x24Created with Sketch.Don't case the redundant code, we have a tool (in
./tools
folder) to convert it.run
./svg-icon origin.svg
, output:const Origin = <g><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"/></g>Great, we hava a component named
Origin
. -
Use it in project
Convert all svg file to a js file.
./svg-icon *.svg >> icons.jsThen, 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 = () => <div style={{color:'#38B8C1'}}> <I icon={Origin} /> </div> render( <App />, document.getElementById('root') )
A effective easy and cheap way to organizing and use your icons, right?
More Case
<div => <I ='up'><span>icon-left</span></I><br/> <I ='right' ='down'><span>icon-right</span></I><br/> <span =><I ='up'>Inherit Color</I></span><br/> <span =><I = ='up'></I><span>Custom Color</span></span><br/> <I =>Custom Icon</I><br/> <I = =>Support Shadow</I><br/> <I = ='40'>big icon</I><br/> <I = ='10em'>very big icon</I><br/> <I = ='12'>small icon</I><br/> <button =><I ='up' ='right'>use in button</I></button></div>
Animation Svg example:
Notice that, React(v0.14.x) not support
animateTransform
yet, there is a temporary solution withdangerouslySetInnerHTML
const Spinner = <g> <path =".25" ="M12,0 C5.372583,-4.05812251e-16 8.11624501e-16,5.372583 0,12 C-8.11624501e-16,18.627417 5.372583,24 12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,4.05812251e-16 12,0 M12,3 C16.9705627,3.00000007 20.9999999,7.0294373 20.9999999,12 C20.9999999,16.9705627 16.9705627,20.9999999 12,21 C7.0294373,20.9999999 3.00000013,16.9705627 3.00000013,12 C3.00000013,7.0294373 7.0294373,3.00000007 12,3"/> <path ="M12,0 C18.627417,4.05812251e-16 24,5.372583 24,12 L21,12 C21,7.02943725 16.9705627,3 12,3 L12,0 Z" => </path></g>
Try your self:
git clone https://github.com/leecade/react-i.gitnpm i // edit demo/index.js npm run dev // open demo/index.html