react-inline-svg-icon

react-inline-svg-icon is a simple react component that renders inline svg.

View demo

Features

Inline SVG

Installation

npm i react-inline-svg-icon --save  # or yarn add react-inline-svg-icon --save

Usage

import { Icon } from 'react-inline-svg-icon';


...

render () {
  return (
    <div>
      <Icon name="menu" color="#1abc9c" />
    </div>
  )
}

...

props:

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

Demo using react-storybook

git clone git@github.com:pauldariye/react-inline-svg-icon.git
cd react-inline-svg-icon
npm install # or yarn
npm run storybook

Goto localhost:6060

How to add new icons

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'

To Do

Convert svg files to inline and auto add to react component with single command
Gulp tooling with gulp-svgo

Acknowledgement

Icon Credits

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

dariye/react-inline-svg-icon

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages