prrraveen/svgInsideJsx

## svgInsideJsx
import React, { Component } from 'react';

const svg = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<?xml version="1.0" encoding="iso-8859-1"?>

<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

	 viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">

<g>

	<defs>

		<rect id="SVGID_1_" width="18" height="18"/>

	</defs>

	<clipPath id="SVGID_2_">

		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>

	</clipPath>

	<path style="clip-path:url(#SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:#BEBDBD;" d="M14.5,4

		c-0.213,0-0.42,0.026-0.622,0.062C13.454,2.308,11.884,1,10,1C7.791,1,6,2.791,6,5c0,0.276-0.224,0.5-0.5,0.5S5,5.276,5,5

		c0-0.622,0.128-1.212,0.337-1.762C4.918,3.089,4.47,3,4,3C1.791,3,0,4.791,0,7s1.791,4,4,4h10.5c1.933,0,3.5-1.567,3.5-3.5

		C18,5.567,16.433,4,14.5,4"/>

	<path style="clip-path:url(#SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:#00697D;" d="M10,15.8c0,0.664-0.447,1.2-1,1.2

		c-0.553,0-1-0.536-1-1.2C8,15.137,9,13,9,13S10,15.137,10,15.8"/>

	<path style="clip-path:url(#SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:#00697D;" d="M6,15.8C6,16.464,5.553,17,5,17

		s-1-0.536-1-1.2C4,15.137,5,13,5,13S6,15.137,6,15.8"/>

	<path style="clip-path:url(#SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:#00697D;" d="M14,15.8c0,0.664-0.447,1.2-1,1.2

		s-1-0.536-1-1.2c0-0.663,1-2.8,1-2.8S14,15.137,14,15.8"/>

</g>

</svg>
</body>
</html>
      `

class App extends Component {
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: svg }}  />
    )
  }
}

export default App
	import React, { Component } from 'react';

	const svg = `
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<?xml version="1.0" encoding="iso-8859-1"?>

	<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->

	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

	<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

	viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">

	<g>

	<defs>

	<rect id="SVGID_1_" width="18" height="18"/>

	</defs>

	<clipPath id="SVGID_2_">

	<use xlink:href="#SVGID_1_" style="overflow:visible;"/>

	</clipPath>

	<path style="clip-path:url(#SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:#BEBDBD;" d="M14.5,4

	c-0.213,0-0.42,0.026-0.622,0.062C13.454,2.308,11.884,1,10,1C7.791,1,6,2.791,6,5c0,0.276-0.224,0.5-0.5,0.5S5,5.276,5,5

	c0-0.622,0.128-1.212,0.337-1.762C4.918,3.089,4.47,3,4,3C1.791,3,0,4.791,0,7s1.791,4,4,4h10.5c1.933,0,3.5-1.567,3.5-3.5

	C18,5.567,16.433,4,14.5,4"/>

	<path style="clip-path:url(#SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:#00697D;" d="M10,15.8c0,0.664-0.447,1.2-1,1.2

	c-0.553,0-1-0.536-1-1.2C8,15.137,9,13,9,13S10,15.137,10,15.8"/>

	<path style="clip-path:url(#SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:#00697D;" d="M6,15.8C6,16.464,5.553,17,5,17

	s-1-0.536-1-1.2C4,15.137,5,13,5,13S6,15.137,6,15.8"/>

	<path style="clip-path:url(#SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:#00697D;" d="M14,15.8c0,0.664-0.447,1.2-1,1.2

	s-1-0.536-1-1.2c0-0.663,1-2.8,1-2.8S14,15.137,14,15.8"/>

	</g>

	</svg>
	</body>
	</html>
	`

	class App extends Component {
	render() {
	return (
	<div dangerouslySetInnerHTML={{ __html: svg }} />
	)
	}
	}

	export default App