Style SVG Icons with Tailwind Utility Classes

Adam Wathan: [0:00] The next thing I want to work on is making this rating and review section look a little bit more exciting by introducing some star icons instead of using text.

[0:08] When I want to introduce icons into a project that I'm building with Tailwind, my go to is always SVG icons, instead of something like an icon font. There's a lot of cool ways that you can use Tailwind's classes to style an SVG.

[0:21] If you head over to the resources section of the Tailwind CSS website, you see we have this icon section which has a couple of really good options for free SVG icon sets. Heroicons UI by Steve Schoger who works on Tailwind with me. There's also Zondicons, which is another set drawn by Steve in a different style. Another one I really like is in typo by Daniel Bruce.

[0:43] All of these icons sets are already pre-optimized and ready to inject into an HTML project. If you're working with a designer who's creating custom icons for you, there's another step in the workflow that's important to tackle before you introduce the icons into your project.

[0:57] To walk you through to what I do to optimize my SVG icons, I had Steve design me a star icon, and just export it from Sketch Rar so that I can show you what the workflow is for getting this into a good state to actually use in a project.

[1:12] Right now, you can see this SVG has a bunch of information in it that we don't really need, like comments and titles and descriptions. Even this XML tag up here isn't actually needed when we're using this as an inline SVG.

[1:23] The way that I clean this up is by just taking this markup, and then using this cool online tool called the SVGOMG by Jake Archibald. If you just head to this paste markup section and paste in the SVG, you see it gives you a new version of the SVG that is way smaller. In this case, we saved 48 percent.

[1:41] I'm just going to copy this and we'll just paste it back into this file so we can see the difference. You can see now this file is way smaller. It doesn't have any of the extra cruft that's not actually needed.

[1:51] Let's go ahead and bring this path down onto its own line and this closing tag onto its online. You can see this is the entire SVG. Why don't we bring this over into our actual property card component, and I'll show you what it looks like to style this with Tailwind's utilities.

[2:07] Now you can see that star showing up over here on the right. Let's add some utility classes to it to customize how it looks. The first thing you'll notice is that this actually has some inline width and height set on it. What I normally do is I actually remove this. Instead, I'll size the SVG using Tailwind's width and height utilities.

[2:25] Because inline SVG is just like any other HTML that's in your file, you can just add a class attribute and go to town. Here, here we can use something like H4W4. That should size the star. We could do something bigger, like 24 or 24. Now we get a much bigger star.

[2:41] One thing worth pointing out here as well, if you're having a designer design you custom icons, insist on them exporting them as squares.

[2:49] You can see here this is a 24 by 24 view box. When an icon is square, it makes it much easier to set the height and width with Tailwind because you don't have to worry about the height being 17 pixels and the width being 13 pixels. If you can export everything as a square, it's much easier to work with.

[3:06] What about color? Right now, if we head over to the very end of this path, you see this actually has a baked-in fill property. Let's get rid of this. We'll use Tones Utilities to add some color to the star instead.

[3:19] Now you can see it's just gone back to black which is the default. If we want to actually add a custom color, we can use the fill current utility which tells the SVG to make the fill match the current text color and then we can use text color utilities like text- red-500 for example to set the fill color by proxy.

[3:37] Why don't we go ahead and actually try to use the star icon to actually make this design better? I think what we want to do is maybe show five stars and just fill in like four out of five of those stars if it's a four out of five star property or fill in three if it's only three out of five stars. That sort of thing.

[3:54] What we should do to start is make sure that we can actually render five of these stars. Why don't we reduce the size of this to maybe...? I don't know. Let's try a couple different sizes. We'll try

[4:05] H4W4. That's pretty good. What about like H6W6? Is that too big? That's not too bad either.

[4:12] I think I liked four better though. Let's just roll with four. Since we're going to want the stars to be different colors depending on whether they're filled or not, let's just remove this text rate of 500. We'll dynamically add the correct color based on which star we're on in the list of five.

[4:27] With VueJS specifically since that's what we're using to build out this example, the way that we can easily create these five stars is just by adding a V4 attribute here and just doing something like I in five. Now we should have five stars show up.

[4:42] Something else that we need to do that's Vue specific is give each one of these a key since in Vue anything in the list needs a unique key. We can just give this a key of I for now since it doesn't really matter. It just needs to be something unique.

[4:55] Let's assign a key based on the index that we're in, in the loop. You can see that all these stars are stacked on top of each other which isn't what we want. To get these rendering next to each other, the way that I would do that is using Flexbox. We can just use Tailwinds Flex class.

[5:10] What that's going to do is turn this div into a Flex container and make every child of it render side by side by default. We're going to talk about Flexbox in a lot more detail later in the course, but for now this is enough to get us going.

[5:23] Now, we're not going to need this four to five stars thing here, so why don't we just delete that? Now let's work on making these stars actually render as the correct color. The way I'm going to do that in Vue is by adding a dynamic class attribute on top of the regular class attribute.

[5:38] We're going to use this to dynamically assign the correct color based on whether or not this star should be filled or empty.

[5:45] The easiest way to do that is to check, is the current index less than or equal to the property rating? If so, then we want the star to be filled. Maybe we'll use a color like text-teal-500. Then, for the empty star, maybe we'll use a color like text-gray-300. Let's see how this looks, and we might have to adjust that after the fact.

[6:06] I think the teal is OK, but the gray is a little soft. It's hard to see. Why don't we bump that up to text-gray-400? That looks better to me.

[6:15] Now, you can see we have a little bit of an alignment issue. These icons are sitting a little high compared to this text. We can use the align items property from Flexbox to center all this content. The way that's exposed in Tailwind is through a class called items center. We're just saying center all of the items in this flex container.

[6:34] Now, you can see things look a little bit nicer over here now that they're centered. We should also maybe add some space to the left of this text. It's a little bit cramped here, so why don't we add some left margin to the span?

[6:45] Let's start with ml-2, see what that looks like. Looks good if we went up to four. How's that? That's probably too much, so I think something like two is probably good.

[6:55] I also think we could tweak this text a little bit. Having this stuff in brackets made more sense when we had other text content next to it, but maybe we can simplify it and do something like property count reviews. Now, we'll see four out of five stars, 34 reviews. This looks good.

[7:13] The final thing I'd like to look at is maybe tweaking the space here. Now that these icons are smaller than the text here was and we're using small text over here as we're taking another look at this and playing with some values and seeing if we like anything better than the current value of mt-4.

[7:29] If we did something like mt-2, how does that look? That looks good to me. We have mt-2, which is a little bit tighter, mt-4, which is a little bit more spaced out. Seeing those back to back, I like the tighter look a little bit better, so let's stick with that.

[7:43] There we go. We made this design a little bit more interesting by replacing that basic text implementation with some cool icons, and we learned a little bit about how to work with SVG in Tailwind.

[7:52] Again, the key takeaways here...Always try to export your icons as squares, like you can see with this view box, so that it's easier to size them. I use Tailwind's height and width utilities when you want to size your SVGs. Then to control the color of them, you can use fill current combined with these text color utilities to set the color.

[8:12] When you want to align SVG icons with some text that's next to them, the best way to that is using Flexbox and using item center to make sure that the SVG is perfectly vertically aligned with the text.