# VuePress Tutorial 12 - Highlight SVGs on Hover

By: J the Code Monkey

•Posted: Sep 8, 2022 •Updated: Jul 17, 2024

# What We're Doing

We're now ready to add a highlight effect when hovering over the SVG (opens new window) icons. The method we'll be using doesn't require a lot of styling, but it does require us to edit the fill attribute of the SVG (opens new window) icons.

We'll demonstrate how to edit the fill attribute by manually editing the files as well as using a Command-line Interface (CLI) command provided by vuepress-plugin-svg-icons (opens new window) which will automate the process and optimize the files.

Make sure you start the local development server which should be running at http://localhost:8080/ (opens new window) to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.

When adding the styling updates be sure to add each block of code below one at a time to your project then view the changes in the browser to get a better understanding of what each block is responsible for.

You can view all of the code in this tutorial by going to the tutorial-12 branch of the code-monkeys-blog-tutorials (opens new window) repository.

Now let's begin by manually editing one of the icon files.

# Manual Editing

When we downloaded the icons from iconfont (opens new window) we downloaded them with a fill attribute which will override the color we set for the hover effect.

To fix this issue we can manually remove the fill attribute from each icon file.

# Icon Example

We'll use the GitHub.svg file as an example:

After removing fill="e6e6e6", the file will look like this:

SVG File Formatting

The files above have been formatted to make them easier to read for this post, but the contents in your file may all be on one line. If this is the case, just scroll until you find the fill attribute or search for fill in the file to be able to easily find and remove it.

# Icon Styles

Now that we have removed the fill attribute from the file, we can add the styling to highlight the icon when hovering over it.

Here's what the Footer.vue file looks like after adding the hover effect:

svg:hover applies the hover pseudo-class to the svg selector which will apply the styles defined inside of it when the user hovers their pointer over the svg tag.
fill: $accentColor changes the fill of the svg tag to be the accent color.

Notice the icon fill is now set to be the accent color even if you're not hovering over the icon.

This is because we haven't set a fill attribute value for when the user isn't hovering over the icon, so it falls back to the value set in svg:hover.

To fix this issue we'll add the following styling to the Footer.vue file:

svg is the selector used to target the icon.
fill: $textColor sets the fill of the svg to be the text color when the user isn't hovering over the icon.

The fill should now be the same as the text color when you're not hovering over the icon, and it should get set to be the accent color when you hover over the icon.

To set the hover effect for the other icons, you will need to remove the fill attribute from the other icon files.

If you have questions about the CSS discussed above, then check out these resources:

You can also check out this CSS-Tricks post (opens new window) if you're interested in learning about other ways to change the fill on hover.

Instead of manually editing each file, we can use the CLI command provided by vuepress-plugin-svg-icons (opens new window) to automate the process.

# Automated Editing

The CLI command provided by vuepress-plugin-svg-icons (opens new window) optimizes SVG (opens new window) files by removing a lot of redundant and useless information including the fill attribute. The plugin does this by integrating SVGO (opens new window) which stands for Scalable Vector Graphic Optimizer and is a Node.js (opens new window) based tool for optimizing SVG (opens new window) files.

# CLI Command

Here's the CLI command you need to run vuepress svgo [docsDir] where [docsDir] is the docs directory for your project which in our case is docs.

You can add the CLI command to the scripts object in the package.json file:

Then you can run the script using:

After running the script, the SVG (opens new window) files will be optimized which includes removing the fill attribute from the files.

The hover effect should now be applied to each icon assuming you added the styling from the section above.

If you have any questions or want to learn more about the plugin, then check out the guide (opens new window).

You can also check out SVGO (opens new window) if you want to learn more about the optimization tool including CLI usage, configuration, API usage, etc.

# Optimized Icon Example

Here's the contents of the optimized GitHub.svg file:

SVG File Formatting

Just like the previous examples the file is formatted to make it easier to read for this post, but the contents in your file may all be on one line.

If you compare the optimized file with the original file above, you'll notice a lot of unnecessary information was removed including the fill attribute without affecting the rendering of the icons.

# Next Steps

In the next tutorial we'll be styling the navbar by updating the background color, height, border, etc.