React inline SVG - reactjs

I am trying to display some svg thsirt inside a react component like so:
class TShirt extends React.Component {
showText () {
if(this.props.name != '')
{ return 'show-text'; }
}
render () {
return (
<div className="tshirt-wrapper">
<div className="tshirt">
<h1 className={this.showText()}>{this.props.name}
<span className="s">’</span>
<span className={"inline " + (this.props.currentState.hideS ? 'hide': '')}>s</span>
<span className="block">about</span>
</h1>
<div>
<path className="st0" d="M764.9,559c0,0,28.2-35.6,40.2-68.3"/>
<g>
<path className="st1" d="M326.9,1216.5c-1.6,0-3,0-4.1-0.1c-2.9-0.3-5.5-0.3-7.9-0.4c-7.8-0.2-11.6-0.4-14-4.6c-0.6-1.1-1.3-2.2-2-3.3
c-3.7-6.1-6.9-11.3-5.1-19.4c2.2-10,6.4-34.8,9-58.6c0.8-7,1.8-15,2.8-23.4c2.3-18.5,4.9-39.5,5.7-55.4c0.4-8.1,1.1-18,1.8-27.5
c1.3-18.1,2.4-33.8,1.7-38c-0.9-5.8,0-15.8,1.2-22.5c0.5-2.7,1-7.5,1.6-13.6c1.1-9.8,2.5-23.2,4.7-36.9c4.1-26.5,11-73.4,10.4-90.3
c-0.6-16.8-6.3-80.6-9.7-117.1c-1.8-19.8-2.8-36.5-3.5-48.8c-0.4-7.1-0.8-12.7-1.1-16.9c-0.5-5.4-1.6-13.1-2.9-21.2
c-1.4-9.6-2.9-19.5-3.6-27.6c-1.8-20.8-5.6-24.9-8.7-26.1c-0.7-0.3-1.6-0.4-2.5-0.4c-2.8,0-6.3,1.4-10.7,4.4
c-0.2,0.1-0.6,0.3-0.9,0.4c-1.7,0.7-4.5,1.9-5.5,5.9c-0.9,3.8-1.2,11.3-1.2,11.6l0,0.6l0.1,0.3c0,0,0,0,0,0c0,0,0,0.1,0,0.1
c0,0.1-0.3,0.3-1,0.4l-0.3,0.1l-0.3,0.1c0,0-1.9,0.8-5.6,0.8c-2.8,0-5.9-0.5-9.1-1.4c-2.3-0.7-4.7-1.4-7.2-2.3
c-9-2.9-19.1-6.2-29.4-6.2c-0.4,0-0.8,0-1.2,0c-0.8,0-1.6,0-2.4,0c-10.2,0-19.9-1.7-33.3-4c-2.2-0.4-4.4-0.8-6.8-1.2
c-6-1-12.9-1.8-19.6-2.5c-8.6-0.9-21.4-2.3-24.1-4.1c1.1-4.2,2.2-6.9,4.1-11.4l0.9-2c1.6-3.7,2-6.8,2.5-9.6
c0.3-1.9,0.5-3.5,1.1-5.1l0.2-0.7c1.9-5.3,6.9-19.5,7.9-31.4c2-25.1,5.8-46.8,10.9-62.7c0.1-0.4,11-36,21.1-49.5
c10.9-14.6,28.1-34.7,41.7-46.9c14-12.5,20.7-17.7,30.4-22.4c4.2-2,9-3.8,13.7-5.5c6.3-2.3,12.8-4.7,18.3-7.8
c5.4-3,24.9-13.8,43.7-24.2c13.6-7.5,27-14.9,34.5-19.1c3.1-1.7,6-3.3,8.7-4.8c16.2-8.9,23.4-13,25.1-15.4c1-1.4,1.3-2.7,1.6-3.7
c0.3-1.3,0.4-1.6,1.2-2.1c0.8-0.5,1.7-0.8,2.7-1.1c1.9-0.6,4.3-1.3,6.7-3.8c2.2-2.2,6.8-6.8,10.6-7c0.1,0,0.3,0,0.4,0
c4.7,0,19.1,2.8,32.3,6.2c13.7,3.5,45.7,8.8,77.9,8.8c30.9,0,57.6-1.2,69.6-3c6.4-1,13.5-2.7,18.7-3.9c3.2-0.7,6.8-1.6,7.6-1.6
c1,0.2,4.4,3,5.8,4.2c0.8,0.6,1.4,1.2,1.9,1.6c1.4,1,3.2,1.4,5.3,1.9c2.1,0.4,4.4,0.9,6.8,2.1c2.1,1,5.5,3.9,8.8,6.6
c4.3,3.6,8.8,7.3,12.3,8.9c2.5,1.1,5.2,2.9,8,4.8c3.6,2.4,7.4,4.9,11.2,6.3c2.5,0.9,5.8,1.9,9.2,3c5.3,1.7,11.3,3.5,15.1,5.2
c2.7,1.2,11.5,6,20.8,11.2c12.1,6.7,25.9,14.4,31.2,16.6c3.6,1.5,9.7,3.7,16.1,6c8.4,3,19.8,7.2,21.3,8.2c0.9,0.7,0.9,0.9,1,1.2
c0.1,0.6,0.3,1.6,1.2,2.5c0.5,0.5,1.4,1.1,4.6,3c5.2,3.3,13.9,8.7,22.2,15.2c12.3,9.5,33.7,30.3,40.8,44.6l1.9,3.8
c6.8,13.8,14.6,29.5,17.9,45.6c2.8,13.4,5.4,37.6,7.4,55.2c0.6,5.8,1.2,10.8,1.6,14.3c1.8,14.5,8,40.2,10.8,49.4
c2,6.7,3.3,10.9,3.7,12.6c-1.1-0.5-2.4-0.9-3.6-1.1c-0.3,0-0.6,0-0.9,0c-1.6,0-4.3,0.3-7.7,0.7c-3.4,0.4-7.3,0.8-11,1.1
c-2,0.1-7.2,0.2-13.8,0.2c-19.9,0.2-53.3,0.5-66.1,3.3c-12.1,2.7-26.8,7.2-34.7,9.6c-2,0.6-3.9,1.2-4.7,1.4c0.3-3-0.7-6.1-2.8-9.2
c-0.1-0.2,0.1-0.9,0.2-1.3c0.3-1.4,1.1-4.7-2.6-6.5c-1.1-0.6-2-0.9-2.8-1.2c-0.4-0.1-0.9-0.3-1.2-0.5c0-0.1,0-0.2,0-0.3
c0.2-2.7-1.6-5.2-2.7-6.4c-0.7-0.7-3.1-3.2-5.5-3.2h-0.1l-0.2,0c-1.9,0.1-4.3,0.7-5.3,3.7c-0.7,2-4.2,11.1-6.3,13.7l-0.3,0.4
c-2.6,3.3-2.7,3.8-3.1,10c-0.1,1.5-0.2,5.5-0.3,11.6c-0.4,18.4-1.4,56.8-4,96.6c-3.4,51.7-7,88.1-8.5,100c-0.2,1.6-0.4,3-0.6,4.3
c-1.2,8.8-1.9,13.7-0.4,28.1c0,0,7.6,65.3,8.6,74c0.6,4.8,2.2,15.6,3.8,26c1.3,8.5,2.5,16.5,3.1,21c0.6,4.4,1.8,10.7,3.2,17.9
c1.9,9.7,4,20.6,5.3,30.4c1.6,12.7,2.7,39.6,3.4,57.4c0.2,6,0.4,11.2,0.6,14.4c0.4,7,3,21.5,5.8,36.9c2.3,12.6,4.6,25.6,5.7,34.6
c2.5,20,5.5,35.9,7,39.7c0.6,1.6,0.7,4,0.7,6.5c0,2.1,0.1,4.4,0.5,6.5c0.9,4.5,2.5,9,2.6,9.2l0.2,0.5l0.3,0.4
c0.1,0.1,0.4,0.6,0.1,1.1c-0.9,1.6-5.9,8.4-13.2,9.7c-3.7,0.7-15.5,1.4-31.1,1.4c-14.7,0-27.9-0.6-37.3-1.7
c-19.5-2.3-56.7-6.1-86.4-6.1c-6,0-11.5,0.2-16.4,0.5c-29.7,1.9-101.4,2.7-124.9,2.7c-2.3,0-4.2,0-5.8,0c-0.6,0-1.1,0-1.7,0
c-9.5,0-18.4,0.7-26.2,1.3c-5.9,0.5-11.1,0.9-15.3,0.9c-0.6,0-1.2,0-1.8,0c-2.7-0.1-6.1-0.4-10.1-0.7c-6.5-0.5-14.6-1.1-22.3-1.1
c-5.2,0-9.5,0.3-13.3,0.8C366.3,1213.2,340.2,1216.5,326.9,1216.5z"/>
<path d="M430.4,233.8c4.5,0,18.7,2.7,31.7,6.1c13.8,3.6,46.1,8.9,78.5,8.9c31.1,0,57.9-1.2,70-3.1c6.5-1,13.7-2.7,18.9-3.9
c2.5-0.6,5.3-1.2,6.6-1.5c1.2,0.7,3.6,2.6,4.6,3.5c0.8,0.6,1.4,1.2,2,1.6c1.8,1.4,4,1.8,6.3,2.3c1.9,0.4,4.1,0.9,6.2,1.9
c1.8,0.9,5.2,3.8,8.3,6.3c4.4,3.7,9,7.5,12.9,9.3c2.3,1.1,4.9,2.8,7.7,4.6c3.8,2.5,7.7,5.1,11.7,6.5c2.5,0.9,5.8,1.9,9.3,3
c5.2,1.6,11.2,3.5,14.9,5.1c2.6,1.1,11.7,6.2,20.6,11.1c12.8,7.1,26,14.5,31.5,16.7c3.7,1.5,9.8,3.7,16.2,6
c7.5,2.7,18.8,6.8,20.8,7.9c0,0,0,0,0,0c0.2,0.8,0.6,2.2,1.8,3.4c0.7,0.7,1.5,1.2,5,3.4c5.1,3.2,13.8,8.6,22,15
c12.6,9.8,33.5,30.4,40.1,43.8c0.6,1.2,1.2,2.5,1.9,3.8c6.8,13.7,14.4,29.2,17.7,45c2.8,13.3,5.4,37.4,7.3,55
c0.6,5.8,1.2,10.8,1.6,14.3c1.8,14.6,8.1,40.6,10.9,49.9c1,3.4,1.9,6.2,2.5,8.3c-0.3,0-0.6,0-0.9,0c-1.8,0-4.5,0.3-8,0.7
c-3.4,0.4-7.3,0.8-10.9,1.1c-1.9,0.1-7.1,0.2-13.7,0.2c-20,0.2-53.5,0.5-66.6,3.4c-12.2,2.7-27,7.2-34.9,9.7
c-0.6,0.2-1.1,0.3-1.6,0.5c-0.4-2.2-1.2-4.3-2.6-6.5c0,0,0-0.1,0-0.1c1-4.3-0.3-7.5-3.9-9.3c-1-0.5-1.9-0.9-2.6-1.2
c-0.3-3-2.2-5.4-3.4-6.7c-1.1-1.2-4-4-7.4-4c-0.1,0-0.3,0-0.4,0c-3.9,0.3-6.4,2.1-7.5,5.4c-0.8,2.4-4.2,10.8-5.9,12.9l-0.3,0.4
c-3.1,3.9-3.3,5.1-3.7,11.4c-0.1,1.6-0.2,5.6-0.3,11.7c-0.4,18.4-1.3,56.7-4,96.5c-3.4,51.6-6.9,88-8.5,99.9
c-0.2,1.5-0.4,3-0.6,4.3c-1.2,8.7-1.9,14-0.4,28.7l0,0l0,0c0.1,0.7,7.6,65.4,8.6,74c0.6,4.9,2.2,15.7,3.8,26.1
c1.3,8.5,2.5,16.5,3.1,21c0.6,4.5,1.8,10.8,3.2,18.1c1.9,9.6,4,20.6,5.2,30.2c1.6,12.6,2.6,39.4,3.4,57.2c0.2,6,0.4,11.3,0.6,14.5
c0.4,7.1,3,21.7,5.8,37.2c2.3,12.5,4.6,25.5,5.7,34.5c2.3,18.4,5.4,35.7,7.1,40.3c0.4,1.2,0.5,3.4,0.6,5.6c0.1,2.2,0.1,4.6,0.5,6.9
c0.9,4.7,2.6,9.4,2.7,9.6l0.2,0.8c-1.5,2.1-5.6,6.6-10.9,7.6c-3.6,0.7-15.2,1.3-30.6,1.3c-14.6,0-27.7-0.6-37-1.7
c-19.6-2.3-56.8-6.2-86.7-6.2c-6.1,0-11.6,0.2-16.5,0.5c-29.6,1.9-101.2,2.7-124.7,2.7c-2.3,0-4.2,0-5.8,0c-0.6,0-1.2,0-1.7,0
c-9.6,0-18.5,0.7-26.4,1.3c-5.9,0.5-11,0.9-15.1,0.9c-0.6,0-1.2,0-1.7,0c-2.6-0.1-6.1-0.4-10-0.7c-6.6-0.5-14.7-1.2-22.5-1.2
c-5.3,0-9.8,0.3-13.7,0.9c-13.3,2-39.2,5.3-52.3,5.3c-1.5,0-2.8,0-3.9-0.1c-2.9-0.3-5.7-0.3-8.1-0.4c-7.6-0.2-10.2-0.5-11.8-3.3
c-0.7-1.2-1.4-2.3-2-3.4c-3.5-5.8-6.3-10.5-4.8-17.6c2.2-10,6.5-34.9,9.1-58.9c0.8-7,1.8-14.9,2.8-23.4c2.3-18.6,4.9-39.6,5.7-55.6
c0.4-8.1,1.1-17.9,1.8-27.4c1.5-21.1,2.4-34.3,1.7-38.6c-0.9-5.5,0.1-15.1,1.2-21.7c0.5-2.8,1-7.6,1.7-13.7
c1.1-9.8,2.5-23.1,4.7-36.8c5.1-32.4,11-74.5,10.4-90.8c-0.6-16.9-6.3-80.7-9.7-117.3c-1.8-19.7-2.8-36.5-3.5-48.7
c-0.4-7.1-0.8-12.7-1.1-17c-0.5-5.5-1.6-13.2-2.9-21.4c-1.4-9.5-2.9-19.4-3.6-27.4c-1.5-17.7-4.5-25.9-10.3-28.2
c-1-0.4-2.2-0.6-3.4-0.6c-3.3,0-7.2,1.5-12,4.7c-0.1,0.1-0.4,0.2-0.6,0.3c-1.9,0.8-5.7,2.4-6.9,7.7c-0.8,3.5-1.2,9.6-1.3,11.5l0,0
c-0.3,0.1-1.9,0.6-4.5,0.6c-2.6,0-5.4-0.4-8.4-1.3c-2.3-0.7-4.6-1.4-7.1-2.2c-9.1-3-19.5-6.3-30.1-6.3c-0.4,0-0.8,0-1.3,0
c-0.8,0-1.6,0-2.3,0c-9.9,0-19.6-1.7-32.9-4c-2.2-0.4-4.4-0.8-6.8-1.2c-6.1-1-13-1.8-19.7-2.5c-7-0.7-17-1.8-21.3-3.1
c0.9-2.9,1.9-5.4,3.4-9c0.3-0.6,0.6-1.3,0.9-2.1c1.7-4,2.2-7.4,2.6-10.1c0.3-1.8,0.5-3.3,1-4.6l0.2-0.7c1.9-5.4,7-19.8,8-32.1
c2-24.9,5.8-46.4,10.8-62.1l0,0l0,0c0.1-0.4,10.9-35.5,20.7-48.7c10.9-14.5,27.9-34.5,41.3-46.5c13.8-12.3,20.4-17.5,29.8-22
c4.1-2,8.9-3.7,13.5-5.4c6.4-2.4,13-4.8,18.6-8c5.3-3,24.8-13.8,43.7-24.2c13.9-7.6,27-14.9,34.5-19.1c3.1-1.7,6-3.3,8.7-4.8
c17.7-9.8,23.9-13.3,26-16.2c1.2-1.8,1.7-3.4,2-4.5c0.1-0.2,0.1-0.5,0.2-0.6c0.5-0.3,1.2-0.5,2.1-0.8c2.1-0.6,4.9-1.5,7.8-4.4
c1.8-1.8,6.1-6.1,9-6.3C430.2,233.8,430.3,233.8,430.4,233.8 M430.4,228.8c-0.2,0-0.4,0-0.6,0c-4.5,0.2-9,4.5-12.2,7.8
s-6.2,2.8-9,4.5s-1.8,4-3.5,6.5s-15,9.5-33,19.5s-69,38-78.2,43.2s-21.8,8.5-31.8,13.2c-10,4.8-17,10.2-31,22.8s-31.5,33.2-42,47.2
s-21.5,50.2-21.5,50.2c-7.2,22.8-10,51-11,63.3s-6.5,27.2-8,31.5s-1,8.5-3.5,14.5s-3.9,9.1-5.2,14.4c-1.3,5.3,27.2,5.8,45.8,9
c17.5,3,28.5,5.2,40.5,5.2c0.8,0,1.6,0,2.5,0c0.4,0,0.8,0,1.1,0c12.6,0,25.3,5.3,35.9,8.3c4,1.2,7.3,1.5,9.8,1.5
c4.4,0,6.7-1.1,6.7-1.1c3.8-0.8,2.9-3.8,2.9-3.8s0.3-7.5,1.2-11.2c0.8-3.7,3.8-3.8,5.3-4.8c1.3-0.9,5.9-3.9,9.3-3.9
c0.6,0,1.1,0.1,1.5,0.3c3.3,1.3,5.8,8.7,7.2,24c1.3,15.3,5.5,37.3,6.5,48.8s1.8,34.7,4.7,65.7c2.8,31,9,99.5,9.7,117
c0.7,17.5-6.8,67.5-10.3,89.8c-3.5,22.3-5.2,43.5-6.3,50.5s-2.2,17.2-1.2,23.3c1,6.2-2.3,42.2-3.5,65c-1.2,22.8-6,55.8-8.5,78.7
s-6.7,47.7-9,58.3c-2.3,10.7,3.2,17.2,7.3,24.5c4.2,7.3,12.5,5.2,23.8,6.2c1.2,0.1,2.7,0.2,4.3,0.2c13.6,0,39.9-3.4,53-5.3
c4-0.6,8.4-0.8,13-0.8c12.1,0,25,1.6,32.4,1.8c0.6,0,1.2,0,1.9,0c9.9,0,24.7-2.2,41.5-2.2c0.6,0,1.1,0,1.7,0c1.5,0,3.5,0,5.8,0
c25.7,0,96.1-0.9,125-2.7c5-0.3,10.5-0.5,16.2-0.5c30,0,67.1,3.9,86.1,6.1c10.7,1.3,24.8,1.7,37.6,1.7c14.4,0,27.2-0.6,31.5-1.4
c8.2-1.5,13.8-8.8,15-11c1.2-2.2-0.5-4-0.5-4s-1.7-4.5-2.5-8.8c-0.8-4.3,0-9.8-1.3-13.3c-1.3-3.5-4.3-19.2-6.8-39.2
s-10.8-58.8-11.5-71.3c-0.7-12.5-1.8-54.8-4-72c-2.2-17.2-7.2-38.2-8.5-48.3c-1.3-10.2-5.8-38.3-6.8-47c-1-8.7-8.6-74-8.6-74
c-1.7-16.3-0.5-20.2,1-31.9c1.5-11.7,5-47.5,8.5-100.2c3.5-52.7,4-102.1,4.3-108.2c0.4-6.1,0.4-5.9,2.9-9c2.5-3.1,6.2-13,6.8-14.5
s1.4-1.9,3.1-2c0,0,0.1,0,0.1,0c1.8,0,6,3.9,5.8,6.9c-0.2,3,1.9,2.6,5.2,4.4c3.4,1.8-0.1,4.6,1.5,7c1.6,2.4,2.8,5.1,2.4,7.9
c-0.3,2.3,1.2,2.5,2.2,2.5c0.2,0,0.3,0,0.4,0c0.8,0,23-7.4,39.9-11.1c16.9-3.8,71.5-3,79.5-3.5c7.4-0.5,15.5-1.8,18.6-1.8
c0.3,0,0.5,0,0.7,0c2.1,0.2,4.9,2.1,6.2,2.1c0.1,0,0.3,0,0.4-0.1c1.1-0.5-0.1-3.2-0.1-3.2s-1.2-4.5-4-13.5s-9-34.8-10.8-49
s-5.2-51.8-9-69.8s-12.8-35.2-20-50s-29.2-36-41.5-45.5s-25.5-17-26.5-18s0.2-2-2.5-4s-28.8-10.8-38-14.5s-45.5-25-52-27.8
s-18.2-6-24.5-8.2s-13-8.2-19-11s-16-13-21-15.5s-9.8-2.2-11.8-3.8s-7-6.2-9.2-6.2s-15.5,3.8-26.8,5.5s-37.2,3-69.2,3
s-63.8-5.2-77.2-8.8C450.3,231.7,435.5,228.8,430.4,228.8L430.4,228.8z"/>
</g>
<path className="st2" d="M420.4,247c0,0,47,14,107.7,14s78.7-2,129.7-13"/>
<path className="st0" d="M157.3,546c0,0,115.3,23.3,131.3,24.3"/>
<path className="st0" d="M297.4,564.8c0,0-26.9-16.5-54.3-37"/>
<path className="st0" d="M298.4,564.9c0,0-18.5-11.4-38.6-48.7"/>
<path className="st3" d="M298.4,564.9c0,0-36.9-69.9-32.2-120.3c4.7-50.3,3.2-56.7-12.8-113.3"/>
<path className="st3" d="M813.3,328.8c-22.9,71.7-13.8,55.8-19.8,127.8S764.9,559,764.9,559"/>
<path className="st0" d="M770.4,562.5c0,0,21.8-22.3,43.6-47.5"/>
<path className="st0" d="M770.4,562.5c0,0,15.7-18.3,49.2-31"/>
<path className="st0" d="M908.1,551.3c0,0-76.8-0.2-129.2,20.2"/>
<path className="st3" d="M294.1,1180.3c0,0,3.3,12,24.3,12.7c21,0.7,69.7-8,93.3-8s71.3,5,136.3,4.7s84.3-6.7,122.7-5.3
c38.3,1.3,73.7,9.3,88.7,6.7c15-2.7,22.8-7.7,22.8-7.7"/>
<path className="st0" d="M763.8,559.2c-1-1.6,2.8-29.4-4.5-64"/>
<path className="st0" d="M301.6,565.3c0,0-5.8-11.3-0.2-29.3c2.4-7.5,5.6-17.1,8.5-25.8"/>
<path className="st2" d="M284.4,615.3"/>
</div>
{
this.props.iconsHolder ?
<IconsHolder
icons={this.props.icons}
slotA={this.props.slotA}
optionA={this.props.optionA}
slotB={this.props.slotB}
optionB={this.props.optionB}
slotC={this.props.slotC}
optionC={this.props.optionC}
setSlotA={this.props.setSlotA}
setSlotB={this.props.setSlotB}
setSlotC={this.props.setSlotC} />
:
""
}
</div>
</div>
);
}
}
I don't get any errors when running webpack and neither in the console, however the img doesn't appear even though I can see the code in the markup.

If you're going to use SVG elements, you need to do so within an SVG document.
Add <svg> and </svg> around the SVG elements in order to achieve this.

Related

How can I use this SVG in React without getting any error?

I want to use JavaScript SVG as an icon. However, I keep getting this error. I fixed one error by changing xmls:xlink into xmlsXlink. However, it did not work same for xml:space.
SVG code
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 85 85"
style="enable-background:new 0 0 85 85;"
xml:space="preserve"
>
<polygon
class="st0"
points="6.3,1.2 13,75.4 42.4,83.8 72.1,75.4 78.9,1.2"
fill="#FFF"
/>
<g>
<g transform="translate(4.988 -113.385)">
<path
d="M7.1,189.8l-6.9-76.4H75l-7,76.4l-30.6,8.6L7.1,189.8z M62.4,185.6l5.8-65.5H37.6l0.2,72.2 L62.4,185.6z M34.7,129.8h-7.4L27.2,169l-14.5-4v9l21.9,5.9L34.7,129.8L34.7,129.8z"
fill="#D4B830"
/>
<path
d="M32.3,179.2c-1-0.3-5.7-1.6-10.6-2.9l-8.8-2.4v-4.4c0-4.3,0-4.4,0.4-4.3 c0.2,0.1,3.4,1,7.1,2l6.7,1.8l0.1-19.5l0.1-19.5h7.3v24.9c0,19.7-0.1,24.9-0.3,24.9C34.2,179.7,33.2,179.4,32.3,179.2L32.3,179.2z"
fill="#EBEBEB"
opacity="0.986"
fill-opacity="0"
enable-background="new"
/>
<path
d="M12.8,174v-9c0,0,9.2,2.6,14.4,3.9l0.1-39.1h7.4v50.1L12.8,174L12.8,174z"
fill="#EBEBEB"
opacity="0.986"
fill-opacity="0.9216"
enable-background="new"
/>
<path
d="M37.6,120.2h30.6l-5.8,65.5l-24.8,6.7V120.2z M60.8,174.6l2-24.5L48,151.8v-13.1l15.9-0.1 l0.6-8.9l-23.9,0.1l0.3,32.5l14.5-2.5l-0.2,7.2l-14.7,4l0.1,8.9L60.8,174.6L60.8,174.6z"
fill="#FDD83C"
/>
</g>
</g>
</svg>
You've no text in the file so just remove the xml:space attribute altogether.

How to render svg icons in react

var filled_lock = ' <svg width="30px" height="30px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch --><title>Locked</title><desc>Created with Sketch.</desc><defs></defs><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Icon/Locked/Filled/Light"><rect id="Rectangle" fill="#D8D8D8" opacity="0" x="-1" y="-1" width="15" height="15"></rect><g id="Icon/Locked/Filled/Dark" transform="translate(-1.000000, -1.000000)"><rect id="Rectangle" fill="#D8D8D8" opacity="0" x="0" y="0" width="15" height="15"></rect><g transform="translate(3.000000, 1.000000)" fill="#668cb3"><path d="M7.75,5.5 L2.25,5.5 L2.25,3.25 C2.25,1.73365625 3.483875,0.5 5.0005,0.5 C6.51659375,0.5 7.75,1.73365625 7.75,3.25 L7.75,5.5 Z M5.25,9.4685 L5.25,10.5 L4.75,10.5 L4.75,9.4685 C4.3186875,9.35746875 4,8.9659375 4,8.5 C4,7.94771875 4.44771875,7.5 5,7.5 C5.55228125,7.5 6,7.94771875 6,8.5 C6,8.9659375 5.6813125,9.35746875 5.25,9.4685 Z M8.25,5.5 L8.25,3.25 C8.25,1.4553125 6.7949375,0 5.0005,0 C3.2050625,0 1.75,1.4553125 1.75,3.25 L1.75,5.5 L0,5.5 L0,13 L10,13 L10,5.5 L8.25,5.5 Z" id="Fill-1"></path><path d="M5,8 C4.7243125,8 4.5,8.2243125 4.5,8.5 C4.5,8.7756875 4.7243125,9 5,9 C5.2756875,9 5.5,8.7756875 5.5,8.5 C5.5,8.2243125 5.2756875,8 5,8" id="Fill-3"></path></g></g></g></g></svg> ';
This var filled_lock is my svg icon which Im trying to render in a div but it's not showing it up
I tried putting it in <img src={filled_lock} /> still it doesn't show up
I tried <div dangerouslySetInnerHTML={{__html:{filled_lock}}} /> still no success
Does anyone know how we can render it in react
So investigating it further I saw that using quotes in the filled_lock was showing the string itself. On removing the string it was failing due to this reason. Which when I fixed gave me the desired output
New code
var filled_lock = <svg width="30px" height="30px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"><!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch --><title>Locked</title><desc>Created with Sketch.</desc><defs></defs><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Icon/Locked/Filled/Light"><rect id="Rectangle" fill="#D8D8D8" opacity="0" x="-1" y="-1" width="15" height="15"></rect><g id="Icon/Locked/Filled/Dark" transform="translate(-1.000000, -1.000000)"><rect id="Rectangle" fill="#D8D8D8" opacity="0" x="0" y="0" width="15" height="15"></rect><g transform="translate(3.000000, 1.000000)" fill="#668cb3"><path d="M7.75,5.5 L2.25,5.5 L2.25,3.25 C2.25,1.73365625 3.483875,0.5 5.0005,0.5 C6.51659375,0.5 7.75,1.73365625 7.75,3.25 L7.75,5.5 Z M5.25,9.4685 L5.25,10.5 L4.75,10.5 L4.75,9.4685 C4.3186875,9.35746875 4,8.9659375 4,8.5 C4,7.94771875 4.44771875,7.5 5,7.5 C5.55228125,7.5 6,7.94771875 6,8.5 C6,8.9659375 5.6813125,9.35746875 5.25,9.4685 Z M8.25,5.5 L8.25,3.25 C8.25,1.4553125 6.7949375,0 5.0005,0 C3.2050625,0 1.75,1.4553125 1.75,3.25 L1.75,5.5 L0,5.5 L0,13 L10,13 L10,5.5 L8.25,5.5 Z" id="Fill-1"></path><path d="M5,8 C4.7243125,8 4.5,8.2243125 4.5,8.5 C4.5,8.7756875 4.7243125,9 5,9 C5.2756875,9 5.5,8.7756875 5.5,8.5 C5.5,8.2243125 5.2756875,8 5,8" id="Fill-3"></path></g></g></g></g></svg>;
For output:
<div>{filled_lock}</div>
Use react-svg for this:
import { ReactSVG } from 'react-svg';
<ReactSVG src={filled_lock} />
You can save svg image in an *.svg file and import it as:
import filled_lock from './filled_lock.svg';
function App() {
return (
<img src={filled_lock} alt="filled_lock" />
);
}
Or
import { ReactComponent as FilledLock } from './filled_lock.svg';
function App() {
return (
<FilledLock />
);
}
Docs

How to use a custom SVG file in material ui SVG ICON

I am trying to use a chip with SVG delete icon,
The icon code is
const icon = (props) => {
return (
<SvgIcon>
<img src={'ic_check.svg'} style={{width: '20px'}} width={'20px'}/>
</SvgIcon>
)
};
The content of SVG file
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10"/>
<path fill="#FFF" fill-rule="nonzero" d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"/>
<path d="M0 0h24v24H0z"/>
</g>
</svg>
and the chip finally is
<Chip
label={ViewUtils.NOT_EXPIRED}
className={classes.chip}
onDelete={() => {}}
deleteIcon={<icon/>}/>
But this is not working and I checked for the path and it is correct as I can render same svg in img tag.
Nayan SvgIcon takes a svg path that you can further style. But in your case your svg is already styled. It doesn't take svg file directory path which actually lose SvgIcon API purpose.
You just need to remove SvgIcon from img tag:
<Chip
label={ViewUtils.NOT_EXPIRED}
className={classes.chip}
onDelete={() => {console.log('You Deleted this icon')}}
deleteIcon={icon}
/>
and Make you svg as const or import from assets file directory I haven't tried that,
const icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10"/>
<path fill="#FFF" fill-rule="nonzero" d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"/>
<path d="M0 0h24v24H0z"/>
</g>
</svg>
There is a reason why we can't make <icon/> component. If we make it as component as following:
const Icon = (props) => {
return (
<SvgIcon>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none" fill-rule="evenodd">
<rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10" />
<path
fill="#FFF"
fill-rule="nonzero"
d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"
/>
<path d="M0 0h24v24H0z" />
</g>
</svg>
</SvgIcon>
)
};
It works like a charm but onDelete doesn't get fired on this component.I've reported this issue as well on material UI. In first case onDelete gets called every time. Feel free to ask any question.
EDITED Fixed the above issue for Icon as Component rather than const. here is the codesandbox link for working example:
https://codesandbox.io/s/98842r4yy4
I am using React and typescript, created a component and added the tags from HTML and it worked normally.
export const IconTable: React.FC = () => {
return (
<svg width="130" height="130" viewBox="0 0 1024 1024">
<path d="M505.947 123.597a23.096 23.096 0 0 0-16.99-7.477h-6.837c-17.929 0-32.631 13.468-34.198 "/>
</svg>
);

How to attach onClick events to preview template in react-dropzone-component?

I am trying to use react-dropzone-component in reactjs, Everything works fine but after image is uploaded i want to add the onclick events to preview Template
Below is the config
const djsConfig = { addRemoveLinks: true, params: {
userId: this.props.userId }, previewTemplate:
<div class="dz-preview dz-file-preview" >
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-success-mark">
<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Check</title>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835
11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915
C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022
L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27
C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27
C1,41.3594035 12.6405965,53 27,53 Z" id="Oval-2"
stroke-opacity="0.198794158" stroke="#747474"
fill-opacity="0.816519475" fill="#FFFFFF"
sketch:type="MSShapeGroup"></path>
</g>
</svg>
</div>
<div class="dz-error-mark">
<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Error</title>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Check-+-Oval-2" sketch:type="MSLayerGroup" stroke="#747474"
stroke-opacity="0.198794158" fill="#FFFFFF"
fill-opacity="0.816519475">
<path d="M32.6568542,29 L38.3106978,23.3461564 C39.8771021,21.7797521 39.8758057,19.2483887
38.3137085,17.6862915 C36.7547899,16.1273729 34.2176035,16.1255422 32.6538436,17.6893022 L27,23.3431458 L21.3461564,17.6893022 C19.7823965,16.1255422 17.2452101,16.1273729 15.6862915,17.6862915
C14.1241943,19.2483887 14.1228979,21.7797521 15.6893022,23.3461564
L21.3431458,29 L15.6893022,34.6538436 C14.1228979,36.2202479
14.1241943,38.7516113 15.6862915,40.3137085 C17.2452101,41.8726271 19.7823965,41.8744578 21.3461564,40.3106978 L27,34.6568542 L32.6538436,40.3106978 C34.2176035,41.8744578 36.7547899,41.8726271
38.3137085,40.3137085 C39.8758057,38.7516113 39.8771021,36.2202479 38.3106978,34.6538436 L32.6568542,29 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1
1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z" id="Oval-2"
sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
</div>
</div> };
is there any way i can do it?

SVG file inside React JSX

I have the following:
class IconsHolder extends React.Component {
handleClick (e) {
var current = e.target.getAttribute("data-icon-id");
if(current == 1){
this.props.setSlotA(true);
this.props.setSlotB(false);
this.props.setSlotC(false);
}
else if(current == 2) {
this.props.setSlotA(false);
this.props.setSlotB(true);
this.props.setSlotC(false);
}
else if(current == 3) {
this.props.setSlotA(false);
this.props.setSlotB(false);
this.props.setSlotC(true);
}
}
render () {
var a = this.props.slotA ? "active" : "",
b = this.props.slotB ? "active" : "",
c = this.props.slotC ? "active" : "";
return (
<div className="icons-holder">
<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1090.8 1542.8" style="enable-background:new 0 0 1090.8 1542.8;" xmlSpace="preserve">
<path class="st0" d="M764.9,559c0,0,28.2-35.6,40.2-68.3"/>
<g>
<path d="M430.4,233.8c4.5,0,18.7,2.7,31.7,6.1c13.8,3.6,46.1,8.9,78.5,8.9c31.1,0,57.9-1.2,70-3.1c6.5-1,13.7-2.7,18.9-3.9
c2.5-0.6,5.3-1.2,6.6-1.5c1.2,0.7,3.6,2.6,4.6,3.5c0.8,0.6,1.4,1.2,2,1.6c1.8,1.4,4,1.8,6.3,2.3c1.9,0.4,4.1,0.9,6.2,1.9
c1.8,0.9,5.2,3.8,8.3,6.3c4.4,3.7,9,7.5,12.9,9.3c2.3,1.1,4.9,2.8,7.7,4.6c3.8,2.5,7.7,5.1,11.7,6.5c2.5,0.9,5.8,1.9,9.3,3
c5.2,1.6,11.2,3.5,14.9,5.1c2.6,1.1,11.7,6.2,20.6,11.1c12.8,7.1,26,14.5,31.5,16.7c3.7,1.5,9.8,3.7,16.2,6
c7.5,2.7,18.8,6.8,20.8,7.9c0,0,0,0,0,0c0.2,0.8,0.6,2.2,1.8,3.4c0.7,0.7,1.5,1.2,5,3.4c5.1,3.2,13.8,8.6,22,15
c12.6,9.8,33.5,30.4,40.1,43.8c0.6,1.2,1.2,2.5,1.9,3.8c6.8,13.7,14.4,29.2,17.7,45c2.8,13.3,5.4,37.4,7.3,55
c0.6,5.8,1.2,10.8,1.6,14.3c1.8,14.6,8.1,40.6,10.9,49.9c1,3.4,1.9,6.2,2.5,8.3c-0.3,0-0.6,0-0.9,0c-1.8,0-4.5,0.3-8,0.7
c-3.4,0.4-7.3,0.8-10.9,1.1c-1.9,0.1-7.1,0.2-13.7,0.2c-20,0.2-53.5,0.5-66.6,3.4c-12.2,2.7-27,7.2-34.9,9.7
c-0.6,0.2-1.1,0.3-1.6,0.5c-0.4-2.2-1.2-4.3-2.6-6.5c0,0,0-0.1,0-0.1c1-4.3-0.3-7.5-3.9-9.3c-1-0.5-1.9-0.9-2.6-1.2
c-0.3-3-2.2-5.4-3.4-6.7c-1.1-1.2-4-4-7.4-4c-0.1,0-0.3,0-0.4,0c-3.9,0.3-6.4,2.1-7.5,5.4c-0.8,2.4-4.2,10.8-5.9,12.9l-0.3,0.4
c-3.1,3.9-3.3,5.1-3.7,11.4c-0.1,1.6-0.2,5.6-0.3,11.7c-0.4,18.4-1.3,56.7-4,96.5c-3.4,51.6-6.9,88-8.5,99.9
c-0.2,1.5-0.4,3-0.6,4.3c-1.2,8.7-1.9,14-0.4,28.7l0,0l0,0c0.1,0.7,7.6,65.4,8.6,74c0.6,4.9,2.2,15.7,3.8,26.1
c1.3,8.5,2.5,16.5,3.1,21c0.6,4.5,1.8,10.8,3.2,18.1c1.9,9.6,4,20.6,5.2,30.2c1.6,12.6,2.6,39.4,3.4,57.2c0.2,6,0.4,11.3,0.6,14.5
c0.4,7.1,3,21.7,5.8,37.2c2.3,12.5,4.6,25.5,5.7,34.5c2.3,18.4,5.4,35.7,7.1,40.3c0.4,1.2,0.5,3.4,0.6,5.6c0.1,2.2,0.1,4.6,0.5,6.9
c0.9,4.7,2.6,9.4,2.7,9.6l0.2,0.8c-1.5,2.1-5.6,6.6-10.9,7.6c-3.6,0.7-15.2,1.3-30.6,1.3c-14.6,0-27.7-0.6-37-1.7
c-19.6-2.3-56.8-6.2-86.7-6.2c-6.1,0-11.6,0.2-16.5,0.5c-29.6,1.9-101.2,2.7-124.7,2.7c-2.3,0-4.2,0-5.8,0c-0.6,0-1.2,0-1.7,0
c-9.6,0-18.5,0.7-26.4,1.3c-5.9,0.5-11,0.9-15.1,0.9c-0.6,0-1.2,0-1.7,0c-2.6-0.1-6.1-0.4-10-0.7c-6.6-0.5-14.7-1.2-22.5-1.2
c-5.3,0-9.8,0.3-13.7,0.9c-13.3,2-39.2,5.3-52.3,5.3c-1.5,0-2.8,0-3.9-0.1c-2.9-0.3-5.7-0.3-8.1-0.4c-7.6-0.2-10.2-0.5-11.8-3.3
c-0.7-1.2-1.4-2.3-2-3.4c-3.5-5.8-6.3-10.5-4.8-17.6c2.2-10,6.5-34.9,9.1-58.9c0.8-7,1.8-14.9,2.8-23.4c2.3-18.6,4.9-39.6,5.7-55.6
c0.4-8.1,1.1-17.9,1.8-27.4c1.5-21.1,2.4-34.3,1.7-38.6c-0.9-5.5,0.1-15.1,1.2-21.7c0.5-2.8,1-7.6,1.7-13.7
c1.1-9.8,2.5-23.1,4.7-36.8c5.1-32.4,11-74.5,10.4-90.8c-0.6-16.9-6.3-80.7-9.7-117.3c-1.8-19.7-2.8-36.5-3.5-48.7
c-0.4-7.1-0.8-12.7-1.1-17c-0.5-5.5-1.6-13.2-2.9-21.4c-1.4-9.5-2.9-19.4-3.6-27.4c-1.5-17.7-4.5-25.9-10.3-28.2
c-1-0.4-2.2-0.6-3.4-0.6c-3.3,0-7.2,1.5-12,4.7c-0.1,0.1-0.4,0.2-0.6,0.3c-1.9,0.8-5.7,2.4-6.9,7.7c-0.8,3.5-1.2,9.6-1.3,11.5l0,0
c-0.3,0.1-1.9,0.6-4.5,0.6c-2.6,0-5.4-0.4-8.4-1.3c-2.3-0.7-4.6-1.4-7.1-2.2c-9.1-3-19.5-6.3-30.1-6.3c-0.4,0-0.8,0-1.3,0
c-0.8,0-1.6,0-2.3,0c-9.9,0-19.6-1.7-32.9-4c-2.2-0.4-4.4-0.8-6.8-1.2c-6.1-1-13-1.8-19.7-2.5c-7-0.7-17-1.8-21.3-3.1
c0.9-2.9,1.9-5.4,3.4-9c0.3-0.6,0.6-1.3,0.9-2.1c1.7-4,2.2-7.4,2.6-10.1c0.3-1.8,0.5-3.3,1-4.6l0.2-0.7c1.9-5.4,7-19.8,8-32.1
c2-24.9,5.8-46.4,10.8-62.1l0,0l0,0c0.1-0.4,10.9-35.5,20.7-48.7c10.9-14.5,27.9-34.5,41.3-46.5c13.8-12.3,20.4-17.5,29.8-22
c4.1-2,8.9-3.7,13.5-5.4c6.4-2.4,13-4.8,18.6-8c5.3-3,24.8-13.8,43.7-24.2c13.9-7.6,27-14.9,34.5-19.1c3.1-1.7,6-3.3,8.7-4.8
c17.7-9.8,23.9-13.3,26-16.2c1.2-1.8,1.7-3.4,2-4.5c0.1-0.2,0.1-0.5,0.2-0.6c0.5-0.3,1.2-0.5,2.1-0.8c2.1-0.6,4.9-1.5,7.8-4.4
c1.8-1.8,6.1-6.1,9-6.3C430.2,233.8,430.3,233.8,430.4,233.8 M430.4,228.8c-0.2,0-0.4,0-0.6,0c-4.5,0.2-9,4.5-12.2,7.8
s-6.2,2.8-9,4.5s-1.8,4-3.5,6.5s-15,9.5-33,19.5s-69,38-78.2,43.2s-21.8,8.5-31.8,13.2c-10,4.8-17,10.2-31,22.8s-31.5,33.2-42,47.2
s-21.5,50.2-21.5,50.2c-7.2,22.8-10,51-11,63.3s-6.5,27.2-8,31.5s-1,8.5-3.5,14.5s-3.9,9.1-5.2,14.4c-1.3,5.3,27.2,5.8,45.8,9
c17.5,3,28.5,5.2,40.5,5.2c0.8,0,1.6,0,2.5,0c0.4,0,0.8,0,1.1,0c12.6,0,25.3,5.3,35.9,8.3c4,1.2,7.3,1.5,9.8,1.5
c4.4,0,6.7-1.1,6.7-1.1c3.8-0.8,2.9-3.8,2.9-3.8s0.3-7.5,1.2-11.2c0.8-3.7,3.8-3.8,5.3-4.8c1.3-0.9,5.9-3.9,9.3-3.9
c0.6,0,1.1,0.1,1.5,0.3c3.3,1.3,5.8,8.7,7.2,24c1.3,15.3,5.5,37.3,6.5,48.8s1.8,34.7,4.7,65.7c2.8,31,9,99.5,9.7,117
c0.7,17.5-6.8,67.5-10.3,89.8c-3.5,22.3-5.2,43.5-6.3,50.5s-2.2,17.2-1.2,23.3c1,6.2-2.3,42.2-3.5,65c-1.2,22.8-6,55.8-8.5,78.7
s-6.7,47.7-9,58.3c-2.3,10.7,3.2,17.2,7.3,24.5c4.2,7.3,12.5,5.2,23.8,6.2c1.2,0.1,2.7,0.2,4.3,0.2c13.6,0,39.9-3.4,53-5.3
c4-0.6,8.4-0.8,13-0.8c12.1,0,25,1.6,32.4,1.8c0.6,0,1.2,0,1.9,0c9.9,0,24.7-2.2,41.5-2.2c0.6,0,1.1,0,1.7,0c1.5,0,3.5,0,5.8,0
c25.7,0,96.1-0.9,125-2.7c5-0.3,10.5-0.5,16.2-0.5c30,0,67.1,3.9,86.1,6.1c10.7,1.3,24.8,1.7,37.6,1.7c14.4,0,27.2-0.6,31.5-1.4
c8.2-1.5,13.8-8.8,15-11c1.2-2.2-0.5-4-0.5-4s-1.7-4.5-2.5-8.8c-0.8-4.3,0-9.8-1.3-13.3c-1.3-3.5-4.3-19.2-6.8-39.2
s-10.8-58.8-11.5-71.3c-0.7-12.5-1.8-54.8-4-72c-2.2-17.2-7.2-38.2-8.5-48.3c-1.3-10.2-5.8-38.3-6.8-47c-1-8.7-8.6-74-8.6-74
c-1.7-16.3-0.5-20.2,1-31.9c1.5-11.7,5-47.5,8.5-100.2c3.5-52.7,4-102.1,4.3-108.2c0.4-6.1,0.4-5.9,2.9-9c2.5-3.1,6.2-13,6.8-14.5
s1.4-1.9,3.1-2c0,0,0.1,0,0.1,0c1.8,0,6,3.9,5.8,6.9c-0.2,3,1.9,2.6,5.2,4.4c3.4,1.8-0.1,4.6,1.5,7c1.6,2.4,2.8,5.1,2.4,7.9
c-0.3,2.3,1.2,2.5,2.2,2.5c0.2,0,0.3,0,0.4,0c0.8,0,23-7.4,39.9-11.1c16.9-3.8,71.5-3,79.5-3.5c7.4-0.5,15.5-1.8,18.6-1.8
c0.3,0,0.5,0,0.7,0c2.1,0.2,4.9,2.1,6.2,2.1c0.1,0,0.3,0,0.4-0.1c1.1-0.5-0.1-3.2-0.1-3.2s-1.2-4.5-4-13.5s-9-34.8-10.8-49
s-5.2-51.8-9-69.8s-12.8-35.2-20-50s-29.2-36-41.5-45.5s-25.5-17-26.5-18s0.2-2-2.5-4s-28.8-10.8-38-14.5s-45.5-25-52-27.8
s-18.2-6-24.5-8.2s-13-8.2-19-11s-16-13-21-15.5s-9.8-2.2-11.8-3.8s-7-6.2-9.2-6.2s-15.5,3.8-26.8,5.5s-37.2,3-69.2,3
s-63.8-5.2-77.2-8.8C450.3,231.7,435.5,228.8,430.4,228.8L430.4,228.8z"/>
</g>
<path class="st1" d="M420.4,247c0,0,47,14,107.7,14s78.7-2,129.7-13"/>
<path class="st0" d="M157.3,546c0,0,115.3,23.3,131.3,24.3"/>
<path class="st0" d="M297.4,564.8c0,0-26.9-16.5-54.3-37"/>
<path class="st0" d="M298.4,564.9c0,0-18.5-11.4-38.6-48.7"/>
<path class="st2" d="M298.4,564.9c0,0-36.9-69.9-32.2-120.3c4.7-50.3,3.2-56.7-12.8-113.3"/>
<path class="st2" d="M813.3,328.8c-22.9,71.7-13.8,55.8-19.8,127.8S764.9,559,764.9,559"/>
<path class="st0" d="M770.4,562.5c0,0,21.8-22.3,43.6-47.5"/>
<path class="st0" d="M770.4,562.5c0,0,15.7-18.3,49.2-31"/>
<path class="st0" d="M908.1,551.3c0,0-76.8-0.2-129.2,20.2"/>
<path class="st2" d="M294.1,1180.3c0,0,3.3,12,24.3,12.7c21,0.7,69.7-8,93.3-8s71.3,5,136.3,4.7s84.3-6.7,122.7-5.3
c38.3,1.3,73.7,9.3,88.7,6.7c15-2.7,22.8-7.7,22.8-7.7"/>
<path class="st0" d="M763.8,559.2c-1-1.6,2.8-29.4-4.5-64"/>
<path class="st0" d="M301.6,565.3c0,0-5.8-11.3-0.2-29.3c2.4-7.5,5.6-17.1,8.5-25.8"/>
<path class="st1" d="M284.4,615.3"/>
</svg>
</div>
<div className={a}>
<div
onClick={this.handleClick.bind(this)}
data-icon-id={1}
className={this.props.optionA.name}>
</div>
<p className={this.props.optionA.name}>{this.props.optionA.option_name}</p>
</div>
<div className={b}>
<div
onClick={this.handleClick.bind(this)}
data-icon-id={2}
className={this.props.optionB.name}>
</div>
<p className={this.props.optionB.name}>{this.props.optionB.option_name}</p>
</div>
<div className={c}>
<div
onClick={this.handleClick.bind(this)}
data-icon-id={3}
className={this.props.optionC.name}>
</div>
<p className={this.props.optionC.name}>{this.props.optionC.option_name}</p>
</div>
</div>
);
}
}
when this component gets rendered I get the following error:
invariant.js:44 Uncaught Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by IconsHolder.
at invariant (invariant.js:44)
at assertValidProps (ReactDOMComponent.js:151)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:446)
at Object.mountComponent (ReactReconciler.js:46)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:516)
at Object.mountComponent (ReactReconciler.js:46)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)
I have already made some changes on the attributes (like removing : and capitalising the first letter after )

Resources