[{"data":1,"prerenderedAt":484},["ShallowReactive",2],{"project-nuxt-icons":3},{"id":4,"title":5,"available":6,"badges":7,"body":9,"client":467,"date":468,"description":469,"development":470,"duration":467,"extension":471,"image":472,"meta":473,"navigation":6,"path":474,"preview_type":467,"privacy":467,"role":467,"seo":475,"short_description":476,"status":477,"stem":478,"technology":479,"url":453,"weight":482,"__hash__":483},"projects/projects/nuxt-icons.md","NuxtIcons",true,[8],"code",{"type":10,"value":11,"toc":461},"minimark",[12,24,27,32,39,110,114,171,232,238,242,346,352,425,429,448,457],[13,14,15,19,20,23],"p",{},[16,17,18],"strong",{},"nuxt-icons"," is an open-source ",[16,21,22],{},"Nuxt module"," I wrote and published to npm. It solves a small but persistent annoyance - SVG icons are supposed to behave like text - inherit color, scale with font-size, sit on the baseline - but out of the box they don't.",[13,25,26],{},"This module fixes it.",[28,29,31],"h2",{"id":30},"how-it-works","How it works",[13,33,34,35,38],{},"You drop SVG files into ",[8,36,37],{},"assets/icons/",", and the module:",[40,41,42,52,62,72,78,91,104],"ul",{},[43,44,45,48,49],"li",{},[16,46,47],{},"Auto-registers"," everything in that folder so you can reference icons by filename: ",[8,50,51],{},"\u003Cnuxt-icon name=\"arrow-right\" />",[43,53,54,57,58,61],{},[16,55,56],{},"Strips fixed widths and heights"," from the SVGs at build time, so they scale with ",[8,59,60],{},"font-size"," like text does",[43,63,64,67,68,71],{},[16,65,66],{},"Applies sensible defaults",": ",[8,69,70],{},"width: 1em; height: 1em; vertical-align: middle"," - icons sit inline on the baseline without hacks",[43,73,74,77],{},[16,75,76],{},"Loads lazily"," - only icons you actually use end up in the bundle",[43,79,80,83,84,87,88],{},[16,81,82],{},"Supports nested folders"," for organization: ",[8,85,86],{},"icons/admin/badge.svg"," → ",[8,89,90],{},"\u003Cnuxt-icon name=\"admin/badge\" />",[43,92,93,96,97,100,101],{},[16,94,95],{},"Preserves original colors"," when you want them: add the ",[8,98,99],{},"filled"," attribute and the SVG keeps its own fill colors instead of inheriting ",[8,102,103],{},"currentColor",[43,105,106,109],{},[16,107,108],{},"HMR-friendly"," - edit an SVG in dev mode and it reloads instantly",[28,111,113],{"id":112},"installation","Installation",[115,116,117,142,157],"code-group",{},[118,119,125],"pre",{"className":120,"code":121,"filename":122,"language":123,"meta":124,"style":124},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add nuxt-icons\n","pnpm","bash","",[8,126,127],{"__ignoreMap":124},[128,129,132,135,139],"span",{"class":130,"line":131},"line",1,[128,133,122],{"class":134},"sBMFI",[128,136,138],{"class":137},"sfazB"," add",[128,140,141],{"class":137}," nuxt-icons\n",[118,143,146],{"className":120,"code":144,"filename":145,"language":123,"meta":124,"style":124},"npm install nuxt-icons\n","npm",[8,147,148],{"__ignoreMap":124},[128,149,150,152,155],{"class":130,"line":131},[128,151,145],{"class":134},[128,153,154],{"class":137}," install",[128,156,141],{"class":137},[118,158,161],{"className":120,"code":159,"filename":160,"language":123,"meta":124,"style":124},"yarn add nuxt-icons\n","yarn",[8,162,163],{"__ignoreMap":124},[128,164,165,167,169],{"class":130,"line":131},[128,166,160],{"class":134},[128,168,138],{"class":137},[128,170,141],{"class":137},[118,172,177],{"className":173,"code":174,"filename":175,"language":176,"meta":124,"style":124},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n    modules: ['nuxt-icons']\n})\n","nuxt.config.ts","ts",[8,178,179,200,223],{"__ignoreMap":124},[128,180,181,185,188,192,196],{"class":130,"line":131},[128,182,184],{"class":183},"s7zQu","export",[128,186,187],{"class":183}," default",[128,189,191],{"class":190},"s2Zo4"," defineNuxtConfig",[128,193,195],{"class":194},"sTEyZ","(",[128,197,199],{"class":198},"sMK4o","{\n",[128,201,203,207,210,213,216,218,220],{"class":130,"line":202},2,[128,204,206],{"class":205},"swJcz","    modules",[128,208,209],{"class":198},":",[128,211,212],{"class":194}," [",[128,214,215],{"class":198},"'",[128,217,18],{"class":137},[128,219,215],{"class":198},[128,221,222],{"class":194},"]\n",[128,224,226,229],{"class":130,"line":225},3,[128,227,228],{"class":198},"}",[128,230,231],{"class":194},")\n",[13,233,234,235,237],{},"Then create ",[8,236,37],{}," and drop your SVGs in.",[28,239,241],{"id":240},"usage-examples","Usage examples",[118,243,247],{"className":244,"code":245,"language":246,"meta":124,"style":124},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Inherits current text color and font-size -->\n\u003Cnuxt-icon name=\"arrow-right\" />\n\n\u003C!-- Keeps original colors (brand logos, flags, etc.) -->\n\u003Cnuxt-icon name=\"github\" filled />\n\n\u003C!-- Nested folder structure -->\n\u003Cnuxt-icon name=\"social/twitter\" />\n","vue",[8,248,249,255,281,286,292,315,320,326],{"__ignoreMap":124},[128,250,251],{"class":130,"line":131},[128,252,254],{"class":253},"sHwdD","\u003C!-- Inherits current text color and font-size -->\n",[128,256,257,260,263,267,270,273,276,278],{"class":130,"line":202},[128,258,259],{"class":198},"\u003C",[128,261,262],{"class":205},"nuxt-icon",[128,264,266],{"class":265},"spNyl"," name",[128,268,269],{"class":198},"=",[128,271,272],{"class":198},"\"",[128,274,275],{"class":137},"arrow-right",[128,277,272],{"class":198},[128,279,280],{"class":198}," />\n",[128,282,283],{"class":130,"line":225},[128,284,285],{"emptyLinePlaceholder":6},"\n",[128,287,289],{"class":130,"line":288},4,[128,290,291],{"class":253},"\u003C!-- Keeps original colors (brand logos, flags, etc.) -->\n",[128,293,295,297,299,301,303,305,308,310,313],{"class":130,"line":294},5,[128,296,259],{"class":198},[128,298,262],{"class":205},[128,300,266],{"class":265},[128,302,269],{"class":198},[128,304,272],{"class":198},[128,306,307],{"class":137},"github",[128,309,272],{"class":198},[128,311,312],{"class":265}," filled",[128,314,280],{"class":198},[128,316,318],{"class":130,"line":317},6,[128,319,285],{"emptyLinePlaceholder":6},[128,321,323],{"class":130,"line":322},7,[128,324,325],{"class":253},"\u003C!-- Nested folder structure -->\n",[128,327,329,331,333,335,337,339,342,344],{"class":130,"line":328},8,[128,330,259],{"class":198},[128,332,262],{"class":205},[128,334,266],{"class":265},[128,336,269],{"class":198},[128,338,272],{"class":198},[128,340,341],{"class":137},"social/twitter",[128,343,272],{"class":198},[128,345,280],{"class":198},[13,347,348,349,209],{},"Styling happens via regular CSS - just target ",[8,350,351],{},".nuxt-icon svg",[118,353,357],{"className":354,"code":355,"language":356,"meta":124,"style":124},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".nuxt-icon svg {\n    font-size: 1.5rem;\n    color: var(--color-primary);\n    transition: color 0.2s;\n}\n","css",[8,358,359,372,387,405,420],{"__ignoreMap":124},[128,360,361,364,366,369],{"class":130,"line":131},[128,362,363],{"class":198},".",[128,365,262],{"class":134},[128,367,368],{"class":134}," svg",[128,370,371],{"class":198}," {\n",[128,373,374,378,380,384],{"class":130,"line":202},[128,375,377],{"class":376},"sqsOY","    font-size",[128,379,209],{"class":198},[128,381,383],{"class":382},"sbssI"," 1.5rem",[128,385,386],{"class":198},";\n",[128,388,389,392,394,397,399,402],{"class":130,"line":225},[128,390,391],{"class":376},"    color",[128,393,209],{"class":198},[128,395,396],{"class":190}," var",[128,398,195],{"class":198},[128,400,401],{"class":194},"--color-primary",[128,403,404],{"class":198},");\n",[128,406,407,410,412,415,418],{"class":130,"line":288},[128,408,409],{"class":376},"    transition",[128,411,209],{"class":198},[128,413,414],{"class":194}," color ",[128,416,417],{"class":382},"0.2s",[128,419,386],{"class":198},[128,421,422],{"class":130,"line":294},[128,423,424],{"class":198},"}\n",[28,426,428],{"id":427},"tech-details","Tech details",[13,430,431,432,435,436,439,440,443,444,447],{},"Written in ",[16,433,434],{},"Vue"," and ",[16,437,438],{},"TypeScript",", currently at ",[16,441,442],{},"v4.0.0"," with full Nuxt 4 support. Open source, MIT licensed, and used in most of my own Nuxt projects before ",[8,445,446],{},"@nuxt/icon"," became the mainstream solution.",[449,450,454],"callout",{"color":451,"icon":452,"to":453},"neutral","i-simple-icons-github","https://github.com/gitFoxCode/nuxt-icons",[13,455,456],{},"Source code on GitHub",[458,459,460],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":124,"searchDepth":202,"depth":202,"links":462},[463,464,465,466],{"id":30,"depth":202,"text":31},{"id":112,"depth":202,"text":113},{"id":240,"depth":202,"text":241},{"id":427,"depth":202,"text":428},null,"2022-04-08","nuxt-icons is an open-source Nuxt module I wrote and published to npm. It solves a small but persistent annoyance - SVG icons are supposed to behave like text - inherit color, scale with font-size, sit on the baseline - but out of the box they don't.",false,"md","nuxt-icons.png",{},"/projects/nuxt-icons",{"title":5,"description":469},"Module for Nuxt allowing pleasant use of svg icons","Active","projects/nuxt-icons",[480,481],"javascript","nuxt",90,"vllNdSvZnspVGp70vbob1cej0nuHkCOJUO6lm6LYDNU",1776886072007]