# VuePress Tutorial 12 - Highlight SVGs on Hover
# 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:
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:
hoverpseudo-class to the
svgselector which will apply the styles defined inside of it when the user hovers their pointer over the
fill: $accentColorchanges the fill of the
svgtag 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
To fix this issue we'll add the following styling to the
svgis the selector used to target the icon.
fill: $textColorsets the fill of the
svgto 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:
- Pseudo-classes (opens new window)
- :hover (opens new window)
- SVG Attribute reference (opens new window)
- fill (opens new window)
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
You can add the CLI command to the
scripts object in the
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
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.