\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?",[2907],{"name":2908,"color":2909},"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":2919,"labels":2920,"number":2921,"owner":2911,"repository":2912,"state":2913,"title":2922,"updated_at":2923,"url":2924,"score":2925},"I'm using only custom icon collections via customCollections, but when clientBundle.scan is enabled, the build includes thousands of icons from unrelated collections in the final bundle (icons.json). This happens even though no other icon sets are used anywhere in the project. I expect the bundle to include only the icons I actually use from my defined collections.\n\n\n\nThis is the request that happens at the start of the app, loading nearly 8,000 icons, while my custom icon set only has 60 icons. How can I configure the bundler or Nuxt Icon so that only these 60 icons are included in the final bundle instead of the entire collection?",[],410,"@nuxt/icon includes unrelated icons in icons.json when only using customCollections with scan: true","2025-06-30T17:38:24Z","https://github.com/nuxt/icon/issues/410",0.6762782,{"description":2927,"labels":2928,"number":2935,"owner":2911,"repository":2936,"state":2913,"title":2937,"updated_at":2938,"url":2939,"score":2940},"### Description\n\nHello.\n\nIs it possible to make a collection of local custom icons for Vue, as described in the documentation section for Nuxt?",[2929,2932],{"name":2930,"color":2931},"question","d876e3",{"name":2933,"color":2934},"v3","49DCB8",4298,"ui","Custom icon collection.","2025-06-05T23:30:41Z","https://github.com/nuxt/ui/issues/4298",0.70191026,{"description":2942,"labels":2943,"number":2944,"owner":2911,"repository":2912,"state":2913,"title":2945,"updated_at":2946,"url":2947,"score":2948},"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":2950,"labels":2951,"number":2952,"owner":2911,"repository":2912,"state":2953,"title":2954,"updated_at":2955,"url":2956,"score":2957},"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":2959,"labels":2960,"number":2964,"owner":2911,"repository":2911,"state":2953,"title":2965,"updated_at":2966,"url":2967,"score":2968},"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>",[2961],{"name":2962,"color":2963},"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":2970,"labels":2971,"number":2975,"owner":2911,"repository":2912,"state":2953,"title":2976,"updated_at":2977,"url":2978,"score":2979},"## 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",[2972],{"name":2973,"color":2974},"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":2981,"labels":2982,"number":2983,"owner":2911,"repository":2912,"state":2953,"title":2984,"updated_at":2985,"url":2986,"score":2987},"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":2989,"labels":2990,"number":2994,"owner":2911,"repository":2911,"state":2953,"title":2995,"updated_at":2996,"url":2997,"score":2998},"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>",[2991,2993],{"name":2908,"color":2992},"8DEF37",{"name":2962,"color":2963},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":3000,"labels":3001,"number":3003,"owner":2911,"repository":2911,"state":2953,"title":3004,"updated_at":3005,"url":3006,"score":3007},"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>",[3002],{"name":2962,"color":2963},2764,"svg-sprite-loader and nuxt?","2023-01-18T16:02:37Z","https://github.com/nuxt/nuxt/issues/2764",0.7148513,["Reactive",3009],{},["Set"],["ShallowReactive",3012],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fhYpflmSCSRC8zBuG7Noh6lnemSh34ZJHkOqR5DcYmIQ":-1},"/nuxt/scripts/239"]