Как я могу увидеть иконки внутри SVG-файла?

Question

Я хочу видеть все значки внутри файла SVG. Я пытался вставить его в файл HTML с тегом img, но вижу пустую страницу.

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-triangle-left" viewBox="0 0 20 20">
<title>triangle-left</title>
<path d="M14 5v10l-9-5 9-5z"></path>
</symbol>
<symbol id="icon-triangle-right" viewBox="0 0 20 20">
<title>triangle-right</title>
<path d="M15 10l-9 5v-10l9 5z"></path>
</symbol>
<symbol id="icon-check" viewBox="0 0 20 20">
<title>check</title>
<path d="M8.294 16.998c-0.435 0-0.847-0.203-1.111-0.553l-3.573-4.721c-0.465-0.613-0.344-1.486 0.27-1.951 0.615-0.467 1.488-0.344 1.953 0.27l2.351 3.104 5.911-9.492c0.407-0.652 1.267-0.852 1.921-0.445s0.854 1.266 0.446 1.92l-6.984 11.21c-0.242 0.391-0.661 0.635-1.12 0.656-0.022 0.002-0.042 0.002-0.064 0.002z"></path>
</symbol>
</defs>
</svg>

Answer 1

Код, который вы указали, содержит только <symbols>. Это используется для размещения определений SVG, которые могут быть повторно использованы в различных частях документа. Вы бы использовали их так:

<svg>
    <use xlink:href="#icon-triangle-left" />
</svg>

Тест в реальном времени: https://codepen.io/guilhermemuller/pen/NWqddGp