Как переиспользовать svg?

Question

[liltrill]

У меня много иконок svg, при наведении они должны менять цвет, так же есть иконки у которых поведение отличное от изменение цвета. Для этих целей мне отлично подходит способ упаковки всех иконок в шрифт.
Но в glup-svg-font(точное название не помню извините, так как суть не в этом оставлю пока так) написано что лучше так не делать, и вот возник вопрос, как лучше мне поступить?

P.S: Нашел на toster такой ответ, как считаете есть ли лучше?

html:

<svg class="priority__svg" width="40" height="40">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/icons-individual-tours.svg#ok"></use>
</svg>
<svg class="priority__svg" width="40" height="40">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/icons-individual-tours.svg#smile"></use>
</svg>

файл с иконками icons-individual-tours.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" fill="#000">
    <symbol viewBox="0 0 40 40" id="ok">
        <path d="M34.141 18.906h-5.222a28.538 28.538 0 0 0 1.283-5.4c.452-3.004-1.616-5.805-4.62-6.258a5.437 5.437 0 0 0-.816-.061c-.647 0-1.172.525-1.172 1.172 0 2.831-1.627 7.105-3.526 8.057a51.1687 51.1687 0 0 1-7.179 2.49H1.172c-.647 0-1.172.525-1.172 1.172v16.406c0 .647.525 1.172 1.172 1.172h3.515v1.172c0 .647.525 1.172 1.172 1.172H10.7c1.39-.002 2.648-.82 3.213-2.09l8.222 2.055c.093.023.188.035.284.035h7.031c1.942 0 3.516-1.574 3.516-3.516 0-.443-.084-.883-.247-1.295 1.528-.419 2.589-1.807 2.591-3.392a3.489 3.489 0 0 0-.248-1.3c4.344-2.591 1.688-3.966 2.594-8.075.418-1.895-1.574-3.514-3.515-3.516zM4.687 35.312H2.344V21.25h2.343v14.062zm7.188 1.172c-.001.647-.525 1.171-1.172 1.172H7.031V21.25h4.844v15.234zm22.334-8.203a.771.771 0 0 1-.068 0h-7.032c-.647.001-1.171.527-1.169 1.175.001.645.524 1.168 1.169 1.169H31.8c.647.001 1.171.527 1.169 1.175-.001.645-.524 1.168-1.169 1.169h-4.688c-.647.019-1.156.558-1.138 1.205.018.621.517 1.12 1.138 1.138h2.344c.647.001 1.171.527 1.169 1.175-.001.645-.524 1.168-1.169 1.169h-6.887l-8.347-2.087v-14.6a48.0595 48.0595 0 0 0 6.9-2.456c2.692-1.349 4.34-5.617 4.73-8.788 1.409.517 2.26 1.954 2.036 3.438a18.9356 18.9356 0 0 1-1.823 6.393c-.292.578-.06 1.283.518 1.574.164.083.346.126.53.126h7.032c.647.001 1.171.527 1.169 1.175-.001.645-.524 1.168-1.169 1.169h-7.032c-.646.045-1.132.606-1.087 1.251.041.581.502 1.044 1.083 1.087h7.032c.647-.019 1.187.491 1.205 1.138.019.647-.49 1.186-1.137 1.205zM25.903 4.878c.647.019 1.187-.49 1.206-1.137a.771.771 0 0 0 0-.068v-2.5c0-.647-.524-1.171-1.171-1.172-.647 0-1.172.525-1.172 1.172v2.5c-.019.646.49 1.186 1.137 1.205zm-9.909 1.054l1.657 1.658c.458.458 1.2.457 1.658 0 .458-.458.457-1.2-.001-1.658l-1.657-1.657c-.447-.468-1.189-.486-1.657-.039s-.486 1.189-.039 1.657c.012.013.026.026.039.039zm2.075 7.832c.019-.647-.49-1.187-1.137-1.206a.771.771 0 0 0-.068 0h-2.5c-.647 0-1.171.524-1.172 1.171 0 .647.525 1.172 1.172 1.172h2.5c.647.02 1.187-.49 1.205-1.137zm21.19 0c.019-.647-.49-1.187-1.137-1.206a.771.771 0 0 0-.068 0h-2.5c-.647 0-1.171.524-1.172 1.171 0 .647.525 1.172 1.172 1.172h2.5c.646.02 1.186-.49 1.205-1.137zM34.39 7.57l1.658-1.657c.458-.458.457-1.2 0-1.658-.458-.458-1.2-.457-1.658.001l-1.657 1.657c-.468.447-.486 1.189-.039 1.657s1.189.486 1.657.039c.013-.013.027-.026.039-.039z"/>
    </symbol>
    <symbol viewBox="0 0 40 40" id="smile">
        <path d="M20 0C8.954 0 0 8.954 0 20s8.954 20 20 20 20-8.954 20-20C39.987 8.96 31.04.013 20 0zm0 38.008c-9.946 0-18.008-8.062-18.008-18.008S10.054 1.992 20 1.992 38.008 10.054 38.008 20C37.996 29.941 29.941 37.996 20 38.008zm-3.867-20.365A4.9338 4.9338 0 0 0 12 15a5.37 5.37 0 0 0-4.405 2.643c-.213.332-.117.775.215.988.332.213.775.117.988-.216l.024-.039A3.4645 3.4645 0 0 1 12 17c1.153-.14 2.284.395 2.906 1.376.213.332.656.429.988.215a.7143.7143 0 0 0 .239-.948zm16.272 0A5.37 5.37 0 0 0 28 15a4.9338 4.9338 0 0 0-4.133 2.643c-.213.332-.117.775.215.988.332.213.775.117.988-.216l.024-.039A3.0108 3.0108 0 0 1 28 17c1.229-.142 2.44.383 3.178 1.376.213.332.656.429.988.216a.7158.7158 0 0 0 .239-.949zm-1.7 6.153a.6874.6874 0 0 0-1.011 0c-1.185 1.526-6.317 3.213-9.695 3.2-3.359-.008-8.345-1.941-9.7-3.2-.29-.25-.72-.25-1.01 0-.279.277-.28.728-.003 1.007l.003.003c6.042 5.591 15.37 5.591 21.412 0 .277-.277.279-.726.005-1.006l-.001-.004zm-6.785 6.859a.715.715 0 0 0-.878-.501c-.001 0-.002 0-.003.001-1.988.558-4.092.558-6.08 0-.38-.107-.775.115-.882.495-.107.38.115.775.495.882C17.7 31.85 18.847 33 20 33s2.305-1.15 3.426-1.464c.38-.106.602-.5.495-.88v-.001h-.001z"/>
    </symbol>
</svg>

Comments

[Moskus]

Совершенно непонятно, что именно вас не устраивает.

[liltrill]

Moskus, Меня на самом деле полностью устраивает найденный способ, но хотелось узнать нет ли лучшего способа

[Ankhena]

liltrill, это прекрасный способ для описанной вами задачи

[liltrill]

Ankhena, Да, у меня два вида svg иконок. И я могу без проблем создать два класса с разным поведением для них. Размеры svg иконок не меняются, только их цвет. И с легкостью подключать их через ссылки. А как можно подключить этот svg со всеми иконками чтобы он в кеш попал?

[Ankhena]

liltrill, внешним файлом и полифилом типа svg4everybody

[liltrill]

Ankhena, Спасибо)

Answer 1

[strelok011]

Нет нужды использовать ссылки на svg.
Есть случаи, когда стоит использовать именно шрифты для иконок, есть - когда svg спрайты.
Если иконки монохромные, их цвет должен меняться, скажем, при ховере, Вы хотите управлять их размером - самое простое это конечно шрифт. И самое надежное.
Если же иконки многоцветные - тогда svg, но тут много второстепенных проблем возникает в плане гибкости применения.
По поводу размещения svg-иконок в верстке - используйте стили.
Типа
.svg-icon {
display: inline-block;
widht;
height;
background-image: url(svg-icons-spite)
}
.svg-icon.home {
background-position:..
}

В первую очередь при выборе инструмента для решения своей проблемы стоит выяснить, на сколько он подходит и как много проблем будет при его использовании в проекте, сколько трудозатат будет стоит его поддержание и переиспользование.

Comments

[Ankhena]

не url(svg-icons-spite), а url(svg-icons-sprite.svg#id) и никаких bg position для выбора конкретной иконки.
И это если без доступности через CSS, а автору нужно управление через стили.

[strelok011]

Да, подзабыл. Спросонок ошибся. Без позишн всё доступно по id конечно.
Управлять непосредственно через стили - это имхо плохой вариант.