\r\n```\r\n\r\n2. If you want to have `\u003CIcon>` load an **SFC** that is nested in folders - that's easy:\r\n\r\n```js\r\n// Assuming: `components/global/CoolStuff/MyIcon.vue`\r\n\r\n\u003CIcon name=\"CoolStuffMyIcon\" /> \r\n```\r\n\r\n3. However, if you have an elaborate set of custom icons (`.svg` extension) that are organized in folders, you would currently need an individual `.vue` icon to go along with every single one.\r\n\r\n```js\r\n// Assuming: `{public|assets}/icons/brand/MyIcon.svg\r\n// Assuming: `components/global/icons/brand/MyIcon.vue`\r\n\r\n// Assuming: `{public|assets}/icons/brand/MyOtherIcon.svg\r\n// Assuming: `components/global/icons/brand/MyOtherIcon.vue`\r\n\r\n\u003CIcon name=\"IconsBrandMyIcon\" />\r\n\u003CIcon name=\"IconsBrandMyOtherIcon\" />\r\n\r\n// etc.\r\n```\r\n\r\nThis means you need to manage a folder of SVGs as well as their matching SFCs. \r\n\r\nIs there a solution?",[3018],{"name":3019,"color":3020},"enhancement","a2eeef",75,"nuxt","icon","open","Feature request: A way to manage custom SVGs that are nested inside folders.","2023-08-07T11:42:42Z","https://github.com/nuxt/icon/issues/75",0.6857724,{"description":3030,"labels":3031,"number":3036,"owner":3022,"repository":3037,"state":3024,"title":3038,"updated_at":3039,"url":3040,"score":3041},"### Description\n\nThis is a follow up to this: https://github.com/nuxt/ui/issues/4498\n\nI'm using NuxtUi and not the NuxtJS framework (inertiajs), and I would to do something like this:\n\n```js\n{\n icon: {\n provider: 'server', // \u003C-- own server here\n customCollections: [\n {\n prefix: 'my-icon',\n dir: './assets/my-icons'\n },\n ],\n },\n}\n```\n\nThe original bug report suggests workaround that aren't that plug-and-play. For example, it may be possible to use an Laravel instance that pushes the icon-set to S3, and nuxt-ui using the S3-instance (e.g. https://s3.example.org/icons/) as a base for the icon collection(s).\n\n### Additional context\n\n_No response_",[3032,3033],{"name":3019,"color":3020},{"name":3034,"color":3035},"triage","ffffff",4541,"ui","Custom Icon server path","2025-07-16T14:22:40Z","https://github.com/nuxt/ui/issues/4541",0.6942219,{"description":3043,"labels":3044,"number":3046,"owner":3022,"repository":3047,"state":3024,"title":3048,"updated_at":3049,"url":3050,"score":3051},"### 🆒 Your use case\n\nI beleive this is a Nuxt edge case for .env, but end user needs to specify an empty key for the .env override to do anything, i.e:\r\n\r\n```ts\r\nexport default defineNuxtConfig({\r\n scripts: {\r\n registry: {\r\n googleAnalytics: true,\r\n }\r\n },\r\n // you need to provide a runtime config to access the environment variables\r\n runtimeConfig: {\r\n public: {\r\n scripts: {\r\n googleAnalytics: {\r\n // .env\r\n // NUXT_PUBLIC_SCRIPTS_GOOGLE_ANALYTICS_ID=\u003Cyour-id>\r\n id: '',\r\n },\r\n },\r\n },\r\n },\r\n})\r\n```\r\n\r\n\n\n### 🆕 The solution you'd like\n\nWe should try and see if we can drop the need for this runtimeConfig as it's quite verbose.\r\n\n\n### 🔍 Alternatives you've considered\n\n_No response_\n\n### ℹ️ Additional info\n\n_No response_",[3045],{"name":3019,"color":3020},239,"scripts","Drop need to specify the runtime config when using .env","2024-09-03T15:49:47Z","https://github.com/nuxt/scripts/issues/239",0.70125866,{"description":3053,"labels":3054,"number":3055,"owner":3022,"repository":3023,"state":3024,"title":3056,"updated_at":3057,"url":3058,"score":3059},"I'm using only custom icon collections via customCollections, but when clientBundle.scan is enabled, the build includes thousands of icons from unrelated collections in the final bundle (icons.json). This happens even though no other icon sets are used anywhere in the project. I expect the bundle to include only the icons I actually use from my defined collections.\n\n\n\nThis is the request that happens at the start of the app, loading nearly 8,000 icons, while my custom icon set only has 60 icons. How can I configure the bundler or Nuxt Icon so that only these 60 icons are included in the final bundle instead of the entire collection?",[],410,"@nuxt/icon includes unrelated icons in icons.json when only using customCollections with scan: true","2025-06-30T17:38:24Z","https://github.com/nuxt/icon/issues/410",0.70338273,{"description":3061,"labels":3062,"number":3063,"owner":3022,"repository":3023,"state":3024,"title":3064,"updated_at":3065,"url":3066,"score":3067},"I'm using icons library on Nuxt UI (still I don't know whose issue this is) for my Nuxt project which uses Tailwind v4 , and I set up some custom icons through a JSON file:\n\n```\n{\n \"icons\": {\n \"arrow-small-right\": {\n \"body\": \"\u003Cpath fill=\\\"currentColor\\\" d=...\n },\n \"auction\": {\n \"body\": \"\u003Cpath fill=\\\"currentColor\\\" d=...\n },\n...\n }\n}\n```\n\n```\n// nuxt.config.ts\n\nimport customIcons from './icons.json' with { type: 'json' };\n\n...\n\n icon: {\n customCollections: [{\n prefix: 'custom',\n icons: customIcons.icons,\n width: 512,\n height: 512,\n }],\n }\n```\n\n\nThey can be imported, however when I try to change their color like `text-white` or `fill-white`, it doesn't work.\n\nWhat I noticed is that icons imported from Iconify have important css rules such as `mask-*`, while mine don't.\nSo how am I supposed to inject these rules inside them, if there is a way?\n\np.s. sorry for creating my issue without completing it",[],402,"Can't apply color to custom icons","2025-06-09T07:06:52Z","https://github.com/nuxt/icon/issues/402",0.70445234,{"description":3069,"labels":3070,"number":3071,"owner":3022,"repository":3023,"state":3072,"title":3073,"updated_at":3074,"url":3075,"score":3076},"Following the steps in the document, I expected to use the Icon component to display a custom SVG Icon, but it failed.\r\n\r\nhttps://stackblitz.com/edit/nuxt-icon-playground-t9ezmw?file=app.vue",[],162,"closed","Custom Local Collections invalid","2024-06-12T02:55:17Z","https://github.com/nuxt/icon/issues/162",0.6583689,{"description":3078,"labels":3079,"number":3083,"owner":3022,"repository":3023,"state":3072,"title":3084,"updated_at":3085,"url":3086,"score":3087},"Can't we define where we'll be storing those custom icon components in our project?\r\nThis sounds more sane `components/icons`... I looked at the source, but I found nothing that defines this path.\r\n\r\nSo could be that I'm blind, or this `global` directory is something that Nuxt handles?\r\n\r\nKind regards.",[3080],{"name":3081,"color":3082},"question","d876e3",60,"Why `components/global` exactly?","2023-03-13T14:50:53Z","https://github.com/nuxt/icon/issues/60",0.6898951,{"description":3089,"labels":3090,"number":3098,"owner":3022,"repository":3037,"state":3072,"title":3099,"updated_at":3100,"url":3101,"score":3102},"### Description\n\nHi, in a pure Vue 3 application where I am using Nuxt UI as a plugin in `vite.config`, I have a problem at the client, requests to the api to acquire icons are blocked so the icons do not display, is there any way to access offline / install the icon pack for these icons instead of acquiring them via api request?\n\n### Additional context\n\n_No response_",[3091,3092,3095],{"name":3019,"color":3020},{"name":3093,"color":3094},"v3","49DCB8",{"name":3096,"color":3097},"vue","42b883",4167,"Offline icons in Vite configuration","2025-05-28T21:33:03Z","https://github.com/nuxt/ui/issues/4167",0.701258,{"description":3104,"labels":3105,"number":3046,"owner":3022,"repository":3023,"state":3072,"title":3106,"updated_at":3107,"url":3108,"score":3051},"Our server bundle size is massive caused by nuxt icon. i guess it is because it includes all our svgs files as custom collections.\r\nIs it possible to have custom collections with svg files that are located under the public folder so that they do not get part of the bundle size?\r\nHow would i need to configure this?\r\nAt the moment they cannot be loaded",[],"Custom Collection with svg files unter public folder?","2024-08-21T22:47:28Z","https://github.com/nuxt/icon/issues/239",{"description":3110,"labels":3111,"number":3112,"owner":3022,"repository":3023,"state":3072,"title":3113,"updated_at":3114,"url":3115,"score":3116},"So in my case in nuxt.config.ts i described custom collection \r\nicon: {\r\n customCollections: [\r\n {\r\n prefix: 'elfi',\r\n dir: './assets/icons'\r\n },\r\n ],\r\n}\r\n\r\nif in my directory lies files with EN names - all works fine\r\nif i put there file with cyrillic (for ex RU) name - the nuxt even can't start properly with \"npm run dev\" - blank screen with no errors\r\n\r\nand one else thing - if i make some changes in folder with icons - i need to terminate nuxt and run again \"npm run dev\" to activate changes",[],201,"Seems like @nuxt/icon doesn't understand other language in files name in local icon collection","2024-07-16T20:38:16Z","https://github.com/nuxt/icon/issues/201",0.7016885,["Reactive",3118],{},["Set"],["ShallowReactive",3121],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fclCh1UPiF2NtA7rZApBv_M6XjnfHlA4fwiUaVqHzqb4":-1},"/nuxt/ui/4298"]