\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?",[1995],{"name":1996,"color":1997},"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.7111673,{"description":2004,"labels":2005,"number":2009,"owner":1985,"repository":1986,"state":2010,"title":2011,"updated_at":2012,"url":2013,"score":2014},"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.",[2006],{"name":2007,"color":2008},"question","d876e3",60,"closed","Why `components/global` exactly?","2023-03-13T14:50:53Z","https://github.com/nuxt/icon/issues/60",0.5854643,{"description":2016,"labels":2017,"number":2018,"owner":1985,"repository":1986,"state":2010,"title":2019,"updated_at":2020,"url":2021,"score":2022},"In my own projects I want to name how I build the component \"Icon\".\r\n\r\nI think as a package it would make way more sense for the component name to be \"NuxtIcon\" with an \"icon\" class instead of just \"Icon\" with name.\r\n\r\nAlso see this:\r\nhttps://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names\r\n(not super relevant due to how I would use it probably lol)\r\n\r\nI'd like to look at my own codebase and make the icon component custom, like:\r\n\r\n```html\r\n\u003C!-- Icon.vue -->\r\n\u003Ctemplate>\r\n\u003Cdiv class=\"aspect-square rounded-full h-20 text-2xl flex items-center justify-center text-white\">\r\n \u003CNuxtIcon :icon=\"icon\" />\r\n\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\ndefineProps({ icon: String })\r\n\u003C/script>\r\n```",[],174,"Can the Base component be changed to \"NuxtIcon\" instead of \"Icon\" with the \"name\" attribute?","2024-06-26T16:45:07Z","https://github.com/nuxt/icon/issues/174",0.6696096,{"description":2024,"labels":2025,"number":2029,"owner":1985,"repository":1985,"state":2010,"title":2030,"updated_at":2031,"url":2032,"score":2033},"Hi there!\r\n\r\nI just experiencing an issue that `global components` that defined in `plugins/` directory doesn't seems to work on production build.\r\n\r\n\r\n\r\n> left : build & run on production mode\r\n> right : run development server\r\n\r\nI've assure that this issue only happened on client side rendering because i've check the server side rendering seems to work just fine.\r\n\r\n\r\n\r\nThe global component `\u003Capp-main />` is registered on `/plugins/global-components.js` file here\r\n\r\n\r\n\r\nand here my `nuxt.config.js` file\r\n\r\n```js\r\n'use strict'\r\n\r\nconst { resolve } = require('path')\r\nconst Env = use('Env')\r\n\r\nmodule.exports = {\r\n build: {\r\n publicPath: Env.get('CDN_URL', '/'),\r\n\r\n analyze: {\r\n analyzerMode: 'static',\r\n generateStatsFile: true,\r\n statsFilename: 'webpack-stats.json'\r\n },\r\n\r\n extractCSS: true,\r\n\r\n postcss: {\r\n plugins: {\r\n 'postcss-custom-properties': false\r\n }\r\n }\r\n },\r\n\r\n css: [\r\n '~assets/scss/main.scss'\r\n ],\r\n\r\n head: {\r\n htmlAttrs: {},\r\n\r\n meta: [\r\n {\r\n charset: 'utf-8'\r\n },\r\n {\r\n name: 'viewport',\r\n content: 'width=device-width,initial-scale=1'\r\n },\r\n {\r\n 'http-equiv': 'x-ua-compatible',\r\n content: 'ie=edge,chrome=1'\r\n },\r\n {\r\n name: 'theme-color',\r\n content: '#ffffff'\r\n }\r\n ],\r\n\r\n link: [\r\n {\r\n rel: 'shortcut icon',\r\n type: 'image/x-icon',\r\n href: '/favicon.ico'\r\n },\r\n {\r\n rel: 'apple-touch-icon',\r\n size: '192x192',\r\n href: '/mobile-icon.png'\r\n },\r\n {\r\n rel: 'icon',\r\n type: 'image/png',\r\n size: '192x192',\r\n href: '/mobile-icon.png'\r\n },\r\n {\r\n rel: 'icon',\r\n type: 'image/png',\r\n size: '32x32',\r\n href: '/favicon.png'\r\n },\r\n {\r\n rel: 'stylesheet',\r\n href: 'https://fonts.googleapis.com/css?family=Montserrat:300,400,600'\r\n }\r\n ],\r\n\r\n noscript: [{\r\n innerHtml: `\r\n \u003Ch1>Javascript Disabled\u003C/h1>\r\n \u003Cp>It appears that you do not have Javascript enabled. This application relies on Javascript for most of our features.\u003Cp>\r\n \u003Cp>Please enable Javascript and \u003Ca href=\".\">reload\u003C/a> in order to use this site.\u003C/p>\r\n `}]\r\n },\r\n\r\n loading: {\r\n color: '#589d8d'\r\n },\r\n\r\n plugins: [\r\n '~/plugins/global-components.js'\r\n ],\r\n\r\n router: {\r\n base: '/',\r\n linkActiveClass: '',\r\n linkExactActiveClass: 'is-active',\r\n\r\n scrollBehaviour: () => ({\r\n x: 0,\r\n y: 0\r\n }),\r\n\r\n extendRoutes: (routes) => {\r\n routes.forEach((route) => {\r\n route.meta = {\r\n title: route.name\r\n }\r\n })\r\n }\r\n },\r\n\r\n buildDir: resolve(__dirname, '..', 'public'),\r\n srcDir: resolve(__dirname, '..', 'resources')\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/c2492\">#c2492\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2026],{"name":2027,"color":2028},"2.x","d4c5f9",2868,"global components non rendered properly on production build?","2023-01-18T16:09:43Z","https://github.com/nuxt/nuxt/issues/2868",0.6931519,{"description":2035,"labels":2036,"number":2037,"owner":1985,"repository":1986,"state":2010,"title":2038,"updated_at":2039,"url":2040,"score":2041},"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.6971401,{"description":2043,"labels":2044,"number":2037,"owner":1985,"repository":2046,"state":2010,"title":2047,"updated_at":2048,"url":2049,"score":2041},"### 🆒 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",[2045],{"name":1996,"color":1997},"scripts","Google Maps: Add option to disabled placeholder","2024-09-03T15:45:42Z","https://github.com/nuxt/scripts/issues/201",{"description":2051,"labels":2052,"number":2062,"owner":1985,"repository":1985,"state":2010,"title":2063,"updated_at":2064,"url":2065,"score":2066},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.5.0\r\n- Nitro Version: 2.4.1\r\n- Package Manager: npm@7.17.0\r\n- Builder: vite\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-jblieu-fynag4\n\n### Describe the bug\n\nNuxt can no longer resolve a component if its name starts with its containing folder's name, ex:\r\n\r\ncomponent path: `components/Icon/Icones`\r\n\r\napp.vue:\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CIconIcones />\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nconsole output:\r\n```sh\r\n[Vue warn]: Failed to resolve component: IconIcones 21:27:18\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.\r\n```\n\n### Additional context\n\nThe above example works in Nuxt 3.4.x\n\n### Logs\n\n_No response_",[2053,2056,2059],{"name":2054,"color":2055},"3.x","29bc7f",{"name":2057,"color":2058},"bug","d73a4a",{"name":2060,"color":2061},"🔨 p3-minor","FBCA04",20937,"Regression: Cannot resolve component if its folder's name is a prefix of the component's name","2023-05-19T11:23:25Z","https://github.com/nuxt/nuxt/issues/20937",0.7023549,{"description":2068,"labels":2069,"number":2076,"owner":1985,"repository":1985,"state":2010,"title":2077,"updated_at":2078,"url":2079,"score":2080},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.4\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-jldudq?file=modules%2Fregister-component.js\r\n\r\n### Describe the bug\r\n\r\nI'm importing the \"@tabler/icons-vue\" library and I want to globally register some of the icons so I can show them using as dynamic components via `\u003Ccomponent :is=\"a\" />`\r\n\r\nIf global is set to false everything works as expected and i can render the component using it's name.\r\nSetting global to true throws this error:\r\n\r\n`Uncaught SyntaxError: The requested module '/_nuxt/node_modules/@tabler/icons-vue/dist/esm/tabler-icons-vue.mjs?nuxt_component=async&nuxt_component_name=IconAnalyze' does not provide an export named 'IconAnalyze' (at components.plugin.mjs:1:10)`\r\n\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2070,2071,2072,2075],{"name":2054,"color":2055},{"name":2057,"color":2058},{"name":2073,"color":2074},"components","05B979",{"name":2060,"color":2061},26471,"@nuxt/kit.addComponent fails when using external npm package + global = true","2024-04-03T09:15:37Z","https://github.com/nuxt/nuxt/issues/26471",0.70744115,{"description":2082,"labels":2083,"number":2092,"owner":1985,"repository":1985,"state":2010,"title":2093,"updated_at":2094,"url":2095,"score":2096},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v16.17.0\r\n- Nuxt Version: 3.4.2\r\n- Nitro Version: 2.3.3\r\n- Package Manager: pnpm@7.1.0\r\n- Builder: vite\r\n- User Config: sourcemap, modules\r\n- Runtime Modules: nuxt-icon@0.3.3\r\n- Build Modules: -\r\n\r\n_note:_ same on my windows machine with yarn berry and 18.13.0 node\r\n\r\n### Reproduction\r\n\r\nhttps://codesandbox.io/p/sandbox/cocky-darwin-4sog1x\r\n\r\n1. Try building with global components (`nuxt-icon` module for example). Despite using two lazy components, there is only one file emitted (`toasts`). Also notice `entry` file is `154kb`\r\n2. Comment out `nuxt-icon` module and run build again. Two files for two separate lazy components emitted (`navbar` and `toasts`) and `entry` leaned from `154kb` to `132kb`\r\n\r\n### Describe the bug\r\n\r\nhttps://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/components/templates.ts#L32\r\n\r\nEverything is about this line. If you use in-file components definitions (as was on v3.4.1), all looks good and as it should be. But if you **only import** `lazyGlobalComponents` from `#componets`, `entry` file will grow up, but chunks for lazy components are still there. For example, on my local project i am using `tiptap` and as a result, `entry` file grew from `180kb` to `497kb`. Then, if you use `lazyGlobalComponents` in for loop, `entry` size remains the same `497kb`, but chunks for lazy components are gone. All lazy components ended up in one chunk -_-\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2084,2085,2086,2089],{"name":2054,"color":2055},{"name":2057,"color":2058},{"name":2087,"color":2088},"❗ p4-important","D93F0B",{"name":2090,"color":2091},"performance","E84B77",20439,"Sharing global lazy components from #20259 blow ups `entry` file","2023-04-28T09:14:44Z","https://github.com/nuxt/nuxt/issues/20439",0.70810807,["Reactive",2098],{},["Set"],["ShallowReactive",2101],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"JQ17T0iqqpevUFq3it26idAMUIerQeRZDDdNiakHI1g":-1},"/nuxt/icon/18"]