\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?",[1984],{"name":1985,"color":1986},"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.7106918,{"description":1996,"labels":1997,"number":1999,"owner":1988,"repository":2000,"state":1990,"title":2001,"updated_at":2002,"url":2003,"score":2004},"### 🆒 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_",[1998],{"name":1985,"color":1986},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.72132444,{"description":2006,"labels":2007,"number":2008,"owner":1988,"repository":1989,"state":1990,"title":2009,"updated_at":2010,"url":2011,"score":2012},"I want to share common icons between projects using nuxt layers. I would prefer to keep my icons in svg files. Unfortunately, the `nuxt-icons` module does not meet my expectations (import all icons), so I decided to use your solution.\r\n\r\nWhen I hold the icon in `/components/global` everything works great. Unfortunately, when I keep this icon in a nuxt layer, I get a string with the name instead of the icon.\r\n\r\nI would also love to be able to use `param-case` in the `name` property.\r\n\r\nReproduction: https://stackblitz.com/edit/github-qddkmm?file=base/nuxt.config.ts",[],48,"Can't use svg icons from nuxt layer","2024-05-07T08:36:47Z","https://github.com/nuxt/icon/issues/48",0.73841804,{"description":2014,"labels":2015,"number":2016,"owner":1988,"repository":1989,"state":2017,"title":2018,"updated_at":2019,"url":2020,"score":2021},"https://stackblitz.com/edit/nuxt-icon-playground-ixa4jk?file=assets%2Fmy-icons%2Ffoo.svg,nuxt.config.ts,app.vue",[],171,"closed","customCollections error","2024-07-18T22:46:21Z","https://github.com/nuxt/icon/issues/171",0.6597791,{"description":2023,"labels":2024,"number":2016,"owner":1988,"repository":2000,"state":2017,"title":2025,"updated_at":2026,"url":2027,"score":2021},"\r\n\r\ncc: @huang-julien ",[],"Google Analytics Logo is wrong","2024-07-21T09:49:37Z","https://github.com/nuxt/scripts/issues/171",{"description":2029,"labels":2030,"number":2031,"owner":1988,"repository":1989,"state":2017,"title":2032,"updated_at":2033,"url":2034,"score":2035},"\r\nhttps://github.com/user-attachments/assets/a864645c-c0eb-4581-885e-effce6bc8ca9\r\nThis SVG file cannot be displayed\r\nBut using this module( https://nuxt.com.cn/modules/icons )Can display normally\r\n",[],242,"Some SVG cannot be displayed","2024-08-27T10:33:55Z","https://github.com/nuxt/icon/issues/242",0.70303154,{"description":2037,"labels":2038,"number":2042,"owner":1988,"repository":1989,"state":2017,"title":2043,"updated_at":2044,"url":2045,"score":2046},"## Project deps\r\n```json\r\n\"nuxt\": \"^3.11.2\",\r\n\"nuxt-icon\": \"^1.0.0-beta.4\"\r\n```\r\n\r\n## Problem \r\nWhen i use custom collection the generated svg code contains double tags something like 👇\r\n\r\n```html\r\n\u003Csvg ...>\r\n \u003Csvg ...>\r\n \u003Cpath ... />\r\n \u003C/svg>\r\n\u003C/svg>\r\n```\r\n\r\n\r\n## Stackblitz \r\n[Reproduction link](https://stackblitz.com/edit/nuxt-starter-6nnfpa?file=app.vue)\r\n\r\n\r\n## Screenshot\r\n\r\n### Svg Mode\r\n\r\n\r\n### Css mode\r\n\r\n\r\n",[2039],{"name":2040,"color":2041},"bug","d73a4a",165,"Double svg tag when using custom collection","2024-05-28T11:33:20Z","https://github.com/nuxt/icon/issues/165",0.7207586,{"description":2048,"labels":2049,"number":1999,"owner":1988,"repository":1989,"state":2017,"title":2050,"updated_at":2051,"url":2052,"score":2004},"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":2054,"labels":2055,"number":2059,"owner":1988,"repository":1988,"state":2017,"title":2060,"updated_at":2061,"url":2062,"score":2063},"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>",[2056],{"name":2057,"color":2058},"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.7214373,{"description":2065,"labels":2066,"number":2067,"owner":1988,"repository":1989,"state":2017,"title":2068,"updated_at":2069,"url":2070,"score":2071},"Installed following the steps [here](https://nuxt.com/modules/icon).\r\n```\r\nnpm install --save-dev nuxt-icon\r\n```\r\nAdded to my `nuxt.config.ts`\r\n```\r\n modules: [\r\n // https://go.nuxtjs.dev/bootstrap\r\n 'bootstrap-vue/nuxt',\r\n // https://go.nuxtjs.dev/pwa\r\n '@nuxtjs/pwa',\r\n // https://go.nuxtjs.dev/content\r\n '@nuxt/content',\r\n // https://nuxt.com/modules/icon\r\n 'nuxt-icon'\r\n ],\r\n```\r\nUsed on a component\r\n```\r\n\u003CIcon name=\"logos:instagram-icon\" />\r\n```\r\n\r\nThe page rendered without the icon and got this on the console.\r\n```\r\n[Vue warn]: Unknown custom element: \u003CIcon> - did you register the component correctly? For recursive components, make sure to provide the \"name\" option.\r\n\r\nfound in\r\n\r\n---> \u003CLayouts/default.vue> at layouts/default.vue\r\n \u003CRoot>\r\n```\r\n\r\n### My dependencies\r\n```\r\n \"dependencies\": {\r\n \"@nuxt/content\": \"^1.0.0\",\r\n \"@nuxtjs/pwa\": \"^3.3.5\",\r\n \"bootstrap\": \"^4.6.2\",\r\n \"bootstrap-vue\": \"^2.22.0\",\r\n \"bootswatch\": \"^5.2.3\",\r\n \"core-js\": \"^3.25.3\",\r\n \"nuxt\": \"^2.15.8\",\r\n \"nuxt-icon\": \"^0.4.0\",\r\n \"vue\": \"^2.7.10\",\r\n \"vue-server-renderer\": \"^2.7.10\",\r\n \"vue-template-compiler\": \"^2.7.10\"\r\n },\r\n \"devDependencies\": {\r\n \"@babel/eslint-parser\": \"^7.19.1\",\r\n \"@nuxtjs/eslint-config\": \"^11.0.0\",\r\n \"@nuxtjs/eslint-module\": \"^3.1.0\",\r\n \"eslint\": \"^8.24.0\",\r\n \"eslint-plugin-nuxt\": \"^4.0.0\",\r\n \"eslint-plugin-vue\": \"^9.5.1\",\r\n \"sass\": \"^1.62.1\",\r\n \"sass-loader\": \"^10.4.1\"\r\n }\r\n```",[],74,"Unknown custom element: \u003CIcon> - did you register the component correctly?","2023-08-07T11:42:06Z","https://github.com/nuxt/icon/issues/74",0.7232305,["Reactive",2073],{},["Set"],["ShallowReactive",2076],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"pOu1kYS4zvU4Nvjnh8YXoDstfGRfM_NSqLF7gbJZ-4I":-1},"/nuxt/icon/162"]