Closed faaizajaz closed 2 years ago
I think you can just make it works with only a simple CSS.
Here is the example using Tailwind CSS.
<div class="relative flex justify-center items-center w-6 h-6 rounded-full bg-gray-200">
<bell-icon-s class="w-3.5 h-3.5 text-gray-600" />
<div class="absolute -top-0.5 -right-0.5 w-2.5 h-2.5 bg-blue-400 rounded-full" />
</div>
And here is the result:
This is what I was created on my Vue 3 App: https://github.com/ngekoding/admin-panel
Yep, this is similar to what I am doing, except I am using a boolean prop with v-if to show or hide the badge. I suppose it is a bit of a specific use-case for a feature request. In the end making my own icon components did not take long at all.
I was wondering if it would be possible to include a slot in each icon after the svg tag to easily add badges (i.e. for notifications). I know I can just copy the svg paths for each icon and do it manually, but it would be so nice if out of the box I could do something like:
Or maybe I am missing a super simple way to do this without copying the icon source and making my own components?