react-npm-svg-component

react-npm-svg-component

A React component that display SVG on webpage with custom specification like pass the Width,Height,PathString & Color of SVG as props and render the SVG.

Overview

A react component that display SVG on page with specfic props width ,height,pathString & Custom Color.

<SVG width="90px"
  height="90px"
  color="orange"
  viewBox="0 0 512 512"
  pathString="m304,96c0-8.837-7.163-16-16-16h-160c-8.837,0-16,7.163-16,16v128c0,8.837 7.163,16 16,16h160c8.837,0 16-7.163 16-16v-128zm-32,112h-128v-96h128v96z M487.538,113.453l-63.809-32c-7.922-3.969-17.42-0.742-21.373,7.156c-3.953,7.906-0.702,17.516,7.204,21.469l24.301,12.139   c-0.65,1.74-1.491,3.58-1.491,5.549c0,20.832,15.63,38.426,31.63,45.051v194.949c0,8.82-7.18,16-16,16s-16-7.18-16-16v-128   c0-38.631-32-70.949-64-78.383V63.766C368,28.477,340.053,0,304.764,0h-192C77.475,0,48,28.477,48,63.766v358.109l-23.156,11.578   c-5.422,2.711-8.844,8.25-8.844,14.313v48C16,504.602,23.928,512,32.764,512h352C393.6,512,400,504.602,400,495.766v-48   c0-6.063-3.422-11.602-8.844-14.313L368,421.875v-227.16c16,6.625,32,24.219,32,45.051v128c0,26.469,21.531,48,48,48   c26.469,0,48-21.531,48-48v-240C496,121.703,492.96,116.164,487.538,113.453z M368,480H48v-22.344l23.156-11.578   c5.422-2.711,8.844-8.25,8.844-14.313v-368C80,46.117,95.115,32,112.764,32h192C322.412,32,336,46.117,336,63.766v368   c0,6.063,3.422,11.602,8.844,14.313L368,457.656V480z"/>

Props in more detail:

See details about each key below.

width

Sets the width of the SVG Icon.By default the aspect ratio will be preserved.

height

Sets the height of the SVG Icon.By default the aspect ratio will be preserved.

color

Overrides fill and stroke styles with the provided color unless it is set to none in the original SVG. If you need a more fine grained control, you can pass a color hex value or color name to set the SVG Color.

pathString

A most important props for generating SVG.In React for loading SVG is some npm package needed like SVGO,svg-loader but there is no need of any dependencies just pass the pathString of SVG which is raw string and render the SVG on webpage.

Features

• Display SVG on Webpage dynamically .
• Pass Custom width as props.
• Pass Custom heigh as props.
• Pass Color in Hex or Color name as props and set the SVG color.
• Built on standards.
• Give raw path of SVG into pathString no need of any loader for load the SVG or parser to convert into raw file.

Example

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import SVG from 'react-npm-svg-component';

class App extends Component {
	constructor(props){
		super(props);
	}

	render() {
		return(
			<div>
      <SVG width="90px"
				height="90px"
				color="orange"
				viewBox="0 0 512 512"
				pathString="m304,96c0-8.837-7.163-16-16-16h-160c-8.837,0-16,7.163-16,16v128c0,8.837 7.163,16 16,16h160c8.837,0 16-7.163 16-16v-128zm-32,112h-128v-96h128v96z M487.538,113.453l-63.809-32c-7.922-3.969-17.42-0.742-21.373,7.156c-3.953,7.906-0.702,17.516,7.204,21.469l24.301,12.139   c-0.65,1.74-1.491,3.58-1.491,5.549c0,20.832,15.63,38.426,31.63,45.051v194.949c0,8.82-7.18,16-16,16s-16-7.18-16-16v-128   c0-38.631-32-70.949-64-78.383V63.766C368,28.477,340.053,0,304.764,0h-192C77.475,0,48,28.477,48,63.766v358.109l-23.156,11.578   c-5.422,2.711-8.844,8.25-8.844,14.313v48C16,504.602,23.928,512,32.764,512h352C393.6,512,400,504.602,400,495.766v-48   c0-6.063-3.422-11.602-8.844-14.313L368,421.875v-227.16c16,6.625,32,24.219,32,45.051v128c0,26.469,21.531,48,48,48   c26.469,0,48-21.531,48-48v-240C496,121.703,492.96,116.164,487.538,113.453z M368,480H48v-22.344l23.156-11.578   c5.422-2.711,8.844-8.25,8.844-14.313v-368C80,46.117,95.115,32,112.764,32h192C322.412,32,336,46.117,336,63.766v368   c0,6.063,3.422,11.602,8.844,14.313L368,457.656V480z"/>
			</div>
		);
	}
}

ReactDOM.render(<App />,document.querySelector('.container'));

Technology Stack:

• React

Usage:

npm install react-npm-svg-component --save

import SVG from 'react-npm-svg-component';

// ...


<SVG width="90px"
  height="90px"
  color="orange"
  viewBox="0 0 512 512"
  pathString="m304,96c0-8.837-7.163-16-16-16h-160c-8.837,0-16,7.163-16,16v128c0,8.837 7.163,16 16,16h160c8.837,0 16-7.163 16-16v-128zm-32,112h-128v-96h128v96z M487.538,113.453l-63.809-32c-7.922-3.969-17.42-0.742-21.373,7.156c-3.953,7.906-0.702,17.516,7.204,21.469l24.301,12.139   c-0.65,1.74-1.491,3.58-1.491,5.549c0,20.832,15.63,38.426,31.63,45.051v194.949c0,8.82-7.18,16-16,16s-16-7.18-16-16v-128   c0-38.631-32-70.949-64-78.383V63.766C368,28.477,340.053,0,304.764,0h-192C77.475,0,48,28.477,48,63.766v358.109l-23.156,11.578   c-5.422,2.711-8.844,8.25-8.844,14.313v48C16,504.602,23.928,512,32.764,512h352C393.6,512,400,504.602,400,495.766v-48   c0-6.063-3.422-11.602-8.844-14.313L368,421.875v-227.16c16,6.625,32,24.219,32,45.051v128c0,26.469,21.531,48,48,48   c26.469,0,48-21.531,48-48v-240C496,121.703,492.96,116.164,487.538,113.453z M368,480H48v-22.344l23.156-11.578   c5.422-2.711,8.844-8.25,8.844-14.313v-368C80,46.117,95.115,32,112.764,32h192C322.412,32,336,46.117,336,63.766v368   c0,6.063,3.422,11.602,8.844,14.313L368,457.656V480z"/>
</div>

Clone the repo as a new project:

git clone https://github.com/lobdev/react-npm-svg-component <react-npm-svg-component>

Start Server:

First you have to replace the lib/component/svgcomponent.js to index.js in package.json
cd react-npm-svg-component
npm i
npm start

Run App:

npm start command automatically initiate browser at 3000 port
http:://localhost:3000

Developer Notes:

Make sure you configure your editor/IDE to use:

.editorconfig
.eslintrc