Drag & Drop SVG Shapes Using D3 and AngularJS - angularjs
experimenting with AngularJS and D3 I'm trying to figure out on how to drag & drop svg elements from one svg to another one. Do you have any hints or experiences on how to do that?
Regards,
Andi
An Example would be to drag a circle from the right square and drop it onto the left square. The examples source is on github.
I hve done this with javaxcript. Maybe you can use some of its features. It works in IE and Chrome. FF is in the process of implimenting the needed intersection list method.
This example below shows dragging elements and dropping them into the various viewPorts(SVG roots).
Uses matrix transforms. It can seamlessly drag/drop elements that have previously been transformed and reside it different viewPorts. It employs getScreenCTM, createSVGTransform and binds the element to a transform List
Each viewport target is determined by using an SVGRect object and employes checkIntersection.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drag and Drop Into Viewports</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4> Drag and Drop Into Viewports</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
This example shows dragging elements and dropping them into the various viewPorts(SVG roots).
Uses matrix transforms. It can seamlessly drag/drop elements that have previously been transformed and reside it different viewPorts. It employs <b>getScreenCTM</b>, <b>createSVGTransform</b> and binds the element to a <b>transform List</b>
Each viewport target is determined by using an <b>SVGRect</b> object and employes <b>checkIntersection</b>.
</div>
<table>
<tr><td align=left>
<b>Scenerio:</b><br />
A The parent SVG root(mySVG) with viewBox=0 0 400 400.<br />
It contains the the draggable red circles. The white circles are inside the rect viewPorts<br />
1.) The blue rect element is contained in, and fills, its own svg root<br />
3.) The maroon rect element is contained in, and fills, its own svg root.<br />
4.) The orange rect element is contained in, and fills, its own svg root<br /> with viewPort=10 10 50 50.<br />
<br />
(View the SVG Source to verify where the circles are being dropped.)
</td>
<td align=left>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'>
<svg id="mySVG" width="100%" height="100%" viewBox="0 0 400 400">
<svg overflow="visible" width="100" height="100" x="20" y="60" pointer-events="all" id="blueSVG" >
<rect id="blueRect" x="0" y="0" width="100" height="100" fill="blue" stroke="black" stroke-width="2" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="white" cx="20" cy="20" r="15" />
</svg>
<svg overflow="visible" width="100" height="100" x="280" y="60" pointer-events="all" id="maroonSVG" >
<rect id="maroonRect" x="0" y="0" width="100" height="100" fill="maroon" stroke="black" stroke-width="2" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="white" cx="20" cy="20" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="white" cx="60" cy="20" r="15" />
</svg>
<svg overflow="visible" width="100" height="100" x="120" y="200" viewBox="10 10 50 50" pointer-events="all" id="orangeSVG" >
<rect id="orangeRect" x="0" y="0" width="100" height="100" fill="orange" stroke="black" stroke-width="2" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="white" cx="20" cy="20" r="15" />
</svg>
<svg id="WrapperSVG" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="40" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="80" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="120" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="160" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="200" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="240" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="280" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="320" cy="30" r="15" />
<circle onmousedown=startDrag(evt) onmousemove=drag(evt) onmouseup=endDrag(evt) fill="red" cx="360" cy="30" r="15" />
</svg>
</div>
</td>
</tr></table>
<br />SVG Source:<br />
<textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:400px'></textarea>
<br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<script id=myScript>
var TransformRequestObj
var TransList
var DragTarget=null;
var Dragging = false;
var OffsetX = 0;
var OffsetY = 0;
//---mouse down over element---
function startDrag(evt)
{
if(!Dragging) //---prevents dragging conflicts on other draggable elements---
{
DragTarget = evt.target;
//---bring this viewPort to top---
if(DragTarget.ownerSVGElement!=mySVG)
mySVG.appendChild(DragTarget.ownerSVGElement)
//---bring this element to top---
DragTarget.ownerSVGElement.appendChild(DragTarget)
//---reference point to its respective viewport--
var pnt = DragTarget.ownerSVGElement.createSVGPoint();
pnt.x = evt.clientX;
pnt.y = evt.clientY;
//---elements transformed and/or in different(svg) viewports---
var sCTM = DragTarget.getScreenCTM();
var Pnt = pnt.matrixTransform(sCTM.inverse());
TransformRequestObj = DragTarget.ownerSVGElement.createSVGTransform()
//---attach new or existing transform to element, init its transform list---
var myTransListAnim=DragTarget.transform
TransList=myTransListAnim.baseVal
OffsetX = Pnt.x
OffsetY = Pnt.y
Dragging=true;
}
}
//---mouse move---
function drag(evt)
{
if(Dragging)
{
var pnt = DragTarget.ownerSVGElement.createSVGPoint();
pnt.x = evt.clientX;
pnt.y = evt.clientY;
//---elements in different(svg) viewports, and/or transformed ---
var sCTM = DragTarget.getScreenCTM();
var Pnt = pnt.matrixTransform(sCTM.inverse());
Pnt.x -= OffsetX;
Pnt.y -= OffsetY;
TransformRequestObj.setTranslate(Pnt.x,Pnt.y)
TransList.appendItem(TransformRequestObj)
TransList.consolidate()
}
}
var ViewPortTarget
//--mouse up---
function endDrag(evt)
{
Dragging = false;
//--which viewPort is the element over ?---
var isBlueSVG = mySVG.checkIntersection(DragTarget, BlueObjRect)
var isOrangeSVG = mySVG.checkIntersection(DragTarget, OrangeObjRect)
var isMaroonSVG = mySVG.checkIntersection(DragTarget, MaroonObjRect)
if(isBlueSVG)
ViewPortTarget=blueSVG
else if(isOrangeSVG)
ViewPortTarget=orangeSVG
else if(isMaroonSVG)
ViewPortTarget=maroonSVG
else
ViewPortTarget=mySVG
ViewPortTarget.appendChild(DragTarget)
var pnt = DragTarget.ownerSVGElement.createSVGPoint();
pnt.x = evt.clientX;
pnt.y = evt.clientY;
//---elements in different(svg) viewports, and/or transformed ---
var sCTM = DragTarget.getScreenCTM();
var Pnt = pnt.matrixTransform(sCTM.inverse());
Pnt.x -= OffsetX;
Pnt.y -= OffsetY;
TransformRequestObj.setTranslate(Pnt.x,Pnt.y)
TransList.appendItem(TransformRequestObj)
TransList.consolidate()
svgSourceValue.value=svgDiv.innerHTML
}
//---build the viewPort intersect rect obj---
var BlueObjRect
var OrangeObjRect
var MaroonObjRect
function setViewportRect()
{
WrapperSVG.appendChild(blueSVG)
var bb=WrapperSVG.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
BlueObjRect=mySVG.createSVGRect()
BlueObjRect.x=bbx
BlueObjRect.y=bby
BlueObjRect.width=bbw
BlueObjRect.height=bbh
mySVG.insertBefore(blueSVG,WrapperSVG)
WrapperSVG.appendChild(orangeSVG)
var bb=WrapperSVG.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
OrangeObjRect=mySVG.createSVGRect()
OrangeObjRect.x=bbx
OrangeObjRect.y=bby
OrangeObjRect.width=bbw
OrangeObjRect.height=bbh
mySVG.insertBefore(orangeSVG,WrapperSVG)
WrapperSVG.appendChild(maroonSVG)
var bb=WrapperSVG.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
MaroonObjRect=mySVG.createSVGRect()
MaroonObjRect.x=bbx
MaroonObjRect.y=bby
MaroonObjRect.width=bbw
MaroonObjRect.height=bbh
mySVG.appendChild(maroonSVG)
mySVG.insertBefore(maroonSVG,WrapperSVG)
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
setViewportRect()
svgSourceValue.value=svgDiv.innerHTML
jsValue.value=myScript.text
}
</script>
</body>
</html>
Related
In blazor how can I do a for loop with svg objects?
As an example, on Blazor, I'm trying to do a loop to rotate a rectangle like a hand of a watch. The basic test example is like this:
<svg width="400" height="110">
#for (int i = 1; i < 13; i++)
{
<rect id="rect+#i" width="30" height="60" style="fill:red;stroke-width:3;stroke:rgb(0,0,0)" transform="rotate(#i*30)" />
}
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" transform="rotate(360)" />
</svg>
Whilst you specified the size of the rectangle you did not give it a position.
<svg width="110" height="110" viewBox="-110 -110 220 220">
#for (int i = 0; i < 12; i++)
{
<rect id="rect+#i" x="-15" y="50" width="30" height="60" transform="rotate(#(i*30) 0 0)" />
}
</svg>
Trying to make a for loop to draw an SVG in React
Trying to make a for loop to draw an SVG in react...
I want to draw 4 circle in Svg by using loop
const circlex = 40;
const circley = 40;
<svg>
<foreignObject
className={classes.threeDotIcon}
y="30" width="100" height="100"
>
{
[1, 2, 3, 4].map((data, index) => {
<svg width="100" height="100">
<circle cx={circlex + 1} cy={circley + 1} r="30" stroke="black" fill="#caced5" />
</svg>
})
}
</foreignObject>
</svg>
I need When I Add Svg the circles auto draw in Svg....
Solved.....
<svg>
{
userInRoomLimit.map((data, i) => {
return (
<foreignObject
className={classes.threeDotIcon}
y='30'
x={i * 70}
width="100" height="100"
>
<svg width="100" height="100">
<circle cx='40' cy='40' r="30" stroke="black" fill="#caced5" />
</svg>
</foreignObject>
)
})
}
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>
);
React inline SVG
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.