Feature request - Vue: Add slots to icons

[faaizajaz]

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:

<BellIcon class="h-6 w-6">
    <span class="/* classes to make notification badge */" />
</BellIcon>

Or maybe I am missing a super simple way to do this without copying the icon source and making my own components?

[ngekoding]

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

[faaizajaz]

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.