1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Style SVG Icons with Tailwind Utility Classes

    tailwindTailwind

    In this lesson, we'll be replacing the text-based rating in our card to use SVG icons to signal how the property is rated.

    To do this, we'll start with a custom, raw SVG icon that was exported from sketch (best to export as a square SVG for easier styling). One thing to note is that this file is much bigger than you need it to be when it's exported. To clean it up, you can run it through a service like SVGOMG that will reduce the file size drastically. After this, we'll remove the SVG color and sizing and use Tailwind utility classes to style these icons how we'd like them, with h- / w- utilities for size and fill-current for color.

    Lastly, the positioning of the icons will be adjusted with Tailwind's flexbox utility classes.