SVG icons breaking icon-sprite.svg

[nowlena]

Expected behavior

When generating icon-sprite.svg via grunt svgstore the sprite should load properly.

Actual behavior

The svg.icons-svg-sprite src gets set to (Unknown) instead of the SVG sprite as intended.

The reason: icon-sprite.svg cannot be loaded due to Namespace prefix sketch for type on path is not defined

I was able to fix the issue by stripping down (ie. removing the "mask" and " sketch:type" attributes) the following SVGs:

• instagram.svg
• stumbleupon.svg

Steps to reproduce behavior

Nothing specific, when running the Theme this issue occurred both locally and when bundling then applying to a storefront.

[xpothemes]

same issue

[karen-white]

@nowlena @xpothemes I'm having some trouble reproducing this. Could you give me a little more info on the theme version you're using and the exact steps you took when you saw the issue? Thanks!

[nowlena]

Note the source attr:

Some additional information: Theme Version: 2.0.0 OS: WIndows 10 Pro Browsers: Chrome 66, Firefox 60, Edge 42

Steps taken to reproduce error:

• clone theme from BC repo
• npm install
• grunt svgstore
• stencil init
• stencil start -n

[karen-white]

Thank you, @nowlena ! I'm seeing the issue now. I'll get a ticket in for this so we can address it.

[sungsation]

same issue

[lucisousa]

same issue here too

[techxlers]

Still facing the same issue. Any solution?

[junedkazi]

@techxlers the solution is in code review here https://github.com/bigcommerce/cornerstone/pull/1258. Hopefully it should be merged in a day or 2.

[techxlers]

@junedkazi Thanks. BTW I am able to solve the issue by removing following "mask", "sketch:type", "sketch:name", "xlink". Icons are working now :)

[PeteyRev]

Same issue here. Tried implementing fix in #1258 but no luck

[techxlers]

@PeteyRev Did you try my fix?

[PeteyRev]

@techxlers I did except for the "remove xlink" - Where are you removing that, on the icon files themselves, or when you are adding to html:

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
</svg>

[techxlers]

@PeteyRev Go to assets/img/icon-sprite.svg file. Open that file in any editor and then find the words which I have mentioned in my previous comment and then simply delete those tags.

[PeteyRev]

@techxlers perfect, thanks! Had to delete the mask element from stumbleupon.svg and its working now

[nowlena]

For reference, my initial post here explains how to fix the issue:

I was able to fix the issue by stripping down (ie. removing the "mask" and " sketch:type" attributes) the following SVGs:

• instagram.svg
• stumbleupon.svg

[PeteyRev]

@nowlena thanks, I think I may have overlooked that initially. Not enough coffee today

[junedkazi]

Is this still an issue on the latest cornerstone ?

[PeteyRev]

@junedkazi this was an issue for me on version 2.1, so I think so

[aisflat439]

This is still an issue in 2.2

This still works on 2.2

I was able to fix the issue by stripping down (ie. removing the "mask" and " sketch:type" attributes) the following SVGs:

instagram.svg
stumbleupon.svg

[Bobspadger]

I am having this same issue on the latest version - is there any update on this?