[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"versions":3,"module-icon":7},{"v3":4,"v4":5,"v2":6},"3.21.8","4.4.8","2.18.1",{"name":8,"description":9,"repo":10,"npm":11,"icon":12,"github":13,"website":13,"learn_more":14,"category":15,"type":16,"maintainers":17,"compatibility":28,"generatedAt":32,"contributors":33,"stats":127,"readme":135},"icon","Icon module for Nuxt with 200,000+ ready to use icons from Iconify.","nuxt/icon","@nuxt/icon","nuxt.svg","https://github.com/nuxt/icon","","UI","official",[18,23],{"name":19,"github":20,"twitter":21,"bluesky":22},"Sébastien Chopin","Atinux","atinux","atinux.com",{"name":24,"github":25,"bluesky":26,"twitter":27},"Anthony Fu","antfu","antfu.me","antfu7",{"nuxt":29,"requires":30,"devtools":31},">=3.0.0",{},"^0.0.0","2026-06-10T00:13:57.640Z",[34,37,40,44,48,52,56,59,63,66,69,72,75,79,82,85,88,91,94,97,100,103,106,109,112,115,118,121,124],{"id":35,"username":25,"contributions":36},11247099,178,{"id":38,"username":21,"contributions":39},904724,59,{"id":41,"username":42,"contributions":43},1385263,"Tahul",10,{"id":45,"username":46,"contributions":47},28706372,"danielroe",9,{"id":49,"username":50,"contributions":51},739984,"benjamincanac",4,{"id":53,"username":54,"contributions":55},1395674,"danjrwalsh",3,{"id":57,"username":58,"contributions":55},25870781,"ezequidias",{"id":60,"username":61,"contributions":62},5158436,"pi0",2,{"id":64,"username":65,"contributions":62},1836701,"HADB",{"id":67,"username":68,"contributions":62},39938037,"mukundshah",{"id":70,"username":71,"contributions":62},7290030,"larbish",{"id":73,"username":74,"contributions":62},727125,"andreasgangso",{"id":76,"username":77,"contributions":78},33484358,"geforseN",1,{"id":80,"username":81,"contributions":78},57325448,"rubanp",{"id":83,"username":84,"contributions":78},29805551,"RobertHaba",{"id":86,"username":87,"contributions":78},51883557,"iRaziul",{"id":89,"username":90,"contributions":78},15015765,"RBV1",{"id":92,"username":93,"contributions":78},30523269,"Quasarman",{"id":95,"username":96,"contributions":78},69654392,"PhabloFinotti",{"id":98,"username":99,"contributions":78},87768087,"Readpato",{"id":101,"username":102,"contributions":78},40447,"okj579",{"id":104,"username":105,"contributions":78},115035737,"nizasichi",{"id":107,"username":108,"contributions":78},48282810,"cybercoder-naj",{"id":110,"username":111,"contributions":78},45195424,"svifty7",{"id":113,"username":114,"contributions":78},149865959,"hywax",{"id":116,"username":117,"contributions":78},1124666,"tkjaergaard",{"id":119,"username":120,"contributions":78},28957605,"turulix",{"id":122,"username":123,"contributions":78},2703233,"toniengelhardt",{"id":125,"username":126,"contributions":78},11254699,"Tsuyoshi84",{"version":128,"downloads":129,"stars":130,"watchers":130,"forks":131,"defaultBranch":132,"publishedAt":133,"createdAt":134},"2.2.3",2049139,1177,93,"main",1780411542945,1718706605195,{"data":136,"body":137,"toc":2322},{"title":14,"description":14},{"type":138,"children":139},"root",[140,151,158,211,241,266,273,306,347,353,358,370,383,404,468,474,483,549,559,588,598,607,627,635,642,654,662,683,688,696,717,745,751,770,778,807,828,834,839,851,859,878,886,923,958,963,973,986,994,1022,1030,1037,1057,1065,1071,1099,1107,1128,1156,1162,1197,1230,1242,1268,1276,1297,1305,1368,1376,1381,1409,1414,1419,1427,1432,1444,1452,1457,1463,1475,1487,1500,1511,1530,1538,1543,1551,1564,1585,1590,1601,1626,1632,1657,1665,1686,1691,1704,1710,1741,1749,1754,1760,1765,1771,1776,1784,1789,1797,1816,1844,1850,1858,1883,1888,1901,1906,1914,1934,1940,1960,1968,1981,1989,1994,2029,2046,2071,2077,2104,2110,2122,2130,2176,2182,2263,2269,2302,2308,2317],{"type":141,"tag":142,"props":143,"children":144},"element","p",{},[145],{"type":141,"tag":146,"props":147,"children":150},"img",{"alt":148,"src":149},"nuxt-icon","https://github.com/nuxt-modules/icon/assets/904724/ae673805-06ad-4c05-820e-a8445c7224ce",[],{"type":141,"tag":152,"props":153,"children":154},"h1",{"id":148},[155],{"type":156,"value":157},"text","Nuxt Icon",{"type":141,"tag":142,"props":159,"children":160},{},[161,173,182,192,202],{"type":141,"tag":162,"props":163,"children":167},"a",{"href":164,"rel":165},"https://npmjs.com/package/@nuxt/icon",[166],"nofollow",[168],{"type":141,"tag":146,"props":169,"children":172},{"alt":170,"src":171},"npm version","https://img.shields.io/npm/v/@nuxt/icon/latest.svg?style=flat&colorA=18181B&colorB=28CF8D",[],{"type":141,"tag":162,"props":174,"children":176},{"href":164,"rel":175},[166],[177],{"type":141,"tag":146,"props":178,"children":181},{"alt":179,"src":180},"npm downloads","https://img.shields.io/npm/dm/@nuxt/icon.svg?style=flat&colorA=18181B&colorB=28CF8D",[],{"type":141,"tag":162,"props":183,"children":186},{"href":184,"rel":185},"https://github.com/nuxt-modules/icon/blob/main/LICENSE",[166],[187],{"type":141,"tag":146,"props":188,"children":191},{"alt":189,"src":190},"License","https://img.shields.io/github/license/nuxt-modules/icon.svg?style=flat&colorA=18181B&colorB=28CF8D",[],{"type":141,"tag":162,"props":193,"children":196},{"href":194,"rel":195},"https://nuxt.com",[166],[197],{"type":141,"tag":146,"props":198,"children":201},{"alt":199,"src":200},"Nuxt","https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js",[],{"type":141,"tag":162,"props":203,"children":205},{"href":204},"https://volta.net/nuxt-modules/icon?utm_source=nuxt_icon_readme",[206],{"type":141,"tag":146,"props":207,"children":210},{"src":208,"alt":209},"https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg","Volta board",[],{"type":141,"tag":142,"props":212,"children":213},{},[214,216,223,225,230,232,239],{"type":156,"value":215},"Add ",{"type":141,"tag":162,"props":217,"children":220},{"href":218,"rel":219},"https://icones.js.org",[166],[221],{"type":156,"value":222},"200,000+ ready to use icons",{"type":156,"value":224}," to your ",{"type":141,"tag":162,"props":226,"children":228},{"href":194,"rel":227},[166],[229],{"type":156,"value":199},{"type":156,"value":231}," application, based on ",{"type":141,"tag":162,"props":233,"children":236},{"href":234,"rel":235},"https://iconify.design",[166],[237],{"type":156,"value":238},"Iconify",{"type":156,"value":240},".",{"type":141,"tag":242,"props":243,"children":244},"ul",{},[245,256],{"type":141,"tag":246,"props":247,"children":248},"li",{},[249],{"type":141,"tag":162,"props":250,"children":253},{"href":251,"rel":252},"https://github.com/nuxt-modules/icon/releases",[166],[254],{"type":156,"value":255},"✨  Release Notes",{"type":141,"tag":246,"props":257,"children":258},{},[259],{"type":141,"tag":162,"props":260,"children":263},{"href":261,"rel":262},"https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue",[166],[264],{"type":156,"value":265},"🏀  Online playground",{"type":141,"tag":267,"props":268,"children":270},"h2",{"id":269},"features",[271],{"type":156,"value":272},"Features ✨",{"type":141,"tag":242,"props":274,"children":275},{},[276,281,286,296,301],{"type":141,"tag":246,"props":277,"children":278},{},[279],{"type":156,"value":280},"Nuxt 3 ready",{"type":141,"tag":246,"props":282,"children":283},{},[284],{"type":156,"value":285},"SSR friendly",{"type":141,"tag":246,"props":287,"children":288},{},[289,291],{"type":156,"value":290},"Support 200,000 open-source vector icons via ",{"type":141,"tag":162,"props":292,"children":294},{"href":234,"rel":293},[166],[295],{"type":156,"value":238},{"type":141,"tag":246,"props":297,"children":298},{},[299],{"type":156,"value":300},"Support both CSS mode / SVG mode",{"type":141,"tag":246,"props":302,"children":303},{},[304],{"type":156,"value":305},"Custom SVG support (via Vue component, or via local SVG files)",{"type":141,"tag":307,"props":308,"children":309},"blockquote",{},[310],{"type":141,"tag":142,"props":311,"children":312},{},[313,319,321,328,330,336,338,345],{"type":141,"tag":314,"props":315,"children":316},"span",{},[317],{"type":156,"value":318},"!NOTE",{"type":156,"value":320},"\nYou are viewing the ",{"type":141,"tag":322,"props":323,"children":325},"code",{"className":324},[],[326],{"type":156,"value":327},"v1.0",{"type":156,"value":329}," version of this module, which is a complete rewrite for a better developer experience and performance. If you are migrating from ",{"type":141,"tag":322,"props":331,"children":333},{"className":332},[],[334],{"type":156,"value":335},"v0.6",{"type":156,"value":337},", please check ",{"type":141,"tag":162,"props":339,"children":342},{"href":340,"rel":341},"https://github.com/nuxt-modules/icon/pull/154",[166],[343],{"type":156,"value":344},"this PR",{"type":156,"value":346}," for the full list of changes.",{"type":141,"tag":267,"props":348,"children":350},{"id":349},"setup-️",[351],{"type":156,"value":352},"Setup ⛓️",{"type":141,"tag":142,"props":354,"children":355},{},[356],{"type":156,"value":357},"Run the following command to add the module to your project:",{"type":141,"tag":359,"props":360,"children":365},"pre",{"className":361,"code":362,"language":363,"meta":14,"style":364},"language-bash","npx nuxi module add icon\n","bash","undefined",[366],{"type":141,"tag":322,"props":367,"children":368},{"__ignoreMap":14},[369],{"type":156,"value":362},{"type":141,"tag":142,"props":371,"children":372},{},[373,375,381],{"type":156,"value":374},"That's it, you can now use the ",{"type":141,"tag":322,"props":376,"children":378},{"className":377},[],[379],{"type":156,"value":380},"\u003CIcon />",{"type":156,"value":382}," in your components!",{"type":141,"tag":142,"props":384,"children":385},{},[386,388,395,397],{"type":156,"value":387},"✨ If you are using VS Code, you can use the ",{"type":141,"tag":162,"props":389,"children":392},{"href":390,"rel":391},"https://marketplace.visualstudio.com/items?itemName=antfu.iconify",[166],[393],{"type":156,"value":394},"Iconify IntelliSense",{"type":156,"value":396}," extension by ",{"type":141,"tag":162,"props":398,"children":401},{"href":399,"rel":400},"https://github.com/antfu",[166],[402],{"type":156,"value":403},"@antfu",{"type":141,"tag":405,"props":406,"children":407},"details",{},[408,414,419,427,438,448],{"type":141,"tag":409,"props":410,"children":411},"summary",{},[412],{"type":156,"value":413},"Manual Setup",{"type":141,"tag":142,"props":415,"children":416},{},[417],{"type":156,"value":418},"You can install the module manually with:",{"type":141,"tag":359,"props":420,"children":422},{"className":361,"code":421,"language":363,"meta":14,"style":364},"npm i @nuxt/icon\n",[423],{"type":141,"tag":322,"props":424,"children":425},{"__ignoreMap":14},[426],{"type":156,"value":421},{"type":141,"tag":142,"props":428,"children":429},{},[430,432],{"type":156,"value":431},"Update your ",{"type":141,"tag":322,"props":433,"children":435},{"className":434},[],[436],{"type":156,"value":437},"nuxt.config.ts",{"type":141,"tag":359,"props":439,"children":443},{"className":440,"code":441,"language":442,"meta":14,"style":364},"language-ts","export default defineNuxtConfig({\n  modules: [\n    '@nuxt/icon'\n  ]\n})\n","ts",[444],{"type":141,"tag":322,"props":445,"children":446},{"__ignoreMap":14},[447],{"type":156,"value":441},{"type":141,"tag":142,"props":449,"children":450},{},[451,453,458,460,466],{"type":156,"value":452},"If you have the legacy module ",{"type":141,"tag":322,"props":454,"children":456},{"className":455},[],[457],{"type":156,"value":148},{"type":156,"value":459}," installed, you might want to remove it from the ",{"type":141,"tag":322,"props":461,"children":463},{"className":462},[],[464],{"type":156,"value":465},"modules",{"type":156,"value":467}," list.",{"type":141,"tag":267,"props":469,"children":471},{"id":470},"usage",[472],{"type":156,"value":473},"Usage 👌",{"type":141,"tag":142,"props":475,"children":476},{},[477],{"type":141,"tag":478,"props":479,"children":480},"strong",{},[481],{"type":156,"value":482},"Props:",{"type":141,"tag":242,"props":484,"children":485},{},[486,497,516],{"type":141,"tag":246,"props":487,"children":488},{},[489,495],{"type":141,"tag":322,"props":490,"children":492},{"className":491},[],[493],{"type":156,"value":494},"name",{"type":156,"value":496}," (required): icon name or global component name",{"type":141,"tag":246,"props":498,"children":499},{},[500,506,508,514],{"type":141,"tag":322,"props":501,"children":503},{"className":502},[],[504],{"type":156,"value":505},"size",{"type":156,"value":507},": icon size (default: ",{"type":141,"tag":322,"props":509,"children":511},{"className":510},[],[512],{"type":156,"value":513},"1em",{"type":156,"value":515},")",{"type":141,"tag":246,"props":517,"children":518},{},[519,525,527,533,535,541,543,548],{"type":141,"tag":322,"props":520,"children":522},{"className":521},[],[523],{"type":156,"value":524},"mode",{"type":156,"value":526},": icon rendering mode (",{"type":141,"tag":322,"props":528,"children":530},{"className":529},[],[531],{"type":156,"value":532},"svg",{"type":156,"value":534}," or ",{"type":141,"tag":322,"props":536,"children":538},{"className":537},[],[539],{"type":156,"value":540},"css",{"type":156,"value":542},", default: ",{"type":141,"tag":322,"props":544,"children":546},{"className":545},[],[547],{"type":156,"value":540},{"type":156,"value":515},{"type":141,"tag":142,"props":550,"children":551},{},[552,557],{"type":141,"tag":478,"props":553,"children":554},{},[555],{"type":156,"value":556},"Attributes",{"type":156,"value":558},":",{"type":141,"tag":142,"props":560,"children":561},{},[562,564,570,571,577,579,586],{"type":156,"value":563},"When using an icon from Iconify, a ",{"type":141,"tag":322,"props":565,"children":567},{"className":566},[],[568],{"type":156,"value":569},"\u003Cspan>",{"type":156,"value":534},{"type":141,"tag":322,"props":572,"children":574},{"className":573},[],[575],{"type":156,"value":576},"\u003Csvg>",{"type":156,"value":578}," will be created based on the rendering mode, you can give ",{"type":141,"tag":162,"props":580,"children":583},{"href":581,"rel":582},"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute",[166],[584],{"type":156,"value":585},"all the attributes",{"type":156,"value":587}," of the native element.",{"type":141,"tag":359,"props":589,"children":593},{"className":590,"code":591,"language":592,"meta":14,"style":364},"language-html","\u003CIcon name=\"uil:github\" style=\"color: black\" />\n","html",[594],{"type":141,"tag":322,"props":595,"children":596},{"__ignoreMap":14},[597],{"type":156,"value":591},{"type":141,"tag":142,"props":599,"children":600},{},[601,606],{"type":141,"tag":478,"props":602,"children":603},{},[604],{"type":156,"value":605},"TailwindCSS v4",{"type":156,"value":558},{"type":141,"tag":142,"props":608,"children":609},{},[610,612,617,619,625],{"type":156,"value":611},"When using TailwindCSS v4 with the ",{"type":141,"tag":322,"props":613,"children":615},{"className":614},[],[616],{"type":156,"value":540},{"type":156,"value":618}," mode, you should configure the ",{"type":141,"tag":322,"props":620,"children":622},{"className":621},[],[623],{"type":156,"value":624},"cssLayer",{"type":156,"value":626}," in Nuxt's app config:",{"type":141,"tag":359,"props":628,"children":630},{"className":440,"code":629,"language":442,"meta":14,"style":364},"// ~/app.config.ts\nexport default defineAppConfig({\n  icon: {\n    mode: 'css',\n    cssLayer: 'base'\n  }\n})\n",[631],{"type":141,"tag":322,"props":632,"children":633},{"__ignoreMap":14},[634],{"type":156,"value":629},{"type":141,"tag":636,"props":637,"children":639},"h3",{"id":638},"iconify-dataset",[640],{"type":156,"value":641},"Iconify Dataset",{"type":141,"tag":142,"props":643,"children":644},{},[645,647,652],{"type":156,"value":646},"You can use any name from the ",{"type":141,"tag":162,"props":648,"children":650},{"href":218,"rel":649},[166],[651],{"type":156,"value":218},{"type":156,"value":653}," collection:",{"type":141,"tag":359,"props":655,"children":657},{"className":590,"code":656,"language":592,"meta":14,"style":364},"\u003CIcon name=\"uil:github\" />\n",[658],{"type":141,"tag":322,"props":659,"children":660},{"__ignoreMap":14},[661],{"type":156,"value":656},{"type":141,"tag":142,"props":663,"children":664},{},[665,667,673,675,681],{"type":156,"value":666},"It supports the ",{"type":141,"tag":322,"props":668,"children":670},{"className":669},[],[671],{"type":156,"value":672},"i-",{"type":156,"value":674}," prefix (for example, ",{"type":141,"tag":322,"props":676,"children":678},{"className":677},[],[679],{"type":156,"value":680},"i-uil-github",{"type":156,"value":682},").",{"type":141,"tag":142,"props":684,"children":685},{},[686],{"type":156,"value":687},"It's highly recommended to install the icon data locally with",{"type":141,"tag":359,"props":689,"children":691},{"className":361,"code":690,"language":363,"meta":14,"style":364},"npm i -D @iconify-json/collection-name\n",[692],{"type":141,"tag":322,"props":693,"children":694},{"__ignoreMap":14},[695],{"type":156,"value":690},{"type":141,"tag":142,"props":697,"children":698},{},[699,701,707,709,715],{"type":156,"value":700},"For example, to use the ",{"type":141,"tag":322,"props":702,"children":704},{"className":703},[],[705],{"type":156,"value":706},"uil:github",{"type":156,"value":708}," icon, install its collection with ",{"type":141,"tag":322,"props":710,"children":712},{"className":711},[],[713],{"type":156,"value":714},"@iconify-json/uil",{"type":156,"value":716},". This way the icons can be served locally or from your serverless functions, which is faster and more reliable on both SSR and client-side.",{"type":141,"tag":307,"props":718,"children":719},{},[720,737],{"type":141,"tag":142,"props":721,"children":722},{},[723,727,729,735],{"type":141,"tag":314,"props":724,"children":725},{},[726],{"type":156,"value":318},{"type":156,"value":728},"\nYou may also know you can install ",{"type":141,"tag":322,"props":730,"children":732},{"className":731},[],[733],{"type":156,"value":734},"@iconify/json",{"type":156,"value":736}," package to include all iconify icons. This is not recommended because it will increase your server bundle size and building performance. If you choose to do so, we'd recommend to explicitly specify the collection names you need:",{"type":141,"tag":359,"props":738,"children":740},{"className":440,"code":739,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  modules: ['@nuxt/icon'],\n  icon: {\n    serverBundle: {\n      collections: ['uil', 'mdi'] // \u003C!--- this\n    }\n  }\n})\n",[741],{"type":141,"tag":322,"props":742,"children":743},{"__ignoreMap":14},[744],{"type":156,"value":739},{"type":141,"tag":636,"props":746,"children":748},{"id":747},"vue-component",[749],{"type":156,"value":750},"Vue Component",{"type":141,"tag":142,"props":752,"children":753},{},[754,756,761,763,768],{"type":156,"value":755},"When the ",{"type":141,"tag":322,"props":757,"children":759},{"className":758},[],[760],{"type":156,"value":494},{"type":156,"value":762}," matches a global registered component, it will be rendered as that component (in this case ",{"type":141,"tag":322,"props":764,"children":766},{"className":765},[],[767],{"type":156,"value":524},{"type":156,"value":769}," will be ignored):",{"type":141,"tag":359,"props":771,"children":773},{"className":590,"code":772,"language":592,"meta":14,"style":364},"\u003CIcon name=\"MyComponent\" />\n",[774],{"type":141,"tag":322,"props":775,"children":776},{"__ignoreMap":14},[777],{"type":156,"value":772},{"type":141,"tag":142,"props":779,"children":780},{},[781,783,789,791,797,799,806],{"type":156,"value":782},"Note that ",{"type":141,"tag":322,"props":784,"children":786},{"className":785},[],[787],{"type":156,"value":788},"MyComponent",{"type":156,"value":790}," needs to be inside ",{"type":141,"tag":322,"props":792,"children":794},{"className":793},[],[795],{"type":156,"value":796},"components/global/",{"type":156,"value":798}," folder (see ",{"type":141,"tag":162,"props":800,"children":803},{"href":801,"rel":802},"https://github.com/nuxt-modules/icon/blob/main/playground/components/global/NuxtLogo.vue",[166],[804],{"type":156,"value":805},"example",{"type":156,"value":682},{"type":141,"tag":307,"props":808,"children":809},{},[810,820],{"type":141,"tag":142,"props":811,"children":812},{},[813,818],{"type":141,"tag":314,"props":814,"children":815},{},[816],{"type":156,"value":817},"!TIP",{"type":156,"value":819},"\nYou can also change the component name with:",{"type":141,"tag":359,"props":821,"children":823},{"className":440,"code":822,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  icon: {\n    componentName: 'NuxtIcon'\n  }\n})\n",[824],{"type":141,"tag":322,"props":825,"children":826},{"__ignoreMap":14},[827],{"type":156,"value":822},{"type":141,"tag":636,"props":829,"children":831},{"id":830},"custom-local-collections",[832],{"type":156,"value":833},"Custom Local Collections",{"type":141,"tag":142,"props":835,"children":836},{},[837],{"type":156,"value":838},"You can use local SVG files to create a custom Iconify collection.",{"type":141,"tag":142,"props":840,"children":841},{},[842,844,850],{"type":156,"value":843},"For example, place your icons' SVG files under a folder of your choice, for example, ",{"type":141,"tag":322,"props":845,"children":847},{"className":846},[],[848],{"type":156,"value":849},"./assets/my-icons",{"type":156,"value":558},{"type":141,"tag":359,"props":852,"children":854},{"className":361,"code":853,"language":363,"meta":14,"style":364},"assets/my-icons\n├── foo.svg\n├── bar-outline.svg\n",[855],{"type":141,"tag":322,"props":856,"children":857},{"__ignoreMap":14},[858],{"type":156,"value":853},{"type":141,"tag":142,"props":860,"children":861},{},[862,864,869,871,877],{"type":156,"value":863},"In your ",{"type":141,"tag":322,"props":865,"children":867},{"className":866},[],[868],{"type":156,"value":437},{"type":156,"value":870},", add an item in ",{"type":141,"tag":322,"props":872,"children":874},{"className":873},[],[875],{"type":156,"value":876},"icon.customCollections",{"type":156,"value":558},{"type":141,"tag":359,"props":879,"children":881},{"className":440,"code":880,"language":442,"meta":14,"style":364},"import { createResolver } from \"nuxt/kit\"\n\nconst { resolve } = createResolver(import.meta.url)\n\nexport default defineNuxtConfig({\n  modules: [\n    '@nuxt/icon'\n  ],\n  icon: {\n    customCollections: [\n      {\n        prefix: 'my-icon',\n        dir: resolve('./assets/my-icons'),\n        // if you want to include all the icons in nested directories:\n        // recursive: true,\n      },\n    ],\n  },\n})\n",[882],{"type":141,"tag":322,"props":883,"children":884},{"__ignoreMap":14},[885],{"type":156,"value":880},{"type":141,"tag":307,"props":887,"children":888},{},[889],{"type":141,"tag":142,"props":890,"children":891},{},[892,896,898,904,906,912,914,921],{"type":141,"tag":314,"props":893,"children":894},{},[895],{"type":156,"value":318},{"type":156,"value":897},"\nWe use ",{"type":141,"tag":322,"props":899,"children":901},{"className":900},[],[902],{"type":156,"value":903},"createResolver",{"type":156,"value":905}," and ",{"type":141,"tag":322,"props":907,"children":909},{"className":908},[],[910],{"type":156,"value":911},"resolve()",{"type":156,"value":913}," to ensure paths work correctly both in regular projects and when your project is used as an ",{"type":141,"tag":162,"props":915,"children":918},{"href":916,"rel":917},"https://nuxt.com/docs/4.x/getting-started/layers",[166],[919],{"type":156,"value":920},"extendable layer",{"type":156,"value":922}," by other Nuxt projects. This ensures icon paths resolve relative to your project's directory rather than the consuming project's directory.",{"type":141,"tag":307,"props":924,"children":925},{},[926],{"type":141,"tag":142,"props":927,"children":928},{},[929,933,935,941,943,949,951,957],{"type":141,"tag":314,"props":930,"children":931},{},[932],{"type":156,"value":318},{"type":156,"value":934},"\nIf you are running on Nuxt 4 with the new ",{"type":141,"tag":322,"props":936,"children":938},{"className":937},[],[939],{"type":156,"value":940},"app",{"type":156,"value":942}," directory, the assets directory is ",{"type":141,"tag":322,"props":944,"children":946},{"className":945},[],[947],{"type":156,"value":948},"'./app/assets/*'",{"type":156,"value":950}," instead of ",{"type":141,"tag":322,"props":952,"children":954},{"className":953},[],[955],{"type":156,"value":956},"'./assets/*'",{"type":156,"value":240},{"type":141,"tag":142,"props":959,"children":960},{},[961],{"type":156,"value":962},"Then you can use the icons like this:",{"type":141,"tag":359,"props":964,"children":968},{"className":965,"code":966,"language":967,"meta":14,"style":364},"language-vue","\u003Ctemplate>\n  \u003CIcon name=\"my-icon:foo\" />\n  \u003CIcon name=\"my-icon:bar-outline\" />\n\u003C/template>\n","vue",[969],{"type":141,"tag":322,"props":970,"children":971},{"__ignoreMap":14},[972],{"type":156,"value":966},{"type":141,"tag":142,"props":974,"children":975},{},[976,978,984],{"type":156,"value":977},"You can also pass a full custom ",{"type":141,"tag":322,"props":979,"children":981},{"className":980},[],[982],{"type":156,"value":983},"IconifyJSON",{"type":156,"value":985}," object:",{"type":141,"tag":359,"props":987,"children":989},{"className":440,"code":988,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt/icon'\n  ],\n  icon: {\n    customCollections: [\n      {\n        prefix: 'paid-icons',\n        icons: {\n          'nuxt': { body: '\u003Cpath d=\"M281.44 ... />' },\n        },\n        width: 512,\n        height: 512,\n      }\n    ],\n  },\n})\n",[990],{"type":141,"tag":322,"props":991,"children":992},{"__ignoreMap":14},[993],{"type":156,"value":988},{"type":141,"tag":142,"props":995,"children":996},{},[997,999,1005,1007,1013,1015,1021],{"type":156,"value":998},"Note that custom local collections require you to have a server to serve the API. When setting ",{"type":141,"tag":322,"props":1000,"children":1002},{"className":1001},[],[1003],{"type":156,"value":1004},"ssr: false",{"type":156,"value":1006},", or when generating a static app using ",{"type":141,"tag":322,"props":1008,"children":1010},{"className":1009},[],[1011],{"type":156,"value":1012},"nuxt generate",{"type":156,"value":1014}," (which is equivalent to ssr: false), the provider will default to the Iconify API (which does not have your custom icons). If you want to build a SPA with server endpoints, you can explicitly set ",{"type":141,"tag":322,"props":1016,"children":1018},{"className":1017},[],[1019],{"type":156,"value":1020},"provider: 'server'",{"type":156,"value":558},{"type":141,"tag":359,"props":1023,"children":1025},{"className":440,"code":1024,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt/icon'\n  ],\n  ssr: false,\n  icon: {\n    provider: 'server', // \u003C-- this\n    customCollections: [\n      {\n        prefix: 'my-icon',\n        dir: './assets/my-icons'\n      },\n    ],\n  },\n})\n",[1026],{"type":141,"tag":322,"props":1027,"children":1028},{"__ignoreMap":14},[1029],{"type":156,"value":1024},{"type":141,"tag":1031,"props":1032,"children":1034},"h4",{"id":1033},"disabling-runtime-fetching",[1035],{"type":156,"value":1036},"Disabling Runtime Fetching",{"type":141,"tag":142,"props":1038,"children":1039},{},[1040,1042,1048,1050,1056],{"type":156,"value":1041},"Or if you want to disable the dynamic icon fetching completely and only use icons from the ",{"type":141,"tag":162,"props":1043,"children":1045},{"href":1044},"#client-bundle",[1046],{"type":156,"value":1047},"client bundle",{"type":156,"value":1049},", you can set ",{"type":141,"tag":322,"props":1051,"children":1053},{"className":1052},[],[1054],{"type":156,"value":1055},"provider: 'none'",{"type":156,"value":558},{"type":141,"tag":359,"props":1058,"children":1060},{"className":440,"code":1059,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  icon: {\n    provider: 'none',\n    clientBundle: {\n      scan: true,\n      // ...or other bundle options\n    },\n  }\n})\n",[1061],{"type":141,"tag":322,"props":1062,"children":1063},{"__ignoreMap":14},[1064],{"type":156,"value":1059},{"type":141,"tag":636,"props":1066,"children":1068},{"id":1067},"case-sensitive-custom-collections",[1069],{"type":156,"value":1070},"Case Sensitive Custom Collections",{"type":141,"tag":142,"props":1072,"children":1073},{},[1074,1076,1082,1084,1090,1092,1097],{"type":156,"value":1075},"Before ",{"type":141,"tag":322,"props":1077,"children":1079},{"className":1078},[],[1080],{"type":156,"value":1081},"v1.10",{"type":156,"value":1083},", due to the limitation of Iconify's previous convention, all custom icons were normalized to ",{"type":141,"tag":322,"props":1085,"children":1087},{"className":1086},[],[1088],{"type":156,"value":1089},"kebab-case",{"type":156,"value":1091}," with a warning. Thanks to the updates on Iconify side, starting from ",{"type":141,"tag":322,"props":1093,"children":1095},{"className":1094},[],[1096],{"type":156,"value":1081},{"type":156,"value":1098},", you can opt-in to use case-sensitive custom collections and by pass the normalization.",{"type":141,"tag":359,"props":1100,"children":1102},{"className":440,"code":1101,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt/icon'\n  ],\n  icon: {\n    customCollections: [\n      {\n        prefix: 'my-icon',\n        dir: './assets/my-icons',\n        normalizeIconName: false, // \u003C-- this\n      },\n    ],\n  },\n})\n",[1103],{"type":141,"tag":322,"props":1104,"children":1105},{"__ignoreMap":14},[1106],{"type":156,"value":1101},{"type":141,"tag":142,"props":1108,"children":1109},{},[1110,1112,1118,1120,1126],{"type":156,"value":1111},"Which enable to use ",{"type":141,"tag":322,"props":1113,"children":1115},{"className":1114},[],[1116],{"type":156,"value":1117},"assets/my-icons/FooBar.svg",{"type":156,"value":1119}," as ",{"type":141,"tag":322,"props":1121,"children":1123},{"className":1122},[],[1124],{"type":156,"value":1125},"my-icon:FooBar",{"type":156,"value":1127},", for example.",{"type":141,"tag":142,"props":1129,"children":1130},{},[1131,1137,1139,1145,1147,1154],{"type":141,"tag":322,"props":1132,"children":1134},{"className":1133},[],[1135],{"type":156,"value":1136},"normalizeIconName",{"type":156,"value":1138}," is default to ",{"type":141,"tag":322,"props":1140,"children":1142},{"className":1141},[],[1143],{"type":156,"value":1144},"true",{"type":156,"value":1146}," for backward compatibility, and will be flipped in the future major version. See ",{"type":141,"tag":162,"props":1148,"children":1151},{"href":1149,"rel":1150},"https://github.com/nuxt/icon/issues/265",[166],[1152],{"type":156,"value":1153},"#265",{"type":156,"value":1155}," for more context.",{"type":141,"tag":636,"props":1157,"children":1159},{"id":1158},"icon-customization",[1160],{"type":156,"value":1161},"Icon Customization",{"type":141,"tag":142,"props":1163,"children":1164},{},[1165,1167,1172,1174,1179,1181,1187,1189,1195],{"type":156,"value":1166},"To update the default size (",{"type":141,"tag":322,"props":1168,"children":1170},{"className":1169},[],[1171],{"type":156,"value":513},{"type":156,"value":1173},") of the ",{"type":141,"tag":322,"props":1175,"children":1177},{"className":1176},[],[1178],{"type":156,"value":380},{"type":156,"value":1180},", create an ",{"type":141,"tag":322,"props":1182,"children":1184},{"className":1183},[],[1185],{"type":156,"value":1186},"app.config.ts",{"type":156,"value":1188}," with the ",{"type":141,"tag":322,"props":1190,"children":1192},{"className":1191},[],[1193],{"type":156,"value":1194},"icon.size",{"type":156,"value":1196}," property.",{"type":141,"tag":142,"props":1198,"children":1199},{},[1200,1202,1208,1209,1214,1215,1221,1223,1228],{"type":156,"value":1201},"Update the default class (",{"type":141,"tag":322,"props":1203,"children":1205},{"className":1204},[],[1206],{"type":156,"value":1207},".icon",{"type":156,"value":1173},{"type":141,"tag":322,"props":1210,"children":1212},{"className":1211},[],[1213],{"type":156,"value":380},{"type":156,"value":1188},{"type":141,"tag":322,"props":1216,"children":1218},{"className":1217},[],[1219],{"type":156,"value":1220},"icon.class",{"type":156,"value":1222}," property, for a headless Icon, set ",{"type":141,"tag":322,"props":1224,"children":1226},{"className":1225},[],[1227],{"type":156,"value":8},{"type":156,"value":1229},".class: ''`.",{"type":141,"tag":142,"props":1231,"children":1232},{},[1233,1235,1241],{"type":156,"value":1234},"You can also define aliases to make swapping out icons easier by leveraging the ",{"type":141,"tag":322,"props":1236,"children":1238},{"className":1237},[],[1239],{"type":156,"value":1240},"icon.aliases",{"type":156,"value":1196},{"type":141,"tag":307,"props":1243,"children":1244},{},[1245],{"type":141,"tag":142,"props":1246,"children":1247},{},[1248,1252,1254,1259,1261,1266],{"type":141,"tag":314,"props":1249,"children":1250},{},[1251],{"type":156,"value":318},{"type":156,"value":1253},"\nNote it's ",{"type":141,"tag":322,"props":1255,"children":1257},{"className":1256},[],[1258],{"type":156,"value":1186},{"type":156,"value":1260}," and not ",{"type":141,"tag":322,"props":1262,"children":1264},{"className":1263},[],[1265],{"type":156,"value":437},{"type":156,"value":1267}," for runtime configs.",{"type":141,"tag":359,"props":1269,"children":1271},{"className":440,"code":1270,"language":442,"meta":14,"style":364},"// app.config.ts\nexport default defineAppConfig({\n  icon: {\n    size: '24px', // default \u003CIcon> size applied\n    class: 'icon', // default \u003CIcon> class applied\n    mode: 'css', // default \u003CIcon> mode applied\n    aliases: {\n      'nuxt': 'logos:nuxt-icon',\n    },\n    cssLayer: 'base' // set the css layer to inject to\n  }\n})\n",[1272],{"type":141,"tag":322,"props":1273,"children":1274},{"__ignoreMap":14},[1275],{"type":156,"value":1270},{"type":141,"tag":142,"props":1277,"children":1278},{},[1279,1281,1287,1289,1295],{"type":156,"value":1280},"The icons will have the default size of ",{"type":141,"tag":322,"props":1282,"children":1284},{"className":1283},[],[1285],{"type":156,"value":1286},"24px",{"type":156,"value":1288}," and the ",{"type":141,"tag":322,"props":1290,"children":1292},{"className":1291},[],[1293],{"type":156,"value":1294},"nuxt",{"type":156,"value":1296}," icon will be available:",{"type":141,"tag":359,"props":1298,"children":1300},{"className":590,"code":1299,"language":592,"meta":14,"style":364},"\u003CIcon name=\"nuxt\" />\n",[1301],{"type":141,"tag":322,"props":1302,"children":1303},{"__ignoreMap":14},[1304],{"type":156,"value":1299},{"type":141,"tag":142,"props":1306,"children":1307},{},[1308,1310,1316,1318,1324,1326,1333,1335,1341,1343,1349,1351,1358,1360,1366],{"type":156,"value":1309},"By default, this module will create a server endpoint ",{"type":141,"tag":322,"props":1311,"children":1313},{"className":1312},[],[1314],{"type":156,"value":1315},"/api/_nuxt_icon/:collection",{"type":156,"value":1317}," to serve the icons from your local server bundle (you can override the default path by setting ",{"type":141,"tag":322,"props":1319,"children":1321},{"className":1320},[],[1322],{"type":156,"value":1323},"icon.localApiEndpoint",{"type":156,"value":1325}," to your desired path). When requesting an icon that does not exist in the local bundle, it will fallback to requesting ",{"type":141,"tag":162,"props":1327,"children":1330},{"href":1328,"rel":1329},"https://api.iconify.design",[166],[1331],{"type":156,"value":1332},"the official Iconify API",{"type":156,"value":1334},". You can disable the fallback by setting ",{"type":141,"tag":322,"props":1336,"children":1338},{"className":1337},[],[1339],{"type":156,"value":1340},"icon.fallbackToApi",{"type":156,"value":1342}," to ",{"type":141,"tag":322,"props":1344,"children":1346},{"className":1345},[],[1347],{"type":156,"value":1348},"false",{"type":156,"value":1350},", or set up ",{"type":141,"tag":162,"props":1352,"children":1355},{"href":1353,"rel":1354},"https://iconify.design/docs/api/hosting.html",[166],[1356],{"type":156,"value":1357},"your own Iconify API",{"type":156,"value":1359}," and update ",{"type":141,"tag":322,"props":1361,"children":1363},{"className":1362},[],[1364],{"type":156,"value":1365},"icon.iconifyApiEndpoint",{"type":156,"value":1367}," to your own API endpoint.",{"type":141,"tag":142,"props":1369,"children":1370},{},[1371],{"type":141,"tag":478,"props":1372,"children":1373},{},[1374],{"type":156,"value":1375},"Customizing Icons with the customize Option",{"type":141,"tag":142,"props":1377,"children":1378},{},[1379],{"type":156,"value":1380},"The customize option allows you to modify various aspects of the SVG icons used in your project. With this option, you can:",{"type":141,"tag":242,"props":1382,"children":1383},{},[1384,1389,1394,1399,1404],{"type":141,"tag":246,"props":1385,"children":1386},{},[1387],{"type":156,"value":1388},"Change Stroke Width",{"type":141,"tag":246,"props":1390,"children":1391},{},[1392],{"type":156,"value":1393},"Change Colors",{"type":141,"tag":246,"props":1395,"children":1396},{},[1397],{"type":156,"value":1398},"Change Animation Duration",{"type":141,"tag":246,"props":1400,"children":1401},{},[1402],{"type":156,"value":1403},"Change Opacity",{"type":141,"tag":246,"props":1405,"children":1406},{},[1407],{"type":156,"value":1408},"Add Extra Shapes",{"type":141,"tag":142,"props":1410,"children":1411},{},[1412],{"type":156,"value":1413},"You have full control over SVG content with these customization options.",{"type":141,"tag":142,"props":1415,"children":1416},{},[1417],{"type":156,"value":1418},"In a Component\nYou can define a customize function within a component to apply various modifications to your icons.",{"type":141,"tag":359,"props":1420,"children":1422},{"className":965,"code":1421,"language":967,"meta":14,"style":364},"\u003Cscript setup lang=\"ts\">\n// Define the customize function to modify SVG content\nconst customize = (content: string, name: string, prefix: string, provider: string) => {\n  if (prefix !== 'tabler') return content // Ignore Prefix\n\n  return content\n    .replace(/stroke-width=\"[^\"]*\"/g, `stroke-width=\"2\"`) // Change stroke width to 2\n    .replace(/stroke=\"[^\"]*\"/g, `stroke=\"#FF5733\"`) // Change stroke color to red\n    .replace(/fill=\"[^\"]*\"/g, `fill=\"#FF5733\"`) // Change fill color to red\n    .replace(/animation-duration=\"[^\"]*\"/g, `animation-duration=\"1s\"`) // Change animation duration to 1s (for animated icons)\n    .replace(/opacity=\"[^\"]*\"/g, `opacity=\"0.8\"`);// Change opacity to 0.8\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CIcon name=\"tabler:star\" :customize=\"customize\" />\n\u003C/template>\n\n\u003C!-- You can also use `:customize=\"false\"` to disabled the global customization function per-usage -->\n",[1423],{"type":141,"tag":322,"props":1424,"children":1425},{"__ignoreMap":14},[1426],{"type":156,"value":1421},{"type":141,"tag":142,"props":1428,"children":1429},{},[1430],{"type":156,"value":1431},"In the App Configuration File:",{"type":141,"tag":142,"props":1433,"children":1434},{},[1435,1437,1442],{"type":156,"value":1436},"Alternatively, you can apply these customizations globally in the ",{"type":141,"tag":322,"props":1438,"children":1440},{"className":1439},[],[1441],{"type":156,"value":1186},{"type":156,"value":1443}," file.",{"type":141,"tag":359,"props":1445,"children":1447},{"className":440,"code":1446,"language":442,"meta":14,"style":364},"// app.config.ts\nexport default defineAppConfig({\n  icon: {\n    customize: (content: string, name: string, prefix: string, provider: string) => {\n      // ...\n    },\n  }\n})\n",[1448],{"type":141,"tag":322,"props":1449,"children":1450},{"__ignoreMap":14},[1451],{"type":156,"value":1446},{"type":141,"tag":142,"props":1453,"children":1454},{},[1455],{"type":156,"value":1456},"With this configuration, all icons throughout your application will have these customizations applied consistently.",{"type":141,"tag":636,"props":1458,"children":1460},{"id":1459},"server-bundle",[1461],{"type":156,"value":1462},"Server Bundle",{"type":141,"tag":142,"props":1464,"children":1465},{},[1466,1468,1473],{"type":156,"value":1467},"Since ",{"type":141,"tag":322,"props":1469,"children":1471},{"className":1470},[],[1472],{"type":156,"value":11},{"type":156,"value":1474}," v1.0, we have introduced the server bundle concept to serve the icons from Nuxt server endpoints. This keeps the client bundle lean and able to load icons on-demand, while having all the dynamic features to use icons that might not be known at build time.",{"type":141,"tag":1031,"props":1476,"children":1478},{"id":1477},"server-bundle-mode-local",[1479,1481],{"type":156,"value":1480},"Server Bundle Mode: ",{"type":141,"tag":322,"props":1482,"children":1484},{"className":1483},[],[1485],{"type":156,"value":1486},"local",{"type":141,"tag":142,"props":1488,"children":1489},{},[1490,1492,1498],{"type":156,"value":1491},"This mode will bundle the icon collections you have installed locally (like ",{"type":141,"tag":322,"props":1493,"children":1495},{"className":1494},[],[1496],{"type":156,"value":1497},"@iconify-json/*",{"type":156,"value":1499},"), into your server bundle as dynamic chunks. The collection data will be loaded on-demand, only when your client request icons from that collection.",{"type":141,"tag":1031,"props":1501,"children":1503},{"id":1502},"server-bundle-mode-remote",[1504,1505],{"type":156,"value":1480},{"type":141,"tag":322,"props":1506,"children":1508},{"className":1507},[],[1509],{"type":156,"value":1510},"remote",{"type":141,"tag":142,"props":1512,"children":1513},{},[1514,1516,1521,1523,1528],{"type":156,"value":1515},"Introduced in ",{"type":141,"tag":322,"props":1517,"children":1519},{"className":1518},[],[1520],{"type":156,"value":11},{"type":156,"value":1522}," v1.2, you can now use the ",{"type":141,"tag":322,"props":1524,"children":1526},{"className":1525},[],[1527],{"type":156,"value":1510},{"type":156,"value":1529}," server bundle to serve the icons from a remote CDN.",{"type":141,"tag":359,"props":1531,"children":1533},{"className":440,"code":1532,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt/icon'\n  ],\n  icon: {\n    serverBundle: 'remote',\n  },\n})\n",[1534],{"type":141,"tag":322,"props":1535,"children":1536},{"__ignoreMap":14},[1537],{"type":156,"value":1532},{"type":141,"tag":142,"props":1539,"children":1540},{},[1541],{"type":156,"value":1542},"Or you can specify the remote provider:",{"type":141,"tag":359,"props":1544,"children":1546},{"className":440,"code":1545,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt/icon'\n  ],\n  icon: {\n    serverBundle: {\n      remote: 'jsdelivr', // 'unpkg' or 'github-raw', or a custom function\n    }\n  },\n})\n",[1547],{"type":141,"tag":322,"props":1548,"children":1549},{"__ignoreMap":14},[1550],{"type":156,"value":1545},{"type":141,"tag":142,"props":1552,"children":1553},{},[1554,1556,1562],{"type":156,"value":1555},"Which will make server requests to ",{"type":141,"tag":322,"props":1557,"children":1559},{"className":1558},[],[1560],{"type":156,"value":1561},"https://cdn.jsdelivr.net/npm/@iconify-json/ph/icons.json",{"type":156,"value":1563}," to fetch the icons at runtime, instead of bundling them with your server.",{"type":141,"tag":142,"props":1565,"children":1566},{},[1567,1569,1575,1577,1583],{"type":156,"value":1568},"Under the hood, instead of bundling ",{"type":141,"tag":322,"props":1570,"children":1572},{"className":1571},[],[1573],{"type":156,"value":1574},"() => import('@iconify-json/ph/icons.json')",{"type":156,"value":1576}," to your server bundle, it will now use something like ",{"type":141,"tag":322,"props":1578,"children":1580},{"className":1579},[],[1581],{"type":156,"value":1582},"() => fetch('https://cdn.jsdelivr.net/npm/@iconify-json/ph/icons.json').then(res => res.json())",{"type":156,"value":1584},", where the collections are not inlined.",{"type":141,"tag":142,"props":1586,"children":1587},{},[1588],{"type":156,"value":1589},"This would be useful when server bundle size is a concern, like in serverless or worker environments.",{"type":141,"tag":1031,"props":1591,"children":1593},{"id":1592},"server-bundle-mode-auto",[1594,1595],{"type":156,"value":1480},{"type":141,"tag":322,"props":1596,"children":1598},{"className":1597},[],[1599],{"type":156,"value":1600},"auto",{"type":141,"tag":142,"props":1602,"children":1603},{},[1604,1606,1611,1612,1617,1619,1624],{"type":156,"value":1605},"This is the default option, where the module will pick between ",{"type":141,"tag":322,"props":1607,"children":1609},{"className":1608},[],[1610],{"type":156,"value":1486},{"type":156,"value":905},{"type":141,"tag":322,"props":1613,"children":1615},{"className":1614},[],[1616],{"type":156,"value":1510},{"type":156,"value":1618}," based your deployment environment. ",{"type":141,"tag":322,"props":1620,"children":1622},{"className":1621},[],[1623],{"type":156,"value":1486},{"type":156,"value":1625}," will be preffered unless you are deploying to a serverless or worker environment, like Vercel Edge or Cloudflare Workers.",{"type":141,"tag":1031,"props":1627,"children":1629},{"id":1628},"externalize-icons-json",[1630],{"type":156,"value":1631},"Externalize Icons JSON",{"type":141,"tag":142,"props":1633,"children":1634},{},[1635,1637,1642,1644,1650,1651,1656],{"type":156,"value":1636},"By default, Nitro will bundle the icon collections you have installed locally (like ",{"type":141,"tag":322,"props":1638,"children":1640},{"className":1639},[],[1641],{"type":156,"value":1497},{"type":156,"value":1643},"), into your server bundle as dynamic chunks. When you have a large number of icons, this might make your bundling process slow and memory-intensive. You can change to externalize the icons JSON files by setting ",{"type":141,"tag":322,"props":1645,"children":1647},{"className":1646},[],[1648],{"type":156,"value":1649},"icon.serverBundle.externalizeIconsJson",{"type":156,"value":1342},{"type":141,"tag":322,"props":1652,"children":1654},{"className":1653},[],[1655],{"type":156,"value":1144},{"type":156,"value":240},{"type":141,"tag":359,"props":1658,"children":1660},{"className":440,"code":1659,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt/icon'\n  ],\n  icon: {\n    serverBundle: {\n      externalizeIconsJson: true,\n    }\n  },\n})\n",[1661],{"type":141,"tag":322,"props":1662,"children":1663},{"__ignoreMap":14},[1664],{"type":156,"value":1659},{"type":141,"tag":142,"props":1666,"children":1667},{},[1668,1670,1677,1679,1685],{"type":156,"value":1669},"Note that this will require your production Node.js server to be able to import JSON files (Note that as in Node.js v22, ",{"type":141,"tag":162,"props":1671,"children":1674},{"href":1672,"rel":1673},"https://nodejs.org/api/esm.html#json-modules",[166],[1675],{"type":156,"value":1676},"JSON modules are still an experimental feature",{"type":156,"value":1678},"). In the final build, it will contain statements like ",{"type":141,"tag":322,"props":1680,"children":1682},{"className":1681},[],[1683],{"type":156,"value":1684},"() => import('@iconify-json/ph/icons.json', { with: { type: 'json' } })",{"type":156,"value":240},{"type":141,"tag":142,"props":1687,"children":1688},{},[1689],{"type":156,"value":1690},"Also note that in some serverless environments, like Cloudflare Workers, where they don't have dynamic imports, they will always be inlined regardless of this option.",{"type":141,"tag":142,"props":1692,"children":1693},{},[1694,1696,1702],{"type":156,"value":1695},"This option will be ignored when ",{"type":141,"tag":322,"props":1697,"children":1699},{"className":1698},[],[1700],{"type":156,"value":1701},"icon.serverBundle.remote",{"type":156,"value":1703}," is enabled.",{"type":141,"tag":1031,"props":1705,"children":1707},{"id":1706},"completely-disable-server-bundle",[1708],{"type":156,"value":1709},"Completely Disable Server Bundle",{"type":141,"tag":142,"props":1711,"children":1712},{},[1713,1715,1721,1722,1727,1728,1734,1735],{"type":156,"value":1714},"If you want to disable the server bundle completely, you can set ",{"type":141,"tag":322,"props":1716,"children":1718},{"className":1717},[],[1719],{"type":156,"value":1720},"icon.serverBundle",{"type":156,"value":1342},{"type":141,"tag":322,"props":1723,"children":1725},{"className":1724},[],[1726],{"type":156,"value":1348},{"type":156,"value":905},{"type":141,"tag":322,"props":1729,"children":1731},{"className":1730},[],[1732],{"type":156,"value":1733},"provider",{"type":156,"value":1342},{"type":141,"tag":322,"props":1736,"children":1738},{"className":1737},[],[1739],{"type":156,"value":1740},"iconify",{"type":141,"tag":359,"props":1742,"children":1744},{"className":440,"code":1743,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt/icon'\n  ],\n  icon: {\n    provider: 'iconify',\n    serverBundle: false,\n  },\n})\n",[1745],{"type":141,"tag":322,"props":1746,"children":1747},{"__ignoreMap":14},[1748],{"type":156,"value":1743},{"type":141,"tag":142,"props":1750,"children":1751},{},[1752],{"type":156,"value":1753},"This will make requests to Iconify API every time the client requests an icon. We do not recommend doing so unless the other options are not feasible.",{"type":141,"tag":636,"props":1755,"children":1757},{"id":1756},"client-bundle",[1758],{"type":156,"value":1759},"Client Bundle",{"type":141,"tag":142,"props":1761,"children":1762},{},[1763],{"type":156,"value":1764},"For icons that you know you are going to use frequently, you can bundle them with your client bundle to avoid network requests.",{"type":141,"tag":1031,"props":1766,"children":1768},{"id":1767},"prefetch-preload-icons",[1769],{"type":156,"value":1770},"Prefetch (Preload) Icons",{"type":141,"tag":142,"props":1772,"children":1773},{},[1774],{"type":156,"value":1775},"If you want icons to be available on first render, use the client bundle as the prefetch mechanism:",{"type":141,"tag":359,"props":1777,"children":1779},{"className":440,"code":1778,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt/icon',\n  ],\n  icon: {\n    clientBundle: {\n      // Explicitly pre-bundle known icons\n      icons: ['uil:github', 'heroicons:home'],\n      // Keep disabled if you only want explicit entries\n      scan: false,\n    },\n  },\n})\n",[1780],{"type":141,"tag":322,"props":1781,"children":1782},{"__ignoreMap":14},[1783],{"type":156,"value":1778},{"type":141,"tag":142,"props":1785,"children":1786},{},[1787],{"type":156,"value":1788},"You can also enable static scanning to pre-bundle icons referenced literally in your source files:",{"type":141,"tag":359,"props":1790,"children":1792},{"className":440,"code":1791,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt/icon',\n  ],\n  icon: {\n    clientBundle: {\n      // Automatically includes statically-detected icon usages\n      scan: true,\n      // Keep explicit entries for dynamic icon names\n      icons: ['uil:github'],\n    },\n  },\n})\n",[1793],{"type":141,"tag":322,"props":1794,"children":1795},{"__ignoreMap":14},[1796],{"type":156,"value":1791},{"type":141,"tag":142,"props":1798,"children":1799},{},[1800,1802,1807,1809,1814],{"type":156,"value":1801},"If you want to disable runtime icon fetching entirely, see ",{"type":141,"tag":162,"props":1803,"children":1805},{"href":1804},"#disabling-runtime-fetching",[1806],{"type":156,"value":1036},{"type":156,"value":1808}," for the ",{"type":141,"tag":322,"props":1810,"children":1812},{"className":1811},[],[1813],{"type":156,"value":1055},{"type":156,"value":1815}," + client bundle pattern.",{"type":141,"tag":307,"props":1817,"children":1818},{},[1819],{"type":141,"tag":142,"props":1820,"children":1821},{},[1822,1826,1828,1834,1836,1842],{"type":141,"tag":314,"props":1823,"children":1824},{},[1825],{"type":156,"value":817},{"type":156,"value":1827},"\nStatic scanning only detects literal icon names. See ",{"type":141,"tag":162,"props":1829,"children":1831},{"href":1830},"#scan-components",[1832],{"type":156,"value":1833},"Scan Components",{"type":156,"value":1835}," for details and examples, and ",{"type":141,"tag":162,"props":1837,"children":1839},{"href":1838},"#rendering-icons-in-component-tests",[1840],{"type":156,"value":1841},"Rendering Icons in Component Tests",{"type":156,"value":1843}," for test-environment setup.",{"type":141,"tag":1031,"props":1845,"children":1847},{"id":1846},"available-options",[1848],{"type":156,"value":1849},"Available Options",{"type":141,"tag":359,"props":1851,"children":1853},{"className":440,"code":1852,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt/icon'\n  ],\n  icon: {\n    clientBundle: {\n      // list of icons to include in the client bundle\n      icons: [\n        'uil:github',\n        'logos:vitejs'\n      ],\n\n      // scan all components in the project and include icons \n      scan: true,\n\n      // include all custom collections in the client bundle\n      includeCustomCollections: true, \n\n      // guard for uncompressed bundle size, will fail the build if exceeds\n      sizeLimitKb: 256,\n    },\n  },\n})\n",[1854],{"type":141,"tag":322,"props":1855,"children":1856},{"__ignoreMap":14},[1857],{"type":156,"value":1852},{"type":141,"tag":142,"props":1859,"children":1860},{},[1861,1867,1869,1874,1876,1881],{"type":141,"tag":322,"props":1862,"children":1864},{"className":1863},[],[1865],{"type":156,"value":1866},"includeCustomCollections",{"type":156,"value":1868}," will include all the custom collections you have defined in ",{"type":141,"tag":322,"props":1870,"children":1872},{"className":1871},[],[1873],{"type":156,"value":876},{"type":156,"value":1875}," in the client bundle. It's disabled by default but will automatically enable when ",{"type":141,"tag":322,"props":1877,"children":1879},{"className":1878},[],[1880],{"type":156,"value":1004},{"type":156,"value":1882}," is set.",{"type":141,"tag":1031,"props":1884,"children":1886},{"id":1885},"scan-components",[1887],{"type":156,"value":1833},{"type":141,"tag":142,"props":1889,"children":1890},{},[1891,1893,1899],{"type":156,"value":1892},"When ",{"type":141,"tag":322,"props":1894,"children":1896},{"className":1895},[],[1897],{"type":156,"value":1898},"scan",{"type":156,"value":1900}," is enabled, the module will scan all the components in your project and include the icons used in the client bundle. This would significantly reduce the number of network requests needed for statically known icons, but might also increase the client bundle size depending on the number of icons used in your project.",{"type":141,"tag":142,"props":1902,"children":1903},{},[1904],{"type":156,"value":1905},"You can also fine-tune tine scanning targets like:",{"type":141,"tag":359,"props":1907,"children":1909},{"className":440,"code":1908,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt/icon'\n  ],\n  icon: {\n    clientBundle: {\n      scan: {\n        // note that when you specify those values, the default behavior will be overridden\n        globInclude: ['components/**/*.vue', /* ... */],\n        globExclude: ['node_modules', 'dist', /* ... */],\n      },\n    },\n  },\n})\n",[1910],{"type":141,"tag":322,"props":1911,"children":1912},{"__ignoreMap":14},[1913],{"type":156,"value":1908},{"type":141,"tag":307,"props":1915,"children":1916},{},[1917,1926],{"type":141,"tag":142,"props":1918,"children":1919},{},[1920,1924],{"type":141,"tag":314,"props":1921,"children":1922},{},[1923],{"type":156,"value":817},{"type":156,"value":1925},"\nScanning is relying on static analysis, which means only literal usages will be detected. Avoid constructing the icon name dynamically whenever possible.",{"type":141,"tag":359,"props":1927,"children":1929},{"className":965,"code":1928,"language":967,"meta":14,"style":364},"\u003Ctemplate>\n  \u003C!-- Avoid this -->\n  \u003CIcon :name=\"`carbon:${dark ? 'moon' : 'sun'}`\" />\n\n  \u003C!-- Prefer this -->\n  \u003CIcon :name=\"dark ? 'carbon:moon' : 'carbon:sun'\" />\n\u003C/template>\n",[1930],{"type":141,"tag":322,"props":1931,"children":1932},{"__ignoreMap":14},[1933],{"type":156,"value":1928},{"type":141,"tag":636,"props":1935,"children":1937},{"id":1936},"render-function",[1938],{"type":156,"value":1939},"Render Function",{"type":141,"tag":142,"props":1941,"children":1942},{},[1943,1945,1951,1953,1959],{"type":156,"value":1944},"You can use the ",{"type":141,"tag":322,"props":1946,"children":1948},{"className":1947},[],[1949],{"type":156,"value":1950},"Icon",{"type":156,"value":1952}," component in a render function (useful if you create a functional component), for this you can import it from ",{"type":141,"tag":322,"props":1954,"children":1956},{"className":1955},[],[1957],{"type":156,"value":1958},"#components",{"type":156,"value":558},{"type":141,"tag":359,"props":1961,"children":1963},{"className":440,"code":1962,"language":442,"meta":14,"style":364},"import { Icon } from '#components'\n",[1964],{"type":141,"tag":322,"props":1965,"children":1966},{"__ignoreMap":14},[1967],{"type":156,"value":1962},{"type":141,"tag":142,"props":1969,"children":1970},{},[1971,1973,1979],{"type":156,"value":1972},"See an example of a ",{"type":141,"tag":322,"props":1974,"children":1976},{"className":1975},[],[1977],{"type":156,"value":1978},"\u003CMyIcon>",{"type":156,"value":1980}," component:",{"type":141,"tag":359,"props":1982,"children":1984},{"className":965,"code":1983,"language":967,"meta":14,"style":364},"\u003Cscript setup>\nimport { Icon } from '#components'\n\nconst MyIcon = h(Icon, { name: 'uil:twitter' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cp>\u003CMyIcon />\u003C/p>\n\u003C/template>\n",[1985],{"type":141,"tag":322,"props":1986,"children":1987},{"__ignoreMap":14},[1988],{"type":156,"value":1983},{"type":141,"tag":636,"props":1990,"children":1992},{"id":1991},"rendering-icons-in-component-tests",[1993],{"type":156,"value":1841},{"type":141,"tag":142,"props":1995,"children":1996},{},[1997,1999,2009,2010,2020,2022,2027],{"type":156,"value":1998},"In in-browser component testing environments (such as ",{"type":141,"tag":162,"props":2000,"children":2003},{"href":2001,"rel":2002},"https://vitest.dev/guide/browser/",[166],[2004],{"type":141,"tag":478,"props":2005,"children":2006},{},[2007],{"type":156,"value":2008},"Vitest Browser Mode",{"type":156,"value":534},{"type":141,"tag":162,"props":2011,"children":2014},{"href":2012,"rel":2013},"https://on.cypress.io/component-testing",[166],[2015],{"type":141,"tag":478,"props":2016,"children":2017},{},[2018],{"type":156,"value":2019},"Cypress Component Testing",{"type":156,"value":2021},"), the internal Nuxt server routes used to fetch icons on demand are ",{"type":141,"tag":478,"props":2023,"children":2024},{},[2025],{"type":156,"value":2026},"not available",{"type":156,"value":2028},". As a result, icons may fail to render during tests.",{"type":141,"tag":142,"props":2030,"children":2031},{},[2032,2034,2038,2040,2044],{"type":156,"value":2033},"To ensure icons render correctly in component tests, configure ",{"type":141,"tag":478,"props":2035,"children":2036},{},[2037],{"type":156,"value":11},{"type":156,"value":2039}," to use the ",{"type":141,"tag":478,"props":2041,"children":2042},{},[2043],{"type":156,"value":1047},{"type":156,"value":2045}," when running in test mode.",{"type":141,"tag":307,"props":2047,"children":2048},{},[2049],{"type":141,"tag":142,"props":2050,"children":2051},{},[2052,2057,2059,2069],{"type":141,"tag":478,"props":2053,"children":2054},{},[2055],{"type":156,"value":2056},"Note",{"type":156,"value":2058},"\nProjects using ",{"type":141,"tag":162,"props":2060,"children":2063},{"href":2061,"rel":2062},"https://ui.nuxt.com/",[166],[2064],{"type":141,"tag":478,"props":2065,"children":2066},{},[2067],{"type":156,"value":2068},"@nuxt/ui",{"type":156,"value":2070}," must do this to see any UI icons during component testing.",{"type":141,"tag":1031,"props":2072,"children":2074},{"id":2073},"requirements",[2075],{"type":156,"value":2076},"Requirements",{"type":141,"tag":242,"props":2078,"children":2079},{},[2080,2092],{"type":141,"tag":246,"props":2081,"children":2082},{},[2083,2085,2091],{"type":156,"value":2084},"Install the icon collections you use locally (for example, ",{"type":141,"tag":322,"props":2086,"children":2088},{"className":2087},[],[2089],{"type":156,"value":2090},"@iconify-json/lucide",{"type":156,"value":682},{"type":141,"tag":246,"props":2093,"children":2094},{},[2095,2097,2102],{"type":156,"value":2096},"Icons will ",{"type":141,"tag":478,"props":2098,"children":2099},{},[2100],{"type":156,"value":2101},"not",{"type":156,"value":2103}," be fetched remotely when using the client bundle.",{"type":141,"tag":1031,"props":2105,"children":2107},{"id":2106},"test-only-configuration",[2108],{"type":156,"value":2109},"Test-only Configuration",{"type":141,"tag":142,"props":2111,"children":2112},{},[2113,2115,2121],{"type":156,"value":2114},"Conditionally switch to the client bundle in your Nuxt config when ",{"type":141,"tag":322,"props":2116,"children":2118},{"className":2117},[],[2119],{"type":156,"value":2120},"NODE_ENV === 'test'",{"type":156,"value":558},{"type":141,"tag":359,"props":2123,"children":2125},{"className":440,"code":2124,"language":442,"meta":14,"style":364},"export default defineNuxtConfig({\n  modules: [\n    '@nuxt/icon',\n  ],\n\n  icon: process.env.NODE_ENV !== 'test'\n    ? {\n        // Production or development icon configuration\n      }\n    : {\n        // Disable all network icon fetching in component tests\n        provider: 'none',\n\n        clientBundle: {\n          // Explicitly include dynamically constructed icons\n          icons: ['lucide:check'],\n\n          // Scan your app and Nuxt UI runtime for static icon usage\n          scan: {\n            globInclude: [\n              '{app,shared}/**',\n              'node_modules/@nuxt/ui/dist/**',\n            ],\n            globExclude: ['node_modules'],\n          },\n        },\n      },\n})\n",[2126],{"type":141,"tag":322,"props":2127,"children":2128},{"__ignoreMap":14},[2129],{"type":156,"value":2124},{"type":141,"tag":307,"props":2131,"children":2132},{},[2133,2141],{"type":141,"tag":142,"props":2134,"children":2135},{},[2136],{"type":141,"tag":478,"props":2137,"children":2138},{},[2139],{"type":156,"value":2140},"Tips",{"type":141,"tag":242,"props":2142,"children":2143},{},[2144,2156],{"type":141,"tag":246,"props":2145,"children":2146},{},[2147,2149,2155],{"type":156,"value":2148},"Dynamically generated icon names may not be detected by static scanning—add them explicitly to ",{"type":141,"tag":322,"props":2150,"children":2152},{"className":2151},[],[2153],{"type":156,"value":2154},"icons",{"type":156,"value":240},{"type":141,"tag":246,"props":2157,"children":2158},{},[2159,2161,2167,2168,2174],{"type":156,"value":2160},"For large apps, consider moving test-only configuration into ",{"type":141,"tag":322,"props":2162,"children":2164},{"className":2163},[],[2165],{"type":156,"value":2166},"vitest.config.ts",{"type":156,"value":534},{"type":141,"tag":322,"props":2169,"children":2171},{"className":2170},[],[2172],{"type":156,"value":2173},"cypress.config.ts",{"type":156,"value":2175}," for clarity.",{"type":141,"tag":267,"props":2177,"children":2179},{"id":2178},"contributing",[2180],{"type":156,"value":2181},"Contributing 🙏",{"type":141,"tag":2183,"props":2184,"children":2185},"ol",{},[2186,2191,2228,2241],{"type":141,"tag":246,"props":2187,"children":2188},{},[2189],{"type":156,"value":2190},"Clone this repository",{"type":141,"tag":246,"props":2192,"children":2193},{},[2194,2196,2202,2204,2210,2212,2218,2220,2227],{"type":156,"value":2195},"Install dependencies using ",{"type":141,"tag":322,"props":2197,"children":2199},{"className":2198},[],[2200],{"type":156,"value":2201},"pnpm install",{"type":156,"value":2203}," (install ",{"type":141,"tag":322,"props":2205,"children":2207},{"className":2206},[],[2208],{"type":156,"value":2209},"pnpm",{"type":156,"value":2211}," with ",{"type":141,"tag":322,"props":2213,"children":2215},{"className":2214},[],[2216],{"type":156,"value":2217},"corepack enable",{"type":156,"value":2219},", ",{"type":141,"tag":162,"props":2221,"children":2224},{"href":2222,"rel":2223},"https://pnpm.io/installation#using-corepack",[166],[2225],{"type":156,"value":2226},"learn more",{"type":156,"value":515},{"type":141,"tag":246,"props":2229,"children":2230},{},[2231,2233,2239],{"type":156,"value":2232},"Run ",{"type":141,"tag":322,"props":2234,"children":2236},{"className":2235},[],[2237],{"type":156,"value":2238},"npm run dev:prepare",{"type":156,"value":2240}," to generate type stubs.",{"type":141,"tag":246,"props":2242,"children":2243},{},[2244,2246,2252,2254,2261],{"type":156,"value":2245},"Use ",{"type":141,"tag":322,"props":2247,"children":2249},{"className":2248},[],[2250],{"type":156,"value":2251},"npm run dev",{"type":156,"value":2253}," to start ",{"type":141,"tag":162,"props":2255,"children":2258},{"href":2256,"rel":2257},"https://github.com/nuxt-modules/icon/tree/main/playground",[166],[2259],{"type":156,"value":2260},"playground",{"type":156,"value":2262}," in development mode.",{"type":141,"tag":267,"props":2264,"children":2266},{"id":2265},"credits",[2267],{"type":156,"value":2268},"Credits 💌",{"type":141,"tag":242,"props":2270,"children":2271},{},[2272,2284],{"type":141,"tag":246,"props":2273,"children":2274},{},[2275,2282],{"type":141,"tag":162,"props":2276,"children":2279},{"href":2277,"rel":2278},"https://github.com/benjamincanac",[166],[2280],{"type":156,"value":2281},"@benjamincanac",{"type":156,"value":2283}," for the initial version",{"type":141,"tag":246,"props":2285,"children":2286},{},[2287,2294,2296],{"type":141,"tag":162,"props":2288,"children":2291},{"href":2289,"rel":2290},"https://github.com/cyberalien",[166],[2292],{"type":156,"value":2293},"@cyberalien",{"type":156,"value":2295}," for making ",{"type":141,"tag":162,"props":2297,"children":2300},{"href":2298,"rel":2299},"https://github.com/iconify/iconify",[166],[2301],{"type":156,"value":238},{"type":141,"tag":267,"props":2303,"children":2305},{"id":2304},"license",[2306],{"type":156,"value":2307},"License 📎",{"type":141,"tag":142,"props":2309,"children":2310},{},[2311],{"type":141,"tag":162,"props":2312,"children":2314},{"href":184,"rel":2313},[166],[2315],{"type":156,"value":2316},"MIT License",{"type":141,"tag":2318,"props":2319,"children":2320},"style",{},[2321],{"type":156,"value":14},{"title":14,"searchDepth":62,"depth":62,"links":2323},[2324,2325,2326,2337,2338,2339],{"id":269,"depth":62,"text":272},{"id":349,"depth":62,"text":352},{"id":470,"depth":62,"text":473,"children":2327},[2328,2329,2330,2331,2332,2333,2334,2335,2336],{"id":638,"depth":55,"text":641},{"id":747,"depth":55,"text":750},{"id":830,"depth":55,"text":833},{"id":1067,"depth":55,"text":1070},{"id":1158,"depth":55,"text":1161},{"id":1459,"depth":55,"text":1462},{"id":1756,"depth":55,"text":1759},{"id":1936,"depth":55,"text":1939},{"id":1991,"depth":55,"text":1841},{"id":2178,"depth":62,"text":2181},{"id":2265,"depth":62,"text":2268},{"id":2304,"depth":62,"text":2307}]