method to call the local SVG.\nI'm using .icon { color: var(--neutral); } to control the color, but the icon is still always black.",[],423,"nuxt","icon","open","Custom icons cannot change color and the overlay svg color is still black","2025-08-23T07:09:20Z","https://github.com/nuxt/icon/issues/423",0.6734112,{"description":3143,"labels":3144,"number":3145,"owner":3135,"repository":3136,"state":3137,"title":3146,"updated_at":3147,"url":3148,"score":3149},"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.7129277,{"description":3151,"labels":3152,"number":3153,"owner":3135,"repository":3136,"state":3137,"title":3154,"updated_at":3155,"url":3156,"score":3157},"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.72420996,{"description":3159,"labels":3160,"number":3161,"owner":3135,"repository":3136,"state":3137,"title":3162,"updated_at":3163,"url":3164,"score":3165},"I'm using icons library on Nuxt UI (still I don't know whose issue this is) for my Nuxt project which uses Tailwind v4 , and I set up some custom icons through a JSON file:\n\n```\n{\n \"icons\": {\n \"arrow-small-right\": {\n \"body\": \"\u003Cpath fill=\\\"currentColor\\\" d=...\n },\n \"auction\": {\n \"body\": \"\u003Cpath fill=\\\"currentColor\\\" d=...\n },\n...\n }\n}\n```\n\n```\n// nuxt.config.ts\n\nimport customIcons from './icons.json' with { type: 'json' };\n\n...\n\n icon: {\n customCollections: [{\n prefix: 'custom',\n icons: customIcons.icons,\n width: 512,\n height: 512,\n }],\n }\n```\n\n\nThey can be imported, however when I try to change their color like `text-white` or `fill-white`, it doesn't work.\n\nWhat I noticed is that icons imported from Iconify have important css rules such as `mask-*`, while mine don't.\nSo how am I supposed to inject these rules inside them, if there is a way?\n\np.s. sorry for creating my issue without completing it",[],402,"Can't apply color to custom icons","2025-06-09T07:06:52Z","https://github.com/nuxt/icon/issues/402",0.72815955,{"description":3167,"labels":3168,"number":3169,"owner":3135,"repository":3136,"state":3170,"title":3171,"updated_at":3172,"url":3173,"score":3174},"I have tried every method such as add \u003Cfill=\"XXX\">\u003Ccolor=\"XXX\"> in css code globally,add code \"fill= currentcolor\" in svg,add file\"app.config.ts\",but the icon color no change in black .\nI use local icons, and this situation will not occur with non-local icons.\nCan anyone tell me what causes this?\nThe version of Nuxt-Icon is v1.15.0 (latest).",[],415,"closed","Why my Nuxt-Icon color cannot able to change color?","2025-07-19T01:13:30Z","https://github.com/nuxt/icon/issues/415",0.67934144,{"description":3176,"labels":3177,"number":3184,"owner":3135,"repository":3135,"state":3170,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### 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_",[3178,3181],{"name":3179,"color":3180},"3.x","29bc7f",{"name":3182,"color":3183},"pending triage","E99695",25005,"Href use svg symbol","2024-01-02T14:01:38Z","https://github.com/nuxt/nuxt/issues/25005",0.6981386,{"description":3190,"labels":3191,"number":3195,"owner":3135,"repository":3135,"state":3170,"title":3196,"updated_at":3197,"url":3198,"score":3199},"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>",[3192],{"name":3193,"color":3194},"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.69957143,{"description":3201,"labels":3202,"number":3204,"owner":3135,"repository":3135,"state":3170,"title":3205,"updated_at":3206,"url":3207,"score":3208},"Finally found a bug that was hiding from me for some months now 🔍\r\nPerhaps related to #1460.\r\n\r\nI have some SVG components like this, really just a pug SVG:\r\n\r\n```vue\r\n\u003Ctemplate lang=\"pug\">\r\nsvg.a(class='car', xmlns='http://www.w3.org/2000/svg', width='440', height='440', viewbox='0 0 440 440')\r\n style.\r\n .a{stroke:null;vector-effect:non-scaling-stroke;}.b{stroke:null;}.c{fill:#8e8e8e;stroke:null;}\r\n metadata.b image/svg+xml\r\n defs.b\r\n clippath.a(clippathunits='userSpaceOnUse')\r\n path.a(d='m0 2400 2400 0 0-2400-2400 0 0 2400z')\r\n g.b\r\n title.b background\r\n rect(height='442', width='442', y='-1', x='-1', style='fill:none;stroke:null')\r\n g.b\r\n title.b Layer 1\r\n g.b\r\n path.c(d='m72.2 72.9c-13.6 13.6-13.5 35.5 0 49.1 13.6 13.6 35.5 13.6 49.1 0 13.6-13.6 13.6-35.5 0-49.1-13.6-13.6-35.5-13.6-49.1 0m80.1-28.8 30.1 30.1c2.2 2.2 2.2 5.9 0 8.1-27.5 27.5 5.9 71.1 26.1 91.3l73.7 73.7c9.8 9.8 9.8 25.8 0 35.6-9.8 9.8-25.8 9.8-35.6 0l-73.7-73.7c-20.2-20.2-63.7-53.6-91.3-26.1-2.2 2.2-5.9 2.2-8.1 0l-30.1-30.1 5.6-5.6-2-2-5.6 5.6-29.8-29.8c-2.2-2.2-2.2-5.9 0-8.1l12-12c-2.3-20.2 4.3-41.3 19.9-56.8 15.5-15.5 36.6-22.1 56.8-19.9l12-12c2.2-2.2 5.9-2.2 8.1 0l29.8 29.8-5.6 5.6 2 2 5.6-5.6z')\r\n g.b\r\n path(d='m396.1 275.6-120.6 120.6c-1.5 1.5-4.1 1.5-5.6 0l-5.6-5.6c-1.5-1.5-1.5-4.1 0-5.6l120.6-120.6c1.5-1.5 4.1-1.5 5.6 0l5.6 5.6c1.5 1.5 1.5 4.1 0 5.6m-16.8-16.8-120.6 120.6c-1.5 1.5-4.1 1.5-5.6 0l-78.5-78.5c-1.5-1.5-1.5-4.1 0-5.6l120.6-120.6c1.5-1.5 4.1-1.5 5.6 0l78.5 78.5c1.5 1.5 1.5 4.1 0 5.6m39.3 39.3-120.6 120.6c-1.5 1.5-4.1 1.5-5.6 0l-11.2-11.2c-1.5-1.5-1.5-4.1 0-5.6l120.6-120.6c1.5-1.5 4.1-1.5 5.6 0l11.2 11.2c1.5 1.5 1.5 4.1 0 5.6', style='fill:#ff3232;stroke:null')\r\n g.b\r\n path.c(d='m281 248.6c-9.1-9.1-23.8-9.1-32.9 0-9.1 9.1-9.1 23.8 0 32.9 9.1 9.1 23.8 9.1 32.9 0 9.1-9.1 9.1-23.8 0-32.9')\r\n\u003C/template>\r\n\r\n\u003Cstyle lang=\"scss\" scoped>\r\nsvg.car {\r\n transform: rotate(-90deg) !important;\r\n margin-top: 2px !important;\r\n}\r\n\u003C/style>\r\n```\r\n\r\nThe problem occurs when the component gets inserted into the html. Some \"optimization engine\" changes the `viewBox` attribute of the SVG element to lowercase. The result: The `viewBox` attribute is ignored by the browser.\r\nThis issue sometimes disappears only to reappear again the next time I run `yarn dev`.\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/c2131\">#c2131\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3203],{"name":3193,"color":3194},2456,"SVGs generated by NUXT are broken (viewBox attribute)","2023-01-18T15:55:18Z","https://github.com/nuxt/nuxt/issues/2456",0.70018315,{"description":3210,"labels":3211,"number":3213,"owner":3135,"repository":3135,"state":3170,"title":3214,"updated_at":3215,"url":3216,"score":3217},"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>",[3212],{"name":3193,"color":3194},1332,"Nuxtjs + Vue-svg-loader","2023-01-18T15:41:42Z","https://github.com/nuxt/nuxt/issues/1332",0.7054589,{"description":3219,"labels":3220,"number":3223,"owner":3135,"repository":3135,"state":3170,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### Version\n\n[v1.4.2](https://github.com/nuxt.js/releases/tag/v1.4.2)\n\n### Reproduction link\n\n[https://github.com/agrajak/nuxt_text_recruit](https://github.com/agrajak/nuxt_text_recruit)\n\n### Steps to reproduce\n\nnuxt generate.\nmy static website is hosted in https://agrajak-8d93e.firebaseapp.com/\n\n\n### What is expected ?\n\nIn pages/index.vue, When I see my site with Chrome Developer Tools, Every \u003Cfont-awesome-icon> should be rendered to \u003Csvg ~~~> \n\n\n\n\n\n### What is actually happening?\n\nsome of \u003Cfont-awesome-icon> are rendered to \u003Csvg ~>(in .sticky-nav, you can see it when you scroll down) \nand the others are still rendered to \u003Cfont-awesome-icon> and also show nothing. (in top component)\n\n\n\n\n\n\n### Additional comments?\n\nSite works pretty well in nuxt start.\nI also checked turning off SSR options in nuxt.config.js\n\n {src: '~plugins/fullpage', ssr: false}\nand font-awesome librarys are declared in plugins/fullpage.js\n\nIf this issue is not a bug, just let me know how to fix it.\nthank you.\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7640\">#c7640\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3221,3222],{"name":3182,"color":3183},{"name":3193,"color":3194},3808,"nuxt generate doesn't render every components","2023-01-22T15:30:05Z","https://github.com/nuxt/nuxt/issues/3808",0.7151053,["Reactive",3229],{},["Set"],["ShallowReactive",3232],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fB_-DvW83LR4CeaPEKpzc6FEz8Zmf16svzkefYZvAxY8":-1},"/nuxt/icon/106"]