Apart from that, SVGs are written in XML code, meaning they store any text information as literal text rather than shapes. Such files can be significantly resized without losing any of their quality, which makes them ideal for logos and complex online graphics. What Are SVG IconsĪ Scalable Vector Graphics (SVG) icon is а web-friendly vector file format. For installing a SASS theme, go to the article on adding SASS themes to your Telerik UI project. To ensure that all icons are displayed correctly, use one of the supported SASS themes. The name will be used for both the content and its id for accessibility.As of the R release, the Telerik UI toolset supports rendering of SVG icons instead of the traditional Font icons. In the base, we’re making the width, height, iconColor, and name of the icon props so that it can be dynamically updated with props. You can use this base icon as is- the only thing you might need to update is the viewBox depending on the viewBox of your icons. We’ll create a base icon ( IconBase.vue) component that uses a slot. Here’s an example repo to get you going, where you can see the entire setup:

They can be made accessible dynamicallyįirst, we’ll create a folder for all of the icons, and name them in a standardized fashion for easy retrieval:.

They are inline, so no HTTP requests are necessary.You can use standard props and defaults to keep them to a typical size or alter them if you need to.Some of the advantages of this way of working is: There are many ways to create an SVG Icon System, but one method that takes advantage of Vue’s capabilities is to create editable inline icons as components.

User icon svg