I have SVG icon that shows in DOM but invisible on page. I am using the SVG sprite technique to display SVG icon by using the use element but can’t understand why it’s not showing on the screen.
It’s worth mentioning that the xlink:href technique is deprected see MDN so try using img tag instead.
for your problem, can you post a screenshot for your project directories? maybe the href isn’t properly written
If the xlink:href technique is departed then how can it works for other SVG icons that I have on my page. My folder structure goes like this with sprite file inside the img folder. Then which tag can I use to load SVG icon from sprite file.
some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.
that’s why you still can use it but in modern web standards its not the best practice. Anyway, check the icon class name after the # if its right or not
I tried using the href and the img tag but still no luck. The icon name is correct .What’s so strange that it works for some svg icons and not others. Here is screen shot of the svg icons.
i tried it, downloaded few svg icons and converted them to sprite.svg using this site SVG Sprite Generator then used it like that img/sprite.svg#name-of-the-icon-file without any prefexies.
I think it’s just the id name that is the problem. If I rename it to for example icon-bookmark it shows up (after removing the visibility hidden on the parent).
I’m not sure what the rules are for the id naming and I didn’t really bother looking for it. But I imagine it might be something stricter than normal HTML5 elements.
I didn’t see the other icon-bookmark I just saw icon-bookmarks, so I guess that isn’t it.
BTW, you should gitignore the node_modules folder.
It is serving from dist and the build process does not seem to add/update all the files. So I’m not sure if you manually moved some of the folders and files into the dist folder or what, but the files in src and dist do not match.
So the sprite.svg in dist (and whatever else) is not the same as in src. If you just copy over the files it should work (but that’s not really a build process).