Demo here.
Open icon-file, copy code to html. Notice : You can use the regular color attribute.
<div style="color: #112E49; stroke-width: 1.1;">
<svg xmlns="https://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="currentColor">
<circle cx="32" cy="32" r="24"/><line x1="20" y1="32" x2="44" y2="32"/><line x1="32" y1="20" x2="32" y2="44"/></svg>
</div>
Get your favorite inline svg loader like inline-svg
<inline-svg src="<path>/<Icon>.svg" stroke="black" stroke-width="1"/>
Download fusion-coins.svg
/ fusion-interface.svg
/ fusion-web3.svg
to your project.
Use the spritesheet files, that contains the icons you need, and icons name after the #
<svg style="color: #112E49; stroke-width: 1.1; aspect-ratio: 1/1;">
<use xlink:href="sprites/fusion-interface.svg#alarm"></use>
</svg>
}
Note, there is a genSprites.js
written in Node JS, to generate these spritesheets from the icons folder. You will not need this file inside your project.
There is also a Figma file for our designer friends.
See LICENSE