worker11811 worker11811 - 22 days ago 4
React JSX Question

IcoMoon SVG not displaying

I created some icons with IcoMoon, but I changed the implementation slightly. I'm using these with React, so I didn't add the SVG definitions in the

<body>
tag of the HTML and then use
xLink
to include it into my page.

I split the icons up like this (as an example):

function playIcon() {
return (
<symbol id="icon-stop" viewBox="0 0 25 32">
<path className="path1" d="M24.704 16.544l-23.712 13.184q-0.416 0.224-0.704 0.064t-0.288-0.64v-26.304q0-0.448 0.288-0.64t0.704 0.064l23.712 13.184q0.416 0.224 0.416 0.544t-0.416 0.544z"></path>
</symbol>
);
}

function stopIcon() {
return (
<symbol id="icon-stop" viewBox="0 0 27 32">
<path className="path1" d="M27.424 3.424v25.152q0 0.448-0.32 0.8t-0.832 0.352h-25.12q-0.48 0-0.8-0.352t-0.352-0.8v-25.152q0-0.448 0.352-0.8t0.8-0.352h25.12q0.48 0 0.832 0.352t0.32 0.8z"></path>
</symbol>
);
}

function renderIcon(icon) {
switch (icon) {
case 'play':
return playIcon();
case 'stop':
return stopIcon();
}
}

const Icon = ({ icon }) => (
<svg className={`icon icon-${icon}`} style={{position: 'absolute'}, {width: 0}, {height: 0}, {overflow: 'hidden'}} version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<defs>
{renderIcon(icon)}
</defs>
</svg>
);

export default Icon;


And the corresponding SCSS (cleaned up the IcoMoon CSS a bit) is:

.icon {
display: inline-block;
fill: #000;
height: 1em;
stroke: #000;
stroke-width: 0;
width: 1em;
}

.icon-play {
width: .78515625em;
}

.icon-stop {
width: .857421875em;
}


When I use Chrome Dev Tools, I can see the SVG and the code looks okay, but it doesn't render anything. Just a blank little block.

I created a JSFiddle with the rendered SVG. Here it also renders as blank.

Answer

Seems like there is something wrong with the viewBox attributes. When I remove the defs & symbols and update the viewBox tags it seems to work. Here's the updated jsFiddle. Clean up those svgs and you should be fine.

<svg class="icon icon-play" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden;" width="24" height="30" viewBox="0 0 24 30">
   <g id="icon-play">
     <path d="M24.704 16.544l-23.712 13.184q-0.416 0.224-0.704 0.064t-0.288-0.64v-26.304q0-0.448 0.288-0.64t0.704 0.064l23.712 13.184q0.416 0.224 0.416 0.544t-0.416 0.544z"></path>
   </g>
</svg>
Comments