Ok, this part is interesting for me as I want to include icons, in Tailwind CSS case, SVG icons. This is because I used icons from Bootstrap and I am curious on how to do this in Tailwind CSS.
π BTW Thereβs a good screencast on how to here: Working with SVG Icons - Tailwind CSS
π You can check out Tailwindβs resources page for images and illustrations: Resources & Assets - Tailwind CSS
Tips:
- A bunch of SVG icons ready to inject into your site via Resources & Assets - Tailwind CSS
- Clean up SVG, head over to SVGOMG - SVGOβs Missing GUI
- Copy the script in your SVG file
- Paste it in SVGOMG, you would get a new version of the SVG and itβs smaller in size.
- Copy from SVGOMG (thereβs a copy button)
- Paste it into your SVG file replacing the old script
- You can paste that new script into your template/html file.
- Delete the width and height from SVG script, and add
class=ββ
and start adding your tailwind attributes likeh-4 w-4
- Delete the width and height from SVG script, and add
-
What about other things you can do?
- Colour: Look for the
fill=β...β
property in your SVG script. Delete it. Then in yourclass
, use Tailwindβs CSS utility:fill-current
- this will match the current text colour. Then you can use Tailwindβs text color utility, e.g.text-red-500
.
Example:-
class=βh-24 w-24 fill-current text-red-500
- Colour: Look for the
π‘Pro-tip: If you are working with custom SVG icons, make sure they are exported as squares. It just makes it easier when resizing the icon in Tailwind CSS.
The rest of the webcast is rendering multiple icons in a row, in that example is star ratings - 5 stars in a row. Iβm not interested using that at the moment for what Iβm doing. But you can use v-for
, :key
& flex
utility to show multiple star icons on a row and not stacked on top of one another. Then itβs just using Tailwind utilities to make it nicely aligned. So check out the webcast if you are interested in this part.
Top comments (0)