\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.7052573,{"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.6542652,{"description":2016,"labels":2017,"number":2021,"owner":1985,"repository":1985,"state":2010,"title":2022,"updated_at":2023,"url":2024,"score":2025},"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>",[2018],{"name":2019,"color":2020},"2.x","d4c5f9",3203,"svg can't be used in nuxt.js","2023-01-18T16:23:47Z","https://github.com/nuxt/nuxt/issues/3203",0.6577243,{"description":2027,"labels":2028,"number":2029,"owner":1985,"repository":1986,"state":2010,"title":2030,"updated_at":2031,"url":2032,"score":2033},"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.671304,{"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.6833227,{"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":2059,"owner":1985,"repository":1985,"state":2010,"title":2060,"updated_at":2061,"url":2062,"score":2063},"### 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_",[2053,2056],{"name":2054,"color":2055},"3.x","29bc7f",{"name":2057,"color":2058},"pending triage","E99695",25005,"Href use svg symbol","2024-01-02T14:01:38Z","https://github.com/nuxt/nuxt/issues/25005",0.683513,{"description":2065,"labels":2066,"number":2029,"owner":1985,"repository":1985,"state":2010,"title":2070,"updated_at":2071,"url":2072,"score":2073},"Hi, I am trying to get this awesome framework to work with [vue-awesome](https://github.com/Justineo/vue-awesome) but I can't manage to do it.\r\n\r\nI added this to my nuxt.config.js\r\n`build: {\r\n\t\tvendor: ['vue-awesome']\r\n\t}`\r\n\r\nI added this to my default.vue\r\n\r\n`import Icon from \"vue-awesome/components/Icon.vue\"; \r\n\timport \"vue-awesome/icons\"; `\r\n\r\n`\r\n\texport default {\r\n\t\tcomponents: {\r\n\t\t\tIcon\r\n\t\t}\r\n\t}`\r\n\r\nHowever when I put icon components in my pages, it does not show, but is visible in the chrome dev tools.\r\n\r\nIs there a proper way to do this?\r\n\r\nI am new to Nuxt.\r\nThanks for your help.\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/c147\">#c147\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2067,2069],{"name":2007,"color":2068},"cc317c",{"name":2019,"color":2020},"Work with vue-awesome","2023-01-18T15:38:32Z","https://github.com/nuxt/nuxt/issues/174",0.68628466,{"description":2075,"labels":2076,"number":2077,"owner":1985,"repository":1986,"state":2010,"title":2078,"updated_at":2079,"url":2080,"score":2081},"Is it possible to change the `/components/global` directory. I have checked the code of this module, but it seems to me that it could be something that's inside Nuxt 3?\r\n\r\nProposition:\r\n```js\r\n nuxtIcon: {\r\n size: \"16px\",\r\n source: '~/components/icons' // or an array with multiple values\r\n },\r\n```",[],18,"Feature: Possible to change the icons directory","2023-01-19T16:59:35Z","https://github.com/nuxt/icon/issues/18",0.68816805,["Reactive",2083],{},["Set"],["ShallowReactive",2086],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"AKJMmGjDz2N7u_tsTu_TxbR813LvVq5YcltyPpGbKmo":-1},"/nuxt/icon/48"]