Inline SVG icons in VueJS

This article will learn to create an icon component with the inline SVG code. The benefits of this approach are CSS customizability and development simplicity.

I used Love, Death + Robots logo icons as a sample. Hopefully, I will not get any copyright claims.

Hello there 👋

Icons topic sounds interesting to you? If yes, I may assume that you are familiar with the situation when managing more than ten icons.

And then you have a choice: Icon font or SVG icon? Each method has its cons and pros. Learn more about it here and here.

If you decided to use SVG icons instead of font, this article is just for you! The described solution is also suitable for any popular frontend network like React, Angular or Svelte.

There are several ways to manage SVG icons:

1. Store each icon as an external file. It’s a very straightforward method. Each icon will require a new HTTP request, and icons will not load at once. Also, each color variation will require a new file.
2. Create a sprite sheet where each icon will have its position. It solves multiple HTTP requests problems, but still, icons will not be customizable. Also, that could be a bit technically difficult, and you will need to use external services
3. Use inline icons. This solution kills two birds with one shot. There is no need to make any HTTP requests, and you will be able to customize icon properties with CSS only.

The main cons of inline icons are that they don’t provide flexibility to deploy (or change). A developer has to deploy for any change. Also, components can’t be cached as images and images are rendered slightly faster. It’s wise to use components for SVGs if you want to update them in runtime.

Now, if you are sure we will create an inline SVG Icon component with Vue CLI.

Now open (or start) any VUE Cli project, and let’s go 👟

Step 1: Create the component

First, think about file architecture. Each “.vue” file is an icon component. Into our “components” folder, let’s create a folder called “icon” to store all icons there.

File location: src/components/icons/Love.vue

Inside the “icons” folder, create an empty component file called “Love. vue”, our first SVG icon.

Here is how empty component code looks like:

Step 2: Get SVG Code from the design file

In this step, we will discuss the case of Figma design. If you have SVG code from another source, you can skip this step.

Just for demonstration how it could look like I created icons with Figma

Here are a few best practices for icon handoff files:

1. Layer names should be meaningful. Developers should name components in the same terms as designers do.
2. Icons should sit inside a square frame (container, usually 24x24px size)
3. A designer should lock SVG shape layers, so a developer will not click the wrong layer
4. Designers should outline each icon and union icon shape into one piece

1. Open link 👉 SVG Font Design Handoff
2. Click on the heart to select it. Look into the left panel and ensure you are on the correct layer

You have to be on a layer with a meaningful name, also pick attention to icon size. It Supposed to be square proportions like 24x24

Read layer names, and great designers give meaningful names. We will name our Vue files the same. Purple always means component. Designers should also use components for icons.

3. Right click => Copy as SVG

We don’t need to export and open any files. Copy, paste, and done!

Step 3: Add SVG Icon component

Great now we have SVG code into our clipboard. Let’s go back to our comfort zone into a favorite code editor.

1. Paste SVG code into the component we created at the first step

“Love.vue”:

We can easily read this code, which could be very useful if you will need to do some advanced SVG manipulation

2. Import icon component

Let’s agree on the name convention “icon + Name” to avoid any confusion in the future. So our imported component will become the name “iconLove”

App.vue:

If you are using NuxtJS, you don’t need to import components. Just type <IconLove /> and Nuxt will do the rest.

If we did everything right, we should see that SVG code is inline now with the inspect tool.

Hooray! SVG is inside the DOM tree, which means we can apply CSS rules to it: Sizes, colors, etc

Step 4: Style icons with CSS

Let’s start with size because SVG is not a font but a DOM element — so we have to define width and height. One of the best practices is to create a set of consistent sizes:

All other code parts were removed to show just the relevant parts

Then just add relevant class name to the icon component

Now let’s change icon color from black to red. Because SVG is not div or icon, it has a bit different properties. To change the icon fill color, we will use the fill property of path.

I remove all other code parts to show just the relevant details.

If everything is done right, the heart icon will be red:

Another way to do this is to pass fill as a property into SVG code. It could be helpful when you want to bind colors with data. But one color icon will limit us at CSS variables usage.

Conclusion: SVG icon font is fast and simple solution

Just in 15 minutes, we created an icon font component! Icon component is a scalable and flexible solution. In the same way, we could have thousands of icons.

Thank you for reading. Hopefully, that was useful!

👉 Live demo

👉 Cit Repository