优雅的图标集成方案：UnoCSS preset-icons

#优势

• 支持尺寸、颜色等动态修改
• 大量图标支持：icon-sets.iconify.design
• 按需/灵活使用

#配置

• package.json

$ pnpm install @unocss/nuxt @unocss/reset
$ pnpm install @iconify/json -D

• nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@unocss/nuxt"],
});

• uno.config.ts

import { presetIcons, defineConfig } from "@unocss";

export default defineConfig({
  presets: [
    presetIcons({
      /* 选项 */
    }),
    // ...其他预设
  ],
});

#使用

• xxx.vue

<template>
  <div class="i-hugeicons:moon-landing w-[24px] h-[24px] mr-[10px] font-600" />
</template>

#参考

• UnoCSS · 图标预设
• antfu · 聊聊纯 CSS 图标