NuxtUI: Use Custom IconSet with Vue.js Setup
Hey there! 👋
I'd love to use NuxtUI in a Vue.js setup and integrate a custom icon set (FontAwesome Pro). Does anyone have tips or ideas on how to achieve this?
I followed this guide to generate my icon sets: https://iconify.design/docs/libraries/tools/examples/import-fa-pro.html — it works great with Nuxt, but I couldn't find any information on how to use the resulting JSON files in a plain Vue + Vite setup (without Nuxt).
Any help is much appreciated — thanks in advance!
Seb
Iconify
All popular icon sets, one framework
3 Replies
Hi @sebimalwieder. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the knowledge sources provided only cover how to use custom icon sets and Iconify collections within Nuxt UI and Nuxt projects. They explain how to add custom icon collections (including local SVGs or Iconify JSON packages) in a Nuxt context by configuring the
nuxt.config.ts and using the @nuxt/icon module. There is no information in the sources about integrating custom icon sets (such as FontAwesome Pro via Iconify JSON) with Nuxt UI in a plain Vue + Vite setup, without Nuxt.
If you are working within Nuxt, you can follow the documented approach to add custom collections and use them in your components. For a plain Vue + Vite setup, the knowledge sources do not provide guidance or examples for this scenario, so I cannot offer a confident answer for that use case based on the available information Custom Local Collections.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@605746930651496459> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Ok, I found a solution. I will ship around this with setting up my own Iconify provider with my custom icon sets. See: https://iconify.design/docs/api/ and https://iconify.design/docs/api/config.html#overwriting-default-api