With SVG symbol icons, you have one copy of each SVG element, and you instantiate them anywhere with a reference. This would be repetitive, hard to read, and a pain to maintain. You don’t want to copy/paste all those coordinates every single time you need to use the same icon. The problem with inline SVGs is how verbose they are. Otherwise you can look at the final code on CodePen. If you want to understand the whole thought process, read on.
TL DR : this post goes in-depth into the how and why. Yet, there’s one thing that remains absolutely impossible with icon fonts: multicolor support. Now you can circumvent most of these issues, generally making icon fonts a safe choice. CSS Tricks wrote a list of areas where icon fonts fall short compared to native SVG elements: sharpness, positioning, or even failures because of cross-domain loading, browser-specific bugs, and ad-blockers. Icon fonts aren’t perfect though, which is why a growing number of people prefer using inline SVG images. No wonder projects like Font Awesome have been downloaded more than 15 million times on npm alone to this day. You can add transforms, effects, and decorations such as rotations, underlines, or shadows.
As a result, you have full control over size, color, and style. They benefit from the same CSS properties as text. With the explosion of web fonts, icon fonts have become the number one solution for displaying icons in your web projects.įonts are vectors, so you don’t have to worry about resolution. Long gone are the days of using images and CSS sprites to make icons for the web. By Sarah Dayan Creative Things by Kyle Adams Let’s make multi-colored icons with SVG symbols and CSS variables
0 kommentar(er)
