\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?",[3145],{"name":3146,"color":3147},"enhancement","a2eeef",75,"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.69529146,{"description":3154,"labels":3155,"number":3159,"owner":3135,"repository":3160,"state":3137,"title":3161,"updated_at":3162,"url":3163,"score":3164},"### Package\n\nv3.x\n\n### Description\n\nSo I've created a nuxt module npm package to share components / composable, between two applications. One is Nuxt, one is plain Vue. Now i'm using Nuxt UI is some of those components. When installing this module in the Nuxt application the components work fine, but in Vue I'm having trouble getting them recognized.\n\nI've added a \"components\" -> \"dist/runtime/components\" export to the package and I'm directly importing the .vue files in Vue, Nuxt UI is installed in the application. But I'm getting the following:\n\n\u003Cimg width=\"678\" height=\"112\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3f2dde28-d661-4a3e-b79d-79a9505a1da0\" />\n\nI'm also using UModal, UCard elsewhere in the app itself, they do work there.\nSo what do I need to do to get these files parsed my vite/vue/nuxt ui?",[3156],{"name":3157,"color":3158},"question","d876e3",4892,"ui","Using Nuxt UI in components from a npm package, in Vue","2025-09-05T08:48:22Z","https://github.com/nuxt/ui/issues/4892",0.6982413,{"description":3166,"labels":3167,"number":1674,"owner":3135,"repository":3136,"state":3137,"title":3168,"updated_at":3169,"url":3170,"score":3171},"this is not a bug just a simple question I am using vite + nuxt3 + vuetify3 my object is to use it. I am new to nuxt-icon please bare with me. I had following questions please answer it\r\n01 nuxt-icon has tree shaking feature I mean it will only import those icons which are used in code\r\n02 If I want to use mdi:alarm-light inside vuetify \u003Cv-icon icon=\"mdi:alarm-light\">\u003C/v-icon> it should work as I have access to material Icon library right but it fails to display the icon.\r\n```\r\n// nuxt.config.ts\r\n//import { defineNuxtConfig } from 'nuxt'\r\n\r\n// https://nuxt.com/docs/api/configuration/nuxt-config\r\nexport default defineNuxtConfig({\r\n css: ['vuetify/lib/styles/main.sass',],\r\n modules: ['nuxt-icon'],\r\n build: {\r\n transpile: ['vuetify'],\r\n },\r\n vite: {\r\n define: {\r\n 'process.env.DEBUG': false,\r\n },\r\n },\r\n})```",[],"how to use it inside vuetify v-icon component","2023-01-10T13:41:27Z","https://github.com/nuxt/icon/issues/39",0.7083462,{"description":3173,"labels":3174,"number":3175,"owner":3135,"repository":3136,"state":3137,"title":3176,"updated_at":3177,"url":3178,"score":3179},"My situation is summarized as follows:\n\nI've upgraded @nuxt/icon to 2.0.0, and the SVG file doesn't have a hard-coded fill.\nI'm using the \u003CIcon :name=\"icon:xxx\" /> method to call the local SVG.\nI'm using .icon { color: var(--neutral); } to control the color, but the icon is still always black.",[],423,"Custom icons cannot change color and the overlay svg color is still black","2025-08-23T07:09:20Z","https://github.com/nuxt/icon/issues/423",0.70962375,{"description":3181,"labels":3182,"number":3186,"owner":3135,"repository":3135,"state":3137,"title":3187,"updated_at":3188,"url":3189,"score":3190},"### Environment\n\n------------------------------\n## Project\n\n- Operating System: Linux\n- Node Version: v22.16.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.4\n- Package Manager: bun@1.2.19\n- Builder: -\n- User Config: $development, $production, modules, fonts, components, css, ignore, devtools\n- Runtime Modules: @nuxt/eslint@1.8.0, @nuxt/fonts@0.11.4, @nuxt/icon@1.15.0, @nuxtjs/supabase@1.6.0, @tresjs/nuxt@4.0.0, @nuxtjs/tailwindcss@7.0.0-beta.0\n- Build Modules: -\n------------------------------\n\n## Layer\n\n- Operating System: Linux\n- Node Version: v22.16.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.12.4\n- Package Manager: bun@1.2.19\n- Builder: -\n- User Config: extends, modules, $development, $meta, components, devtools, css, routeRules, experimental, compatibilityDate, eslint, fonts, reka\n- Runtime Modules: @nuxt/eslint@1.8.0, @nuxt/fonts@0.11.4, @nuxt/icon@2.0.0, @nuxt/ui@3.3.2, @vueuse/nuxt@13.6.0, reka-ui/nuxt@2.4.1, @nuxtjs/tailwindcss@7.0.0-beta.0\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nLayer: https://github.com/ojvribeiro/nuxt-repro-dirs-layer\n\nProject: https://github.com/ojvribeiro/nuxt-repro-dirs-project\n\n\n### Describe the bug\n\nI'm trying to disable path prefix for component names via a configuration from a layer. This is what I did:\n\n```ts\n// nuxt.config.ts (Layer)\nexport default defineNuxtConfig({\n $meta: {\n name: \"repro-layer\",\n },\n\n components: {\n dirs: [\n {\n // Disable for layer\n path: \"#layers/repro-layer/app/components\",\n pathPrefix: false,\n },\n {\n // Disable for project\n path: \"~/components\",\n pathPrefix: false,\n },\n ],\n },\n});\n```\n\n```ts\n// nuxt.config.ts (Project)\nexport default defineNuxtConfig({\n extends: [\"../nuxt-repro-dirs-layer\"],\n});\n```\n\nI did expect this would work for the root project. Instead, it only applied `pathPrefix: false` for the layer, failing to resolve the `Button` component in `~/components/ui/Button.vue`, as it keeps expecting `UiButton`.\n\n\u003Cimg width=\"592\" height=\"331\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/8e5e6411-79cf-48d7-acbb-7d33d5e7a20a\" />\n\n\u003Cimg width=\"321\" height=\"76\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/34f33dfd-d84d-45dc-9a5d-aae5cc2fabfa\" />\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n$ nuxt dev\nNuxt 4.0.3 with Nitro 2.12.4 nuxi 4:33:52 PM\n[get-port] Unable to find an available port (tried 3000 on host \"localhost\"). Using alternative port 3002. 4:33:52 PM\n 4:33:52 PM\n ➜ Local: http://localhost:3002/\n ➜ Network: use --host to expose\n\n ➜ DevTools: press Shift + Alt + D in the browser (v2.6.2) 4:33:53 PM\n\n✔ Vite client built in 26ms 4:33:53 PM\n✔ Vite server built in 41ms 4:33:53 PM\n✔ Nuxt Nitro server built in 666ms nitro 4:33:54 PM\nℹ Vite client warmed up in 1ms 4:33:54 PM\nℹ Vite server warmed up in 24ms 4:33:54 PM\n WARN [Vue warn]: Failed to resolve component: Button 4:34:03 PM\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. \n at \u003CApp> \n at \u003CNuxtRoot>\n WARN [Vue warn]: Component \u003CAnonymous> is missing template or render function. 4:34:03 PM\n at \u003CAnonymous> \n at \u003CApp> \n at \u003CNuxtRoot>\n WARN [Vue warn]: Failed to resolve component: Button 4:34:04 PM\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. \n at \u003CApp> \n at \u003CNuxtRoot>\n WARN [Vue warn]: Component \u003CAnonymous> is missing template or render function. 4:34:04 PM\n at \u003CAnonymous> \n at \u003CApp> \n at \u003CNuxtRoot>\n```",[3183],{"name":3184,"color":3185},"pending triage","E99695",33021,"`components.dirs[].pathPrefix` config not working from layer using path aliases","2025-08-20T19:57:34Z","https://github.com/nuxt/nuxt/issues/33021",0.71158355,{"description":3192,"labels":3193,"number":3197,"owner":3135,"repository":3135,"state":3198,"title":3199,"updated_at":3200,"url":3201,"score":3202},"1. I import a svg component, like this\r\n\r\n\u003Ctemplate>\r\n \u003Csvg class=\"svg-icon\" aria-hidden=\"true\">\r\n \u003Cuse :xlink:href=\"iconName\">\u003C/use>\r\n \u003C/svg>\r\n\u003C/template>\r\n\u003Cscript>\r\n export default {\r\n name: 'icon-svg',\r\n props: {\r\n iconClass: {\r\n type: String,\r\n required: true\r\n }\r\n },\r\n computed: {\r\n iconName() {\r\n return `#icon-${this.iconClass}`\r\n }\r\n }\r\n }\r\n\u003C/script>\r\n\r\n2.export in 'components/common/index.js'\r\nexport { default as Iconsvg } from './Icon-svg'\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c6867\">#c6867\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3194],{"name":3195,"color":3196},"2.x","d4c5f9",3203,"closed","svg can't be used in nuxt.js","2023-01-18T16:23:47Z","https://github.com/nuxt/nuxt/issues/3203",0.6559142,{"description":3204,"labels":3205,"number":3207,"owner":3135,"repository":3136,"state":3198,"title":3208,"updated_at":3209,"url":3210,"score":3211},"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.",[3206],{"name":3157,"color":3158},60,"Why `components/global` exactly?","2023-03-13T14:50:53Z","https://github.com/nuxt/icon/issues/60",0.6678509,{"description":3213,"labels":3214,"number":3215,"owner":3135,"repository":3136,"state":3198,"title":3216,"updated_at":3217,"url":3218,"score":3219},"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.685982,{"description":3221,"labels":3222,"number":3215,"owner":3135,"repository":3224,"state":3198,"title":3225,"updated_at":3226,"url":3227,"score":3219},"### 🆒 Your use case\r\n\r\nI would love to use the `ScriptGoogleMaps` component but I dont like the static placeholder. Instead I would like to immediately display the map.\r\n\r\n### 🆕 The solution you'd like\r\n\r\nAdd a prop to disable the placeholder / static map feature entirely.\r\n\r\n### ℹ️ Additional info\r\n\r\nReasons:\r\n- Static Map has a max resolution that is very low and therefor always looks blurry on high dpi screens\r\n- Static Map cant be [styled](https://snazzymaps.com/)\r\n- It takes some time until the scripts are loaded and the map is initialized. Therefor the \"activate map on hover\" doesnt work from a UX perspective",[3223],{"name":3146,"color":3147},"scripts","Google Maps: Add option to disabled placeholder","2024-09-03T15:45:42Z","https://github.com/nuxt/scripts/issues/201",["Reactive",3229],{},["Set"],["ShallowReactive",3232],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fAKJMmGjDz2N7u_tsTu_TxbR813LvVq5YcltyPpGbKmo":-1},"/nuxt/icon/48"]