Hi @civic cave. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Confusion with iconify (@nuxt/ui)
devout capeBOT
Nuxt UI integrates with Iconify (via the @nuxt/icon module) to provide access to a large set of icons. By default, Nuxt UI automatically registers the @nuxt/icon module for you, so you don't need to do any extra setup. This module allows you to use any icon from the Iconify collection at runtime using the UIcon component and icon names like i-lucide-lightbulb Getting Started: Icons.
Why is there a runtime for Iconify in Nuxt UI?
The runtime is needed because, by default, icons are fetched dynamically as needed from the Iconify API or from local collections. This allows you to use any icon from the vast Iconify dataset without having to manually import or bundle each SVG. However, this does mean that there is a small runtime involved to resolve and render the icons.
How to avoid a runtime for icons?
To minimize or eliminate the runtime dependency, you can install the icon data collections you use locally. For example, if you use lucide icons, you can run:
npm install @iconify-json/lucide
This way, the icons are served from your local project (or serverless function), which is faster and more reliable for both SSR and client-side, and reduces the need for runtime fetching. You can also create custom local collections from your own SVGs and configure them in your nuxt.config.ts. This approach ensures that all icons are bundled at build time and not fetched at runtime Iconify Dataset.
Summary:
- By default, Nuxt UI's icon system has a runtime to fetch and render icons dynamically.
- To avoid this, install the icon collections you use locally and configure custom collections if needed.
- This will bundle the icons at build time and remove the need for a runtime fetch.
For more details and configuration examples, see the Nuxt UI documentation on Iconify Dataset.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
civic cave
@devout cape how can I remove the runtime and install locally?
devout capeBOT
Let me check the knowledge base for you again. One moment! :books:
To remove the Iconify runtime and serve icons locally in your Nuxt project with @nuxt/ui, you should install the icon collections you use as local dependencies. This ensures icons are bundled at build time and not fetched at runtime.
Steps:
-
Install the icon collection(s) you need.
For example, if you use lucide icons:npm install @iconify-json/lucideReplace lucide with the collection you use (see icones.js.org for collection names).
-
(Optional) Add custom local SVGs as a collection:
Place your SVGs in a directory, e.g.,app/assets/icons, and configure yournuxt.config.ts:export default defineNuxtConfig({ modules: ['@nuxt/ui'], css: ['~/assets/css/main.css'], icon: { customCollections: [{ prefix: 'custom', dir: './app/assets/icons' }] } })You can then use your custom icons like this:
<template> <UIcon name="i-custom-add" /> </template>
By following these steps, your icons will be served locally, eliminating the need for the Iconify runtime fetch. For more details, see the Iconify Dataset section in the Nuxt UI docs.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
civic cave
I'm not using UIcon I'm using just Icon and it works, also will installing lets say lucide add all the icons? or just what i use? @devout cape
devout capeBOT
Let me check the knowledge base for you again. One moment! :books:
If you are using the Icon component provided by Nuxt UI (not UIcon), it still leverages the same underlying icon system, which is integrated with Iconify and the @nuxt/icon module. The documentation shows usage with both UIcon and Icon components, and both support the same icon naming and local collection features Getting-started: Icons.
When you install a collection like @iconify-json/lucide, the entire icon set for that collection is added to your node_modules. However, only the icons you actually use in your code will be included in your final build, thanks to tree-shaking and the way Nuxt handles icon imports. This means you do not need to worry about all icons being bundled—just the ones you reference in your templates will be included Iconify Dataset.
Summary:
- The Icon component works the same as UIcon regarding icon sources and local collections.
- Installing @iconify-json/lucide adds all lucide icons to your project, but only the icons you use in your code are bundled in your build.
If you need more details on how to use local collections or custom icons, refer to the Iconify Dataset section.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
civic cave
icon: {
customCollections: [
{
prefix: 'custom',
dir: './app/assets/icons'
}
],
collections: [
'mdi', 'fluent', 'ic', 'basil', 'heroicons', 'mingcute', 'bx',
'ph', 'ri', 'solar', 'iconamoon', 'fa6-solid', 'icon-park-solid',
'akar-icons', 'material-symbols', 'fa-solid', 'tabler', 'streamline',
'game-icons', 'bxs', 'clarity', 'fa', 'gg', 'tdesign',
'gravity-ui', 'twemoji', 'zondicons'
]
},```
I Did thid, installed all of them and it still has the runtime why? @devout capeLet me check the knowledge base for you again. One moment! :books:
Based on the provided knowledge sources, installing icon collections like @iconify-json/lucide or others and listing them in your icon.collections config will make those icons available locally in your project. However, the documentation does not explicitly state that this will fully eliminate the Iconify runtime or network requests. The sources recommend installing collections locally for improved speed and reliability, especially for SSR and client-side, but do not guarantee that all runtime dependencies are removed or that no runtime code from Iconify will be present Iconify Dataset.
If you are still seeing a runtime, it may be because:
- The Nuxt UI and @nuxt/icon integration still includes some runtime logic to resolve and render icons, even when collections are local.
- The documentation does not provide a method to fully remove all runtime code related to Iconify, only to serve icons locally for performance and reliability.
In summary:
The knowledge sources do not explicitly confirm that installing collections and configuring them as you did will remove all Iconify runtime code. They only state that icons will be served locally and more efficiently. If you require a build with absolutely no Iconify runtime, the documentation does not provide enough information to guarantee this outcome.
For further clarification or advanced configuration, you may need to consult the @nuxt/icon documentation or open an issue with the Nuxt team, as the current Nuxt UI docs do not cover this scenario in detail Iconify Dataset.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
civic cave
@devout cape why is there a need for a runtime? the icons just have to be locally in some css or maybe embeded and that's it
devout capeBOT
Let me check the knowledge base for you again. One moment! :books:
The need for a runtime in Nuxt UI's icon system (with Iconify and @nuxt/icon) comes from how icons are resolved and rendered. Even when icon collections are installed locally, the system still uses runtime logic to:
- Dynamically resolve icon names to their SVG data.
- Render the SVGs in the DOM as components.
- Support features like switching between SVG and CSS modes, customizing icons, and handling custom collections.
While you can install icon collections locally to avoid network requests and improve performance, the actual process of mapping icon names to SVGs and rendering them is handled at runtime by the icon system. The documentation does not mention an option to fully eliminate this runtime logic or to embed all icons purely as static CSS or inline SVGs without any runtime code Iconify Dataset.