Replymessage unavailable
Вы в секции defs объявляете все ваши уникальные символы без заливки вообще и давая им соответствующие айдишники например dashboard, потом уже за предевали defs вы формируете соответствующие группы давая им соответствующие айдишники. Например <g id="white-dashboard"></g> внутрь которого помещаете <use xlink:href="#dashboard" x="" y="" width="" height="" /> координаты расположения x, y на вьюпорте и размеры конечно же нужно заполнить соответствующими символу значениями. И главное теперь вы можете добавить атрибут fill и указать нужный цвет заливки символа <use xlink:href="#dashboard" x="" y="" width="" height="" fill="#ffffff"/>. И создаете для каждой иконки и каждой цветовой версии нужной иконки соответствующую группу.
В defs вы так же добавляете блок стилей которым делаете по умолчанию все группы display: none, чтоб отображать только ту которая указывается с помощью хеша в адересе свг файла.
<style>
g {
display: none;
}
g:target {
display: inline;
}
</style>
Всё теперь вы указываете в стилях сайта background: url(https://shoto.tam/icons.svg#black-dashboard) no-repeat;, а для ховер стилей указываете background: url(https://shoto.tam/icons.svg#white-dashboard) no-repeate;