react-inline-svg-icon is a simple react component that renders inline svg.
- Inline SVG
npm i react-inline-svg-icon --save # or yarn add react-inline-svg-icon --save
import { Icon } from 'react-inline-svg-icon';
...
render () {
return (
<div>
<Icon name="menu" color="#1abc9c" />
</div>
)
}
...
| name | default | description |
|---|---|---|
| className | - | This specifies a css class for an icon |
| color | #000 | This specifies the fill color of the shape |
| name | This specifies the name of the icon to render | |
| size | 25 | This specifies the size of the icon i.e width (the height is set to auto |
| title | 'icon' | This specifies the <title/> tag for the svg |
git clone [email protected]:pauldariye/react-inline-svg-icon.git
cd react-inline-svg-icon
npm install # or yarn
npm run storybook
Goto localhost:6060
- Visit https://goo.gl/wL4FWi
- Import svg icon of choice. (For Angry Artichoke Project, visit https://goo.gl/zyPzL1 ... request access if you can't get in)
- Customize svg as needed. Refer to this article if you need to understand svgs better -> https://goo.gl/jrZiHr
- Copy path code from 'Code' tab after you're done customizing (from above)
- Add new case (in lowercase i.e 'clock' ) within the switch statement below Sort cases in alphabetical order
- Paste svg path code in case return statement like so
return ( <g>[PASTE YOUR SVG PATH CODE HERE]</g>) - You can now use your svg icon like so
<Icon name='clock' size={25} />anywhere after you import this file - Add a test case in the 'Icons.test.js'
- Convert svg files to inline and auto add to react component with single command
- Gulp tooling with gulp-svgo
- BudIcons (Not FREE. I'm using a few that I purchased out of the icon pack)
- KΛPKLΛM from the Noun Project
- mikicon from the Noun Project
- Nirbhay from the Noun Project
- Martina Krasnayová from the Noun Project