\n```\n\nlooks clean but I can't increase the touch target to 48x48 unless I manually recreate the button content and wrap the icon with a span\nsame with the close button in `\u003CUSlideover>`\nthere's no way to make it more thumb-friendly out of the box\n\n### idea\nmaybe you could include an optional invisible span inside those components\nposition absolute\ncentered\nwe could then style it using `:ui`\nlike\n\n```js\n:ui=\"{ touch: 'size-12' }\"\n```\n\nor even a simple `touchTarget: true` option that adds a 48x48 span behind the icon\n\n### benefits\nbetter usability on mobile\nkeeps component usage clean\nno need for negative margins or layout hacks\nworks nicely with `pointer: coarse` media query\n\nthanks for all your great work with nuxt ui\nwould love to see this added\n\n\n\n### EDIT 1\n\nTo create the same button effect like in the video:\n\n \u003CUButton\n color=\"white\"\n variant=\"ghost\"\n aria-label=\"Open menu\"\n class=\"relative flex items-center justify-center p-0 md:hidden\"\n @click=\"open = true\"\n >\n \u003Cspan class=\"absolute size-12 pointer-coarse:hidden\"/>\n \u003CUIcon name=\"lucide:menu\" class=\"text-white size-7\" />\n \u003C/UButton>\n\nI think it's important that NuxtUI focus on the target touch recommendation of at least 44px x 44px ",[1984,1987,1990],{"name":1985,"color":1986},"enhancement","a2eeef",{"name":1988,"color":1989},"v3","49DCB8",{"name":1991,"color":1992},"triage","ffffff",3912,"nuxt","ui","open","Add optional touch target span inside interactive components like \u003CUSlideover> close button and \u003CUButton> icons","2025-04-16T03:12:53Z","https://github.com/nuxt/ui/issues/3912",0.78458524,{"description":2002,"labels":2003,"number":2004,"owner":1994,"repository":2005,"state":1996,"title":2006,"updated_at":2007,"url":2008,"score":2009},"Hello,\n\nI'm using NuxtUI with Iconify and four collections: Material Symbols, Heroicons, let's icon and Simple Icons.\n\n\n\n\nHowever, after installing these collections and building my project, the generated packages are several megabytes in size. These packages take up about 80% of my project size, which heavily impacts performance.\n\n\n\n\n\n\ntotal size of my project :\n\n\n\nI’d like to:\n\nImport only the specific icons I use from these collections instead of including everything.\nKnow if there’s a built-in way to achieve this in Iconify/nuxt-icon or any recommended approach.\n\n",[],341,"icon","Reduce Iconify Package Size in NuxtUI – Import Only Needed Icons","2025-02-18T20:16:51Z","https://github.com/nuxt/icon/issues/341",0.7891216,{"description":2011,"labels":2012,"number":2013,"owner":1994,"repository":2005,"state":2014,"title":2015,"updated_at":2016,"url":2017,"score":2018},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v21.7.1\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.5\r\n- Package Manager: bun@1.1.0\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: @nuxt/content@2.12.1, nuxt-icon@0.6.10\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nGitHub repo here: https://github.com/kbrgmn/nuxt-content-icon-reproduction (as the browser freezes/crashes, stackblitz does not work well here)\r\n\r\nVery minimal reproduction:\r\n- a single page `[...slug].vue`:\r\n```vue\r\n\u003Ctemplate>\r\n \u003CContentDoc/>\r\n\u003C/template>`)\r\n```\r\n- 2 components\r\n\r\nthe first of which is:\r\n```vue\r\n\u003Ctemplate>\r\n \u003CIcon name=\"heroicons:information-circle\"/>\r\n\u003C/template>\r\n```\r\n\r\nthe second component is:\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cp>Different component here\u003C/p>\r\n \u003Cdiv>\r\n \u003Cslot/>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n- 1 single simple content markdown page using the two components:\r\n```md\r\n# Issue reproduction\r\n\r\nFirst component (icon):\r\n::ComponentWithIcon\r\n::\r\n\r\n::SecondComponent\r\nWe have some more content here\r\n- nsetetur sadipscing elitr,\r\n::\r\n```\r\n\r\n### Describe the bug\r\n\r\nWhen the page is visited (in dev mode with `bun dev`), it completely freezes up (both Firefox and Chrome), \r\nwith no text being selectable, developer console not opening if it hasn't already been opened or opening blank, browser not even closing properly, and this warning is printed hundreds of times repeatedly in the console:\r\n```\r\nAvoid app logic that relies on enumerating keys on a component instance.\r\nThe keys will be empty in production mode to avoid performance overhead.\r\n```\r\n(the reproduction does not have a single \u003Cscript> tag in the whole repository)\r\n\r\nHowever, this issue does not occur when a production build is being done with `bun run build`.\r\n**When the first component (the nuxt-icon) is removed, the issue does not occur.**\r\n\r\n### Logs\r\n\r\nNo warnings / errors are outputted in the terminal where `nuxt dev` is run.\r\n",[],150,"closed","Freezes up in Nuxt Content","2024-06-26T21:21:31Z","https://github.com/nuxt/icon/issues/150",0.70899886,{"description":2020,"labels":2021,"number":2022,"owner":1994,"repository":2005,"state":2014,"title":2023,"updated_at":2024,"url":2025,"score":2026},"I am using nuxt/icon as part of nuxt/ui (v3 alpha), and I am getting constant warnings about failing to load icons:\n```\n[Icon] failed to load icon `lucide:refresh-cw`\n```\nThis is coming up in my console 8+ times for a single page load, for example. I'm also facing an issue where upon using a new icon I've never loaded before, it won't load or appear at all, with the same warning occuring. It takes fully restarting the Nuxt app for the icon to then appear and become \"loadable\", however I am still facing this warning with the `refresh-cw` icon.\n\nI have the icon collection installed locally and it is detected upon load:\n```bash\nℹ Nuxt Icon server bundle mode is set to local 21:37:28\n✔ Nuxt Icon discovered local-installed 1 collections: lucide 21:37:31\nℹ Nuxt Icon client bundle consist of 8 icons with 1.73KB(uncompressed) in size\n```\nAnd I searched other issues, and have tried the following in my nuxt.config.ts as well to little help:\n```ts\n icon: {\n clientBundle: {\n scan: true,\n sizeLimitKb: 256\n }\n }\n```\nI feel like at this point it's a bug with nuxt/icon, or something is up with nuxt/ui that is causing these issues. Hoping for some help with this or to get it fixed if it is a bug.",[],339,"Constant \"failed to load icon\" warnings even with locally installed collection","2025-02-28T06:56:28Z","https://github.com/nuxt/icon/issues/339",0.72093004,{"description":2028,"labels":2029,"number":2036,"owner":1994,"repository":2037,"state":2014,"title":2038,"updated_at":2039,"url":2040,"score":2041},"I'm currently trying to add the adobe font \"Elena\" to my project, without success. \nMy searched led me to [#187](https://github.com/nuxt/fonts/issues/187) and it's fix [#192](https://github.com/nuxt/fonts/pull/192) but to no avail.\n\nwould kindly appreciate your help :)\n\nmy nuxt.config.ts fonts //config:\n\n```js\nfonts: {\n defaults: {\n weights: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n styles: ['normal', 'italic'],\n },\n adobe: {\n id: ['xxxxxx'],\n },\n fonts: {\n experimental: {\n processCSSVariables: true, // \u003C-- tested if that made a difference\n },\n },\n families: [\n {\n name: 'Industry',\n provider: 'adobe',\n fallbacks: ['Oswald', 'Arial', 'Helvetica', 'sans-serif'],\n },\n {\n name: 'Elena Web Basic', \u003C--- tested \"Elena\", \"Elena Basic\", \"Elena-Web-Basic\"\n provider: 'adobe',\n fallbacks: ['Georgia', 'Times New Roman', 'serif'],\n },\n {\n name: 'Oswald',\n provider: 'google',\n fallbacks: ['Roboto Sans', 'Arial', 'Helvetica', 'sans-serif'],\n },\n ],\n },\n```\n\n```js\nTailwind Config:\n\n`extend: {\n fontFamily: {\n display: ['Industry', 'Oswald', 'Arial', 'Helvetica', 'sans-serif'],\n serif: ['\"Elena Web Basic\"', 'Georgia', 'Times New Roman', 'serif'], //\u003C-- also tried \"Elena\", \"Elena Basic\", \"Elena-Web-Basic\"\n },`\n```\n\nthe typekit css:\n\n```css\n@import url(\"https://p.typekit.net/p.css?s=1&k=dou8fmt&ht=tk&f=25310.25314.14437.14439&a=8358342&app=typekit&e=css\");\n\n@font-face {\nfont-family:\"industry\";\nsrc:url(\"https://use.typekit.net/af/99114e/000000000000000077519a43/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"woff2\"),url(\"https://use.typekit.net/af/99114e/000000000000000077519a43/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"woff\"),url(\"https://use.typekit.net/af/99114e/000000000000000077519a43/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"opentype\");\nfont-display:auto;font-style:normal;font-weight:700;font-stretch:normal;\n}\n\n@font-face {\nfont-family:\"industry\";\nsrc:url(\"https://use.typekit.net/af/e15078/000000000000000077519a3f/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\") format(\"woff2\"),url(\"https://use.typekit.net/af/e15078/000000000000000077519a3f/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\") format(\"woff\"),url(\"https://use.typekit.net/af/e15078/000000000000000077519a3f/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\") format(\"opentype\");\nfont-display:auto;font-style:normal;font-weight:600;font-stretch:normal;\n}\n\n@font-face {\nfont-family:\"elena-web-basic\";\nsrc:url(\"https://use.typekit.net/af/5d3cbc/00000000000000007735daea/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"woff2\"),url(\"https://use.typekit.net/af/5d3cbc/00000000000000007735daea/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"woff\"),url(\"https://use.typekit.net/af/5d3cbc/00000000000000007735daea/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\") format(\"opentype\");\nfont-display:auto;font-style:normal;font-weight:700;font-stretch:normal;\n}\n\n@font-face {\nfont-family:\"elena-web-basic\";\nsrc:url(\"https://use.typekit.net/af/d89e6b/00000000000000007735daec/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff2\"),url(\"https://use.typekit.net/af/d89e6b/00000000000000007735daec/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"woff\"),url(\"https://use.typekit.net/af/d89e6b/00000000000000007735daec/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\") format(\"opentype\");\nfont-display:auto;font-style:normal;font-weight:400;font-stretch:normal;\n}\n\n.tk-industry { font-family: \"industry\",sans-serif; }\n.tk-elena-web-basic { font-family: \"elena-web-basic\",serif; }`\n\n```",[2030,2033],{"name":2031,"color":2032},"needs reproduction","C94E53",{"name":2034,"color":2035},"closed-by-bot","ededed",340,"fonts","adobe fonts with differing name information not loading","2024-10-31T02:02:15Z","https://github.com/nuxt/fonts/issues/340",0.7390553,{"description":2043,"labels":2044,"number":2048,"owner":1994,"repository":2005,"state":2014,"title":2049,"updated_at":2050,"url":2051,"score":2052},"This error lights in my IDE (VS Code under Ubuntu) to icon.vue file from node_modules/nuxt-icon/dust/runtime.\r\nI do not know if it is precisely an error, cos' everything works fine in the nuxt app.\r\nMaybe all auto imports loaded normally from my nuxt instance...\r\n\r\npackage.json\r\n```\r\n...\r\n\"devDependencies\": {\r\n \"@nuxtjs/tailwindcss\": \"^6.1.3\",\r\n \"nuxt\": \"3.0.0\",\r\n \"nuxt-icon\": \"^0.1.8\"\r\n }\r\n...\r\n```",[2045],{"name":2046,"color":2047},"question","d876e3",31,"Cannot find module '#imports' or its corresponding type declarations.ts(2307)","2024-03-20T16:51:51Z","https://github.com/nuxt/icon/issues/31",0.75999,{"description":2054,"labels":2055,"number":2048,"owner":1994,"repository":2056,"state":2014,"title":2057,"updated_at":2058,"url":2059,"score":2052},"Not exactly sure what's going on here, happens on build and when consumed.",[],"scripts","Failed to parse static properties from plugin `.nuxt/modules/@nuxt-scripts.mjs`","2024-07-04T07:36:54Z","https://github.com/nuxt/scripts/issues/31",{"description":2061,"labels":2062,"number":2063,"owner":1994,"repository":2037,"state":2014,"title":2064,"updated_at":2065,"url":2066,"score":2067},"#### Output of `npx nuxi info`:\r\n\r\n```\r\nNuxt project info: \r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v20.14.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: pnpm@9.1.4\r\n- Builder: -\r\n- User Config: devtools, modules, fonts\r\n- Runtime Modules: @nuxt/fonts@0.7.0\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n#### My custom provider in `~/providers/ComputerModernFontProvider.ts`:\r\n\r\n```ts\r\nimport { defineFontProvider } from '@nuxt/fonts/utils'\r\n\r\nexport default defineFontProvider({\r\n async resolveFontFaces (fontFamily, defaults) {\r\n if (fontFamily === 'Computer Modern') {\r\n return { \r\n fonts: [\r\n { \r\n weight: 400,\r\n style: 'normal',\r\n src: { url: '\u003Clink-to-cdn>', format: 'otf' },\r\n },\r\n { \r\n weight: 400,\r\n style: 'italic',\r\n src: { url: '\u003Clink-to-cdn>', format: 'otf' },\r\n },\r\n { \r\n weight: 700,\r\n style: 'normal',\r\n src: { url: '\u003Clink-to-cdn>', format: 'otf' },\r\n },\r\n ]\r\n }\r\n }\r\n }\r\n})\r\n```\r\n\r\n#### Picture of the Error:\r\n\r\n\r\n\r\n#### Steps & Contribution\r\n\r\nI find this super weird since `./utils` **is** already defined in the `package.json` [here](https://github.com/nuxt/fonts/blob/8a00c3b0771bbcf0cd34c9e2a854eb77b501d8ff/package.json#L17).\r\nIf someone could give me some pointers towards the solution, I'd happily create a PR.\r\nThank you in advance.\r\n",[],170,"Bug when importing `defineFontProvider`: Package subpath './utils' is not defined by \"exports\"","2024-09-23T12:06:54Z","https://github.com/nuxt/fonts/issues/170",0.7699198,{"description":2069,"labels":2070,"number":2071,"owner":1994,"repository":2005,"state":2014,"title":2072,"updated_at":2073,"url":2074,"score":2075},"Hey, I am using nuxt with custom base-path and my custom collection isn't loading on deployed app. Is there a way to change base path for the icons?",[],163,"Add support for customized base path","2024-05-25T10:23:25Z","https://github.com/nuxt/icon/issues/163",0.7739701,{"description":2077,"labels":2078,"number":1993,"owner":1994,"repository":1994,"state":2014,"title":2082,"updated_at":2083,"url":2084,"score":2000},"Hi.\r\nWhen im adding anywhere `if (process.browser) {\r\n console.log('BROWSER');\r\n }`\r\nIm getting an error: \r\n`error in ./layouts/default.vue\r\n\r\nSyntax Error: Unexpected token, expected , (21:13)\r\n\r\n19 | // },\r\n 20 |\r\n 21 | if (process.browser) {\r\n | ^\r\n 22 | // const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')\r\n 23 | // Vue.use(VueAwesomeSwiper)\r\n 24 | console.log('BROWSER');`\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/c7768\">#c7768\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2079],{"name":2080,"color":2081},"2.x","d4c5f9","Cant resolve process.vrowser","2023-01-18T16:26:43Z","https://github.com/nuxt/nuxt/issues/3912",["Reactive",2086],{},["Set"],["ShallowReactive",2089],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"5jeeVCxB84EPhRGburQpCm9Eei2odolhNNREJgNn6vg":-1},"/nuxt/fonts/105"]