\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?",[2867],{"name":2868,"color":2869},"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":2876,"labels":2877,"number":1998,"owner":2857,"repository":2858,"state":2859,"title":2878,"updated_at":2879,"url":2880,"score":2881},"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":2883,"labels":2884,"number":2888,"owner":2857,"repository":2857,"state":2889,"title":2890,"updated_at":2891,"url":2892,"score":2893},"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>",[2885],{"name":2886,"color":2887},"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":2895,"labels":2896,"number":2900,"owner":2857,"repository":2858,"state":2889,"title":2901,"updated_at":2902,"url":2903,"score":2904},"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.",[2897],{"name":2898,"color":2899},"question","d876e3",60,"Why `components/global` exactly?","2023-03-13T14:50:53Z","https://github.com/nuxt/icon/issues/60",0.6678509,{"description":2906,"labels":2907,"number":2908,"owner":2857,"repository":2858,"state":2889,"title":2909,"updated_at":2910,"url":2911,"score":2912},"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":2914,"labels":2915,"number":2908,"owner":2857,"repository":2917,"state":2889,"title":2918,"updated_at":2919,"url":2920,"score":2912},"### 🆒 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",[2916],{"name":2868,"color":2869},"scripts","Google Maps: Add option to disabled placeholder","2024-09-03T15:45:42Z","https://github.com/nuxt/scripts/issues/201",{"description":2922,"labels":2923,"number":2924,"owner":2857,"repository":2858,"state":2889,"title":2925,"updated_at":2926,"url":2927,"score":2928},"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.68690795,{"description":2930,"labels":2931,"number":2938,"owner":2857,"repository":2857,"state":2889,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\n[StackBlitz](https://stackblitz.com/edit/nuxt-examples-7qpsts?file=pages%2Findex.vue) reproduction\n\n### Describe the bug\n\n[Vue Router warn]: No match found for location with path \"/assets/sprite/gen/svg-symbols.svg/\" in console\r\n\r\nUISvgIcon component that draw icon as svg sprite but after update version of nuxt it's broken. it looks like nuxt doesn't recognize this as a link because other files in the root are opening correctly.\r\n\r\nthis worked until the nuxt version 3.8.2\n\n### Additional context\n\nI'm sorry, I have one more question. After update appeared warn: \r\n`[nuxt] Your project has layouts but the `\u003CNuxtLayout />` component has not been used.`\r\n\r\nthis is also in the same stackblitz. Layout works fine.\r\nExplain me please is this way to do layouts is worng and i have to use App.vue ?\n\n### Logs\n\n_No response_",[2932,2935],{"name":2933,"color":2934},"3.x","29bc7f",{"name":2936,"color":2937},"pending triage","E99695",25005,"Href use svg symbol","2024-01-02T14:01:38Z","https://github.com/nuxt/nuxt/issues/25005",0.689331,{"description":2944,"labels":2945,"number":2956,"owner":2857,"repository":2857,"state":2889,"title":2957,"updated_at":2958,"url":2959,"score":2960},"### 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_",[2946,2947,2950,2953],{"name":2933,"color":2934},{"name":2948,"color":2949},"bug","d73a4a",{"name":2951,"color":2952},"components","05B979",{"name":2954,"color":2955},"🔨 p3-minor","FBCA04",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.6945541,["Reactive",2962],{},["Set"],["ShallowReactive",2965],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fAKJMmGjDz2N7u_tsTu_TxbR813LvVq5YcltyPpGbKmo":-1},"/nuxt/icon/48"]