VuePress Tutorial 12 - Highlight SVGs on Hover
Channel: Code Monkeys
Date: 2022-09-09

We're now ready to add a highlight effect when hovering over the SVG 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 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 which will automate the process and optimize the files.

📗 VuePress: https://vuepress.vuejs.org/

🦍 Highlight SVGs on Hover Post: https://www.codemonkeys.tech/vuepress-tutorial-12/

🐒 Code Monkeys Blog Tutorials Repo: https://github.com/codemonkeysio/code-monkeys-blog-tutorials

🐵 Code Monkeys Blog Repo: https://github.com/codemonkeysio/code-monkeys-blog

-----------------------------------------------------------------------------------------

Timestamps
00:00 - Intro
00:40 - What We're Doing
02:41 - Icon Example
04:49 - Icon Styles
10:10 - CLI Command
14:32 - Optimized Icon Example
15:57 - Recap
16:55 - Outro

-----------------------------------------------------------------------------------------

SOCIAL MEDIA
🐒 Blog: https://www.codemonkeys.tech/
💻 GitHub: https://github.com/codemonkeysio
📨 Telegram: https://t.me/codemonkeystech
🐦 Twitter: https://twitter.com/codemonkeystech
🐸 Let's Gab: https://gab.com/codemonkeys
💡 Speak your mind on Minds:  https://www.minds.com/codemonkeys/

-----------------------------------------------------------------------------------------

BUY US A BANANA 🍌
💵 SubscribeStar: https://www.subscribestar.com/code-monkeys
🍌 Sponsor Code Monkeys: https://github.com/sponsors/codemonkeysio
❤️ Sponsor J the Code Monkey: https://github.com/sponsors/jchiarulli

🤖 Instead of using the static Bitcoin address below, improve your privacy by using a PayNym: https://paynym.is/

PayNym: https://paynym.is/+blackviolet838

Payment Code: PM8TJf7wdgnWbAdnwbgTMY8ic3UZ2LFvkSJxuFtK4JwXSKFmqys1iL964UX55fGKfqZXfTdVjK1Z3FwbgTPbmEp2ErGPVaXZds8v9YUBxgfqvoQUBF2X

₿ Bitcoin (BTC): bc1q5rsnx4d320jtuvdf0k8kkmgjzfnac95gphyznn

Monero (XMR): 89DRhZtKrfPS5yuMcFoivqBCuXs19qRnChXn5VKGeYDG457WHFcGoWbQXqW92Gah2mZFChLCkV5Cfc6zcwFwmz9zN8GRuDF

-----------------------------------------------------------------------------------------

MUSIC 🎵

Special thanks to Bizonacci II, Trigger Haven, and Chief Bizzo for the song!!! 🐵

AC/BC - You Shook Me All Night Long (PALEOROCK CLASSIC): https://www.youtube.com/watch?v=28--5aEV1Z0

#CodeMonkeys #VuePress #Software