'Why can't I import an SVG by using <use> without using the id?

Whenever I import an SVG with <use> element it won't work unless I specify the id of that SVG even though it's the only SVG in the document!

This will work after specifying an id="shap" in the SVG file:

<svg className="home__social-icon-leetcode">
    <use xlinkHref="svg/shap.svg#shap"></use>
</svg>

This won't work even though the SVG file doesn't contain more than one SVG:

<svg className="home__social-icon-leetcode">
    <use xlinkHref="svg/shap.svg"></use>
</svg>
htmlsvg


Solution 1:[1]

This is an external source usage of SVG, so you must provide the bit you're looking for (The id in the svg file) in the external svg source. Refer to this link.

Solution 2:[2]

use xlinkHref has been deprecated, use use href

Anyways, both of them has been design to use with a inline svg (inside your HTML) so you can call the same SVG multiple times without having to repeat the SVG code, that's why you need to call their ID.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Wahalez
Solution 2

Related Questions