一行代码用上全网图标oku-nuxt3-template 中 UnoCSS Icones 图标集成指南【免费下载链接】oku-nuxt3-templateNuxt 3 best starter repo, Tailwindcss, Sass, Headless UI, Vue, Pinia, Vite, Eslint, i18n, Naive UI项目地址: https://gitcode.com/gh_mirrors/ok/oku-nuxt3-templateoku-nuxt3-template 是一款 Nuxt 3 最佳起步模板内置 UnoCSS 与 Icones 图标方案。借助它你只需在 Vue 模板里写一行UnoIcon标签加一个类名就能调用全网数千款开源 SVG 图标无需逐个复制图片、导入组件非常适合新手快速上手图标系统。为什么这套图标方案值得推荐传统做法是把 SVG 图标下载下来、逐个保存为文件或组件图标多了之后目录会变得非常臃肿。而 oku-nuxt3-template 采用的思路是UnoCSS提供原子化 CSS 能力并内置presetIcons图标预设Icones / Iconify生态聚合了全网图标集按需收集、按需生成没有用到的图标不会产生任何体积。本模板已预装四款主流图标集位于 package.json 的依赖中图标集依赖风格特点类名前缀iconify-json/carbonIBM Carbon简洁线性i-carbon-iconify-json/phPhosphor支持双色duotonei-ph-iconify-json/icMaterial 风格圆角图标i-ic-iconify-json/twemoji彩色 Emoji适合国旗、表情i-twemoji-模板已帮你做好的三处配置1. 注册 UnoCSS 模块在 nuxt.config.ts 的modules中引入了unocss/nuxtUnoCSS 会在构建时自动扫描源码并生成样式。2. 开启图标预设nuxt.config.ts中的unocss字段做了关键配置icons: true并加载presetIcons同时设置scale: 1.2图标默认放大 1.2 倍和display: inline-block让图标与文字自然对齐省去手动调边距的麻烦。3. 声明 safelistnuxt.config.ts中还写入了两条 safelistsafelist: [i-twemoji-flag-us-outlying-islands, i-twemoji-flag-turkey]它对应 src/availableLocales.ts 中语言切换器用到的两面国旗图标——凡是运行时才拼出来的类名UnoCSS 静态扫描不到加进 safelist 才能保证样式被生成。一行代码的使用姿势命名规则很简单i-图标集-图标名。在任意 Vue 模板中这样写即可UnoIcon classi-carbon-menu /就这么一行菜单图标出现。真实例子来自 src/components/starter.vue数据里只存图标类名字符串如i-carbon-store、i-carbon-milestone再由 src/components/list.vue 统一渲染实现了数据驱动图标。样式上图标就是普通元素直接叠加原子化类即可UnoIcon classi-ph-palette-duotone text-lg dark:text-white /比如 src/components/tem/ColorChange.vue 里的主题切换按钮用dark:前缀就实现了深色模式下自动换色。三步接入任意新图标选图标确定想要的图标名和图标集例如 Phosphor 的github-logo-duotone装依赖若该图标集未安装pnpm add -D iconify-json/ph已装则跳过写类名模板里写UnoIcon classi-ph-github-logo-duotone /完成。⚠️ 注意如果类名是运行时动态生成的记得同步加入nuxt.config.ts的safelist否则图标会消失。新手避坑清单前缀别写错i-是固定前缀后面紧跟图标集名中间用连字符连接同名图标不同集i-ph-menu与i-carbon-menu是两款不同的图标选型时认准图标集前缀控制大小配合text-lg、h-6 w-6等工具类即可无需再写 SVG 的宽高属性别整包引入Icones 方案的最大优势就是用哪个生成哪个保持按需使用才能发挥体积优势。掌握了以上要点你就可以在 oku-nuxt3-template 基础上自由扩展任何页面——从国旗 Emoji 到导航菜单全网图标一行代码信手拈来 【免费下载链接】oku-nuxt3-templateNuxt 3 best starter repo, Tailwindcss, Sass, Headless UI, Vue, Pinia, Vite, Eslint, i18n, Naive UI项目地址: https://gitcode.com/gh_mirrors/ok/oku-nuxt3-template创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 一行代码用上全网图标：oku-nuxt3-template 中 UnoCSS Icones 图标集成指南
一行代码用上全网图标oku-nuxt3-template 中 UnoCSS Icones 图标集成指南【免费下载链接】oku-nuxt3-templateNuxt 3 best starter repo, Tailwindcss, Sass, Headless UI, Vue, Pinia, Vite, Eslint, i18n, Naive UI项目地址: https://gitcode.com/gh_mirrors/ok/oku-nuxt3-templateoku-nuxt3-template 是一款 Nuxt 3 最佳起步模板内置 UnoCSS 与 Icones 图标方案。借助它你只需在 Vue 模板里写一行UnoIcon标签加一个类名就能调用全网数千款开源 SVG 图标无需逐个复制图片、导入组件非常适合新手快速上手图标系统。为什么这套图标方案值得推荐传统做法是把 SVG 图标下载下来、逐个保存为文件或组件图标多了之后目录会变得非常臃肿。而 oku-nuxt3-template 采用的思路是UnoCSS提供原子化 CSS 能力并内置presetIcons图标预设Icones / Iconify生态聚合了全网图标集按需收集、按需生成没有用到的图标不会产生任何体积。本模板已预装四款主流图标集位于 package.json 的依赖中图标集依赖风格特点类名前缀iconify-json/carbonIBM Carbon简洁线性i-carbon-iconify-json/phPhosphor支持双色duotonei-ph-iconify-json/icMaterial 风格圆角图标i-ic-iconify-json/twemoji彩色 Emoji适合国旗、表情i-twemoji-模板已帮你做好的三处配置1. 注册 UnoCSS 模块在 nuxt.config.ts 的modules中引入了unocss/nuxtUnoCSS 会在构建时自动扫描源码并生成样式。2. 开启图标预设nuxt.config.ts中的unocss字段做了关键配置icons: true并加载presetIcons同时设置scale: 1.2图标默认放大 1.2 倍和display: inline-block让图标与文字自然对齐省去手动调边距的麻烦。3. 声明 safelistnuxt.config.ts中还写入了两条 safelistsafelist: [i-twemoji-flag-us-outlying-islands, i-twemoji-flag-turkey]它对应 src/availableLocales.ts 中语言切换器用到的两面国旗图标——凡是运行时才拼出来的类名UnoCSS 静态扫描不到加进 safelist 才能保证样式被生成。一行代码的使用姿势命名规则很简单i-图标集-图标名。在任意 Vue 模板中这样写即可UnoIcon classi-carbon-menu /就这么一行菜单图标出现。真实例子来自 src/components/starter.vue数据里只存图标类名字符串如i-carbon-store、i-carbon-milestone再由 src/components/list.vue 统一渲染实现了数据驱动图标。样式上图标就是普通元素直接叠加原子化类即可UnoIcon classi-ph-palette-duotone text-lg dark:text-white /比如 src/components/tem/ColorChange.vue 里的主题切换按钮用dark:前缀就实现了深色模式下自动换色。三步接入任意新图标选图标确定想要的图标名和图标集例如 Phosphor 的github-logo-duotone装依赖若该图标集未安装pnpm add -D iconify-json/ph已装则跳过写类名模板里写UnoIcon classi-ph-github-logo-duotone /完成。⚠️ 注意如果类名是运行时动态生成的记得同步加入nuxt.config.ts的safelist否则图标会消失。新手避坑清单前缀别写错i-是固定前缀后面紧跟图标集名中间用连字符连接同名图标不同集i-ph-menu与i-carbon-menu是两款不同的图标选型时认准图标集前缀控制大小配合text-lg、h-6 w-6等工具类即可无需再写 SVG 的宽高属性别整包引入Icones 方案的最大优势就是用哪个生成哪个保持按需使用才能发挥体积优势。掌握了以上要点你就可以在 oku-nuxt3-template 基础上自由扩展任何页面——从国旗 Emoji 到导航菜单全网图标一行代码信手拈来 【免费下载链接】oku-nuxt3-templateNuxt 3 best starter repo, Tailwindcss, Sass, Headless UI, Vue, Pinia, Vite, Eslint, i18n, Naive UI项目地址: https://gitcode.com/gh_mirrors/ok/oku-nuxt3-template创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考