\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?",[2852],{"name":2853,"color":2854},"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.6738774,{"description":2864,"labels":2865,"number":2866,"owner":2856,"repository":2857,"state":2858,"title":2867,"updated_at":2868,"url":2869,"score":2870},"This nuxt-icon module works well in my nuxt3 project, but I found a small problem: \r\n\r\nI have 100 pictures on my home page, then I put such as 'edit' icon and 'love' icon on every pictures , which turn out to be many duplicated characters on the page because of the `path` of every `svg` is very long but they are same `\u003Cpath>`. \r\n\r\nCould it be possible to use `\u003Cuse>` to resolve that problem for ssr when building?",[],66,"Too much duplicated characters if use a same svg icon many times in one page","2023-03-30T02:06:11Z","https://github.com/nuxt/icon/issues/66",0.7271191,{"description":2872,"labels":2873,"number":2874,"owner":2856,"repository":2857,"state":2875,"title":2876,"updated_at":2877,"url":2878,"score":2879},"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",[],239,"closed","Custom Collection with svg files unter public folder?","2024-08-21T22:47:28Z","https://github.com/nuxt/icon/issues/239",0.46006215,{"description":2881,"labels":2882,"number":2886,"owner":2856,"repository":2856,"state":2875,"title":2887,"updated_at":2888,"url":2889,"score":2890},"I archive this with [`svg-sprite-loader`](https://github.com/kisenka/svg-sprite-loader) and some nuxt configs.\r\n1. Create a folder at `assets/svg` and put all your svg files in it.\r\n2. Create custom webpack loader rules in `nuxt.config.js` to handle svg files:\r\n\r\n```javascript\r\nbuild: {\r\n loaders:[\r\n {\r\n test: /\\.svg$/,\r\n include: /assets\\/svg/,\r\n loader: 'svg-sprite-loader?' + JSON.stringify({\r\n name: '[name]',\r\n prefixize: false\r\n })\r\n },\r\n {\r\n test: /\\.(png|jpg|gif|svg)$/,\r\n loader: 'url-loader',\r\n exclude: /assets\\/svg/,\r\n options: {\r\n limit: 1000, // 1K limit\r\n name: 'img/[name].[hash:8].[ext]'\r\n }\r\n }\r\n ]\r\n }\r\n```\r\n3. Create a plugin js file that handle svg files. The `svg-sprite-loader` will then catch all the imported svg files and insert them at the beginning of document body, and this can only be done at browser enviroment, so we will use `process.BROWSER_BUILD` provided by nuxt to make it run only in browser enviroment.\r\n\r\n```javascript\r\n// plugins/svg-sprite-loader.js\r\n// import only in browser\r\nif (process.BROWSER_BUILD) {\r\n // import all svgs\r\n var files = require.context('~assets/svg', false, /\\.svg$/)\r\n files.keys().forEach(files)\r\n}\r\n```\r\n\r\n4. Add `plugins/svg-sprite-loader.js` into `nuxt.config.js` to make it work:\r\n\r\n```javascript\r\nplugins: [\r\n '~plugins/svg-sprite-loader'\r\n ]\r\n```\r\n\r\nwith all above configs, you can use svgs by its filename such as: `\u003Cuse xlink:href=\"#upvote\">\u003C/use>`\r\n\r\nHope this helps! 😄\r\n\r\n_Originally posted by @aprilandjan in https://github.com/nuxt/nuxt.js/issues/156#issuecomment-274330822_\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8434\">#c8434\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2883],{"name":2884,"color":2885},"2.x","d4c5f9",4719,"I archive this with [`svg-sprite-loader`](https://github.com/kisenka/svg-sprite-loader) and some nuxt configs.","2023-01-18T20:08:24Z","https://github.com/nuxt/nuxt/issues/4719",0.6850482,{"description":2892,"labels":2893,"number":2897,"owner":2856,"repository":2857,"state":2875,"title":2898,"updated_at":2899,"url":2900,"score":2901},"## 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",[2894],{"name":2895,"color":2896},"bug","d73a4a",165,"Double svg tag when using custom collection","2024-05-28T11:33:20Z","https://github.com/nuxt/icon/issues/165",0.68656206,{"description":2903,"labels":2904,"number":2905,"owner":2856,"repository":2857,"state":2875,"title":2906,"updated_at":2907,"url":2908,"score":2909},"Following the steps in the document, I expected to use the Icon component to display a custom SVG Icon, but it failed.\r\n\r\nhttps://stackblitz.com/edit/nuxt-icon-playground-t9ezmw?file=app.vue",[],162,"Custom Local Collections invalid","2024-06-12T02:55:17Z","https://github.com/nuxt/icon/issues/162",0.7074587,{"description":2911,"labels":2912,"number":2916,"owner":2856,"repository":2856,"state":2875,"title":2917,"updated_at":2918,"url":2919,"score":2920},"I want to extend the webpack config with the svg-sprite-loader, which looks like:\r\nhttps://github.com/kisenka/svg-sprite-loader/blob/master/examples/browser-sprite/webpack.config.js\r\n\r\nThis conflicts with the url loader in Nuxt:\r\n```\r\n// https://nuxtjs.org/guide/assets/#webpacked\r\n{\r\n test: /\\.(png|jpe?g|gif|svg)$/,\r\n loader: 'url-loader',\r\n query: {\r\n limit: 1000, // 1KO\r\n name: 'img/[name].[hash:7].[ext]'\r\n }\r\n}\r\n```\r\nI get a _svg-sprite-loader exception. 2 rules applies to_ warning and was able to fix it by removing the rule and re-add it with an exclude property:\r\n```\r\nextend(config, { dev, isClient }) {\r\n /**\r\n * Initialise SVG Sprites\r\n */\r\n\r\n // get and remove file loader\r\n const rule = config.module.rules.find(r => r.test.toString() === '/\\\\.(png|jpe?g|gif|svg)$/');\r\n config.module.rules.splice(config.module.rules.indexOf(rule), 1);\r\n\r\n // add it again, but now without 'assets\\/svg'\r\n config.module.rules.push({\r\n test: /\\.(png|jpe?g|gif|svg)$/,\r\n loader: 'url-loader',\r\n exclude: /(assets\\/svg)/,\r\n query: {\r\n limit: 1000, // 1KO\r\n name: 'img/[name].[hash:7].[ext]',\r\n },\r\n });\r\n\r\n config.module.rules.push({\r\n test: /\\.svg$/,\r\n include: [\r\n path.resolve(__dirname, 'assets/svg'),\r\n ],\r\n use: 'svg-sprite-loader',\r\n });\r\n},\r\n```\r\n\r\nThis feels like a dirty hack, but it was the only way to get it working. \r\nCould you add some support to be able to change the default nuxt webpack config or tell me how I could have done it otherwise?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1416\">#c1416\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2913,2915],{"name":2853,"color":2914},"8DEF37",{"name":2884,"color":2885},1584,"Be able to change the default nuxt webpack config","2023-01-18T15:41:59Z","https://github.com/nuxt/nuxt/issues/1584",0.70805365,{"description":2922,"labels":2923,"number":2925,"owner":2856,"repository":2856,"state":2875,"title":2926,"updated_at":2927,"url":2928,"score":2929},"Anyone got https://github.com/kisenka/svg-sprite-loader working with nuxt? If so would u mind showing ur solution/s ? I can't seem to get it working, even looking at previous threads and hacks from last year.\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/c2399\">#c2399\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2924],{"name":2884,"color":2885},2764,"svg-sprite-loader and nuxt?","2023-01-18T16:02:37Z","https://github.com/nuxt/nuxt/issues/2764",0.7148513,{"description":2931,"labels":2932,"number":2933,"owner":2856,"repository":2857,"state":2875,"title":2934,"updated_at":2935,"url":2936,"score":2937},"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.7159484,{"description":2939,"labels":2940,"number":2933,"owner":2856,"repository":2942,"state":2875,"title":2943,"updated_at":2944,"url":2945,"score":2937},"### 🆒 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",[2941],{"name":2853,"color":2854},"scripts","Google Maps: Add option to disabled placeholder","2024-09-03T15:45:42Z","https://github.com/nuxt/scripts/issues/201",["Reactive",2947],{},["Set"],["ShallowReactive",2950],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fhYpflmSCSRC8zBuG7Noh6lnemSh34ZJHkOqR5DcYmIQ":-1},"/nuxt/scripts/239"]