Usually, I use SVG icon components when working with Vue or React, but sometimes when I build classic websites (eg. using PHP for rendering) I place all icons in <symbol> tags in hidden <svg> with viewBox property and use currentColor where necessary.
In the end, I have something like this:
<svgstyle="display: none"xmlns="..."otherReqiuredAttrs="..."><symbolid="icon-user"veiwBox="0 0 20 20"fill="currentColor"storke="none"><!-- content of SVG from graphic editor --><pathd="..."fill="none"stroke="currentColor"/></symbol></svg><!-- Use an icon --><buttonclass="button"><svgclass="icon"><usexlink:href="#icon-user"/></svg>
Login
</button>
Usually, I use SVG icon components when working with Vue or React, but sometimes when I build classic websites (eg. using PHP for rendering) I place all icons in
<symbol>
tags in hidden<svg>
withviewBox
property and usecurrentColor
where necessary.In the end, I have something like this:
For
.icon
you can use something like this