<div class="" style="display:none">
<svg id="icon-smile" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 122.88 122.88">
<g fill-rule="evenodd" clip-rule="evenodd">
<path fill="currentColor" d="M45.54 2.11c32.77-8.78 66.45 10.67 75.23 43.43 8.78 32.77-10.67 66.45-43.43 75.23-32.77 8.78-66.45-10.67-75.23-43.43-8.78-32.77 10.66-66.45 43.43-75.23z"/>
<path fill="#141518" d="M45.78 31.71c4.3 0 7.78 6.6 7.78 14.75s-3.48 14.75-7.78 14.75S38 54.61 38 46.46c0-8.14 3.48-14.75 7.78-14.75zM22.43 80.59c.42-7.93 4.53-11.46 11.83-11.76l-5.96 5.93c16.69 21.63 51.01 21.16 65.78-.04l-5.47-5.44c7.3.3 11.4 3.84 11.83 11.76l-3.96-3.93c-16.54 28.07-51.56 29.07-70.7.15l-3.35 3.33zM77.1 31.71c4.3 0 7.78 6.6 7.78 14.75s-3.49 14.75-7.78 14.75-7.78-6.6-7.78-14.75c-.01-8.14 3.48-14.75 7.78-14.75z"/>
</g>
</svg>
</div>
<svg style="color: #CBB16E" width="100" height="100"><use xlink:href="#icon-smile" ></svg>
<svg style="color: #5B6770" width="100" height="100"><use xlink:href="#icon-smile" ></svg>
<svg style="color: #B16237" width="100" height="100"><use xlink:href="#icon-smile" ></svg>
Автосборка svg в combine sprite
Устанавливаем утилиты:
sudo npm i -g svgo svg-sprite-generator
Закидываем все svg в папку icons и выполняем команду:
svgo -f icons -o icons/out && svg-sprite-generate -d icons/out -o icons/out/sprite.svg
Получаем файл sprite.svg