ngekoding/admin-panel

Use on-demand icons plugin like `unplugin-icons`

Closed this issue · 5 comments

nyancodeid commented

Due the issue of dynamic import for the icons, i think we can you vite plugin called vite-plugin-icons that has been renamed as unplugin-icons. With the power of vite-components we can use and auto-import the icon component on-demand with little configuration for icon resolvers.

We can use all the icons collection such us MDI (Material Design Icon), Remix Icon, Font Awesome and more on-demand. It's mean we only use what we use in our code. I know it's cool right.

Here the example how auto import work and how we use it at the code:

<template>
  <i-carbon-accessibility/>
  <i-mdi-account-box style="font-size: 2em; color: red"/>
</template>

Another cool things is, we can customize the icon name conversation.

{prefix}-{collection}-{icon}

That's it, what do you think?

Reference:

ngekoding commented

Thanks for the suggestions!

But I have no idea what the main different with has already implemented here.

nyancodeid commented

I think the main different is icon collections. We can use Material Design Icon or Font Awesome icon collection at the same time with on-demand. Just in case that some icon from Heroicons is not match with our favorite style we can use another icon collection with another design.

So main idea is just to make the icons more varied and not stuck with one icon design.

You can see the icon design collection that we can use here

Thank you.

ngekoding commented

Thanks for the reference. I will take a look detailed for that next time, inshaAllah.

But, one point more important to do (my plan) that how to use dynamic component import for the icons in menu-item component.

From some testing that is not possible right now with Vite (rollup), but with Webpack it's working well.

So, if we change with the unplugin-icons, it is make it more complex for menu-item component (currenty I import all the icons for this purpose). But the another way to solve this to just change the icon part with the slot, but I don’t really like to use slot for the icon (for simplicity use).

  • 👍1
ngekoding commented

Already implemented with some adjustments cdf55b5.

Thanks again, I learned something new for this.

  • 🎉1
nyancodeid commented

Good job, it's awesome. Nice to know that. 🎉