\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.677267,{"description":1996,"labels":1997,"number":1998,"owner":1988,"repository":1989,"state":1999,"title":2000,"updated_at":2001,"url":2002,"score":2003},"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.45810264,{"description":2005,"labels":2006,"number":2010,"owner":1988,"repository":1988,"state":1999,"title":2011,"updated_at":2012,"url":2013,"score":2014},"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>",[2007],{"name":2008,"color":2009},"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.67630816,{"description":2016,"labels":2017,"number":2021,"owner":1988,"repository":1989,"state":1999,"title":2022,"updated_at":2023,"url":2024,"score":2025},"## 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",[2018],{"name":2019,"color":2020},"bug","d73a4a",165,"Double svg tag when using custom collection","2024-05-28T11:33:20Z","https://github.com/nuxt/icon/issues/165",0.69446176,{"description":2027,"labels":2028,"number":2029,"owner":1988,"repository":1989,"state":1999,"title":2030,"updated_at":2031,"url":2032,"score":2033},"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.7187981,{"description":2035,"labels":2036,"number":2038,"owner":1988,"repository":1988,"state":1999,"title":2039,"updated_at":2040,"url":2041,"score":2042},"I am trying to integrate https://www.npmjs.com/package/vue-svg-loader for loading SVG icons inline as vue components.\r\n\r\nI have the following in my nuxt.config file:\r\n\r\n```\r\n{\r\n test: /\\.(svg)$/,\r\n loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x \r\n }, {\r\n test: /\\.(png|jpe?g|gif|svg)$/,\r\n loader: 'url-loader',\r\n exclude: /(\\/icons)/,\r\n query: {\r\n limit: 10000, // 10KO\r\n name: 'img/[name].[hash].[ext]'\r\n }\r\n}\r\n```\r\n\r\nIt seems that the svg files are still being converted to base64 by the url-loader even though I have excluded the path to the svg directory.\r\n\r\nIs there a different way to overwrite the url-loader to ignore svg files?\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/c1182\">#c1182\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2037],{"name":2008,"color":2009},1332,"Nuxtjs + Vue-svg-loader","2023-01-18T15:41:42Z","https://github.com/nuxt/nuxt/issues/1332",0.7218304,{"description":2044,"labels":2045,"number":2047,"owner":1988,"repository":1988,"state":1999,"title":2048,"updated_at":2049,"url":2050,"score":2051},"Hi!\r\n\r\nWill you be adding support for SVG files via something like https://github.com/visualfanatic/vue-svg-loader ?\r\n\r\nI tried installing it and adding the loader in `nuxt.config.js`:\r\n\r\n```\r\nbuild: {\r\n extend (config) {\r\n loaders: [{\r\n test: /\\.svg$/,\r\n loader: 'vue-svg',\r\n }]\r\n }\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/c134\">#c134\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2046],{"name":2008,"color":2009},156,"Handle SVG files","2023-01-18T15:38:31Z","https://github.com/nuxt/nuxt/issues/156",0.72319233,{"description":2053,"labels":2054,"number":2061,"owner":1988,"repository":1988,"state":1999,"title":2062,"updated_at":2063,"url":2064,"score":2065},"**Summary (generated)**:\r\n\r\nAn issue report is being submitted about a problem with accessing assets in the public folder after updating the Nuxt version from 3.11.x to 3.12.x. The issue occurs when trying to access assets in the public folder located under the src folder. Despite reconfiguring the nuxt-config.ts file, the problem persists. The issue has not been tested in production mode, but the user can no longer see images in the assets tab of the Nuxt devtools.\r\n\r\n\u003Chr>\r\n\r\n### Environment\r\n\r\nDevelopment\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/nicholas5538/portfolio-vue/pull/51\r\n\r\n### Describe the bug\r\n\r\nI can no longer access my assets in the public folder when I updated the nuxt version from `3.11.x` to `3.12.x`. My public folder is under the src folder, I have tried to reconfigure `nuxt-config.ts` but to no avail.\r\n\r\nI have not tested this in production mode, but I can no longer see my images under the assets tab on the nuxt devtools.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n",[2055,2058],{"name":2056,"color":2057},"3.x","29bc7f",{"name":2059,"color":2060},"pending triage","E99695",27661,"Having issues accessing the images stored under src/public directory","2024-06-17T10:51:58Z","https://github.com/nuxt/nuxt/issues/27661",0.72467476,{"description":2067,"labels":2068,"number":2072,"owner":1988,"repository":1989,"state":1999,"title":2073,"updated_at":2074,"url":2075,"score":2076},"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.",[2069],{"name":2070,"color":2071},"question","d876e3",60,"Why `components/global` exactly?","2023-03-13T14:50:53Z","https://github.com/nuxt/icon/issues/60",0.72514284,{"description":2078,"labels":2079,"number":2081,"owner":1988,"repository":1988,"state":1999,"title":2082,"updated_at":2083,"url":2084,"score":2085},"\r\n\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/c1084\">#c1084\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2080],{"name":2008,"color":2009},1229,"Can't load svg file in nuxt version 1.0.0-rc3","2023-01-18T15:40:55Z","https://github.com/nuxt/nuxt/issues/1229",0.72528154,["Reactive",2087],{},["Set"],["ShallowReactive",2090],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"hYpflmSCSRC8zBuG7Noh6lnemSh34ZJHkOqR5DcYmIQ":-1},"/nuxt/scripts/239"]