Building a Hoverable Server Selector With SVG
SVGs are easy to style directly using Tailwind's utility classes. Using the inspector tool, we are going to learn how to take an SVG from the Discord app, color it, and modify its properties on hover.
The code for this lesson is divided into two sections, with this you can see the progress on the code.
Instructor: [0:00] To start improving our server selector, let's focus on just this first button here, the Discord button. I'll come over. I'll grab this div, and I'll comment out all this dummy data right here. We'll start with one plain div.
[0:19] Now, over in Discord, if we inspect this, we'll see that the background here is 36393F. If we pop open our Tailwind config, we'll see that that is gray 700. Let's go ahead and change this background white to background gray 700. Looks good.
[0:46] Now, we see that the inside of this is this Discord logo right here, which, if we look in our inspector, is this SVG icon. SVGs work great directly with Tailwind.
[1:01] I'm actually just going to copy this icon directly from the inspector and I'm going to use this little website that I like to use called transform.tools. We can just paste in our SVG right here, and this gives us a React component.
[1:21] Of course, you can use any tool you like to get an SVG into your app. For this, we can just go ahead and paste this component right here in our project. I'll rename this to Discord icon.
[1:36] Go ahead and get rid of this class name, and we'll actually also delete the hard-coded width and height here. Now back in our clone, we can come up to this first button and go ahead and render the Discord icon inside of this div.
[1:56] If we zoom in, we can actually see the Discord icon there, but it's a little dark and too big. First, let's fix the color. The color is actually coming from this text utility right here. Right now, it's gray 800. I could make this text white and we'll see that that makes the icon white.
[2:15] That's actually because down here, we're using the current color for the fill attribute on our path. This is a good property to use because it lets us style our SVG icons just using plain old color utilities from Tailwind.
[2:32] We can make this red 500, and we'll see it's red, and so on. If we pop over to Discord and inspect the icon, we can take a look at the computer property here and see that the color is actually this DCDDDE color.
[2:57] Again, back in our Tailwind config, we can see that that corresponds to gray 100. If we switch back to our clone and make this text gray 100, we should be matching that color perfectly. Now let's fix the size.
[3:15] If we take a look at this SVG, we can see that the size is 28 pixels wide by 20 pixels tall. We can actually come straight to our icon and add a class here. We want the width to be 7 which corresponds to 28 pixels, and we want the height to be 5 which corresponds to 20 pixels.
[3:41] Now our icon is sized perfectly. Next, let's take a look at the hover treatment. We'll see that when we hover in Discord, the color turns to this brand Indigo here and the border radius changes as well. Let's start with this color. If we inspect, we can see that this color is 5865F2.
[4:06] Let's come over to our config to find a new brand color and type in 5865F2. This will give us the Discord brand in our color palette. We should be able to say hover background brand. Here's Discord and here is our clone.
[4:30] Finally, we'll also see that the Discord logo itself actually transitions to white on hover. We can achieve that using hover text white. Now our colors look great. In Discord, we actually noticed that the colors transition smoothly as we hover over the icon.
[4:57] Well, we can do that in our clone here as well just by adding the transition class. Now we see that there is the subtle transition of our colors when we hover them.
[5:13] If we take a look at this class, we'll see that this applies a transition to these common properties and it gives us this nice default timing function along with a duration of 150 milliseconds. 150 milliseconds feels a little bit fast compared to Discord.
[5:31] We can tweak these defaults using other utilities. Let's go ahead and use the duration utilities to slow this down from 150 to 200. That feels much better.