How to Create SVG Font Icon Web Component

Photo by Markus Winkler on Unsplash

If you ever worked with SVG icons in your web application you must understand how hard it is to work with icons. There is a constant need to resize and color them as well as animate them which is not easy when you have the files. For those and more reasons, SVG Font Icon in a Web Component solves almost everything.

Why SVG Font Icons?

There are obvious pros and cons when using SVG font icons versus using SVG inline so it may not suit you if you do very complex and specific things but SVG as fonts should cover most basic web application needs.

Props:

• Easier to use: It is as simple as adding a class to an inline tag or setting a pseudo-element with a specific icon content.
• Easier to control: With SVG Font you control SVG like you would control text with CSS color and font-size properties for example.
• Performance: Font files are cached by the browser and normally the font icon files are smaller than the SVG files. This also means you only need to request a single file to load all icons.
• Basic animations: Any text or inline element animation you can do applies to SVG fonts. You can animate the color, size, transform it, etc.
• Browser support: If you still need to support IE and old Android browsers SVG fonts are your only options as SVGs are not supported in those.

Cons:

• Sharpness: Fonts are anti-aliased which means that they may not appear as sharp as SVGs. However, that’s not normally something people complain about any font, so you should be fine.
• Multi-color support: Like fonts, they can only be one color so if your icons have different parts of different colors, this is a problem. This can be fixed by composing icons into one and assigning colors to each but it's more work.
• Complex animations: Obviously if you are intending to, for example, animate individual parts of the icons this is not possible for Font Icons. They can only be animated as a whole and basic stuff only.
• Accessibility: SVGs are more accessible since they have accessible tags you can use inside to help screen-readers. This can be overcome with some special attributes. If…