<div id="container">
<div id="inner">
<div class="demo-img">
<div class="demo-overlay">
<svg
version="1.1"
id="svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="60px"
height="60px"
viewBox="0 0 612 612"
xml:space="preserve">
<path
d="M535.5,0h-153v76.5h114.75c21.133,0,38.25,17.136,38.25,38.25V229.5H612v-153C612,34.253,577.747,0,535.5,0z M0,76.5v153
h76.5V114.75c0-21.133,17.117-38.25,38.25-38.25H229.5V0h-153C34.253,0,0,34.253,0,76.5z M76.5,497.25V382.5H0v153
C0,577.747,34.253,612,76.5,612h153v-76.5H114.75C93.617,535.5,76.5,518.383,76.5,497.25z M535.5,497.25
c0,21.133-17.117,38.25-38.25,38.25H382.5V612h153c42.247,0,76.5-34.253,76.5-76.5v-153h-76.5V497.25z"
/>
</svg>
</div>
</div>
</div>
</div>
But then when my code compiles i get this error:
Error:
x JSX Namespace is disabled by default because react does not support it yet. You can specify jsc.transform.react.throwIfNamespace to false to override default behavior
,-[101:15]
101 | ,-> <svg
102 | | version="1.1"
103 | | id="svg"
104 | | xmlns="http://www.w3.org/2000/svg"
105 | | xmlns:xlink="http://www.w3.org/1999/xlink"
106 | | x="0px"
107 | | y="0px"
108 | | width="60px"
109 | | height="60px"
110 | | viewBox="0 0 612 612"
111 | | xml:space="preserve">
112 | | <path
113 | | d="M535.5,0h-153v76.5h114.75c21.133,0,38.25,17.136,38.25,38.25V229.5H612v-153C612,34.253,577.747,0,535.5,0z M0,76.5v153
114 | | h76.5V114.75c0-21.133,17.117-38.25,38.25-38.25H229.5V0h-153C34.253,0,0,34.253,0,76.5z M76.5,497.25V382.5H0v153
115 | | C0,577.747,34.253,612,76.5,612h153v-76.5H114.75C93.617,535.5,76.5,518.383,76.5,497.25z M535.5,497.25
116 | | c0,21.133-17.117,38.25-38.25,38.25H382.5V612h153c42.247,0,76.5-34.253,76.5-76.5v-153h-76.5V497.25z"
117 | | />
118 | -> </svg> ----
