@yubei826/unocss-config

一个可重用的 UnoCSS 配置包，支持本地 SVG 图标和在线图标集合。

✨ 特性

• 📦 预配置的 UnoCSS 设置，开箱即用
• 🎨 支持本地 SVG 图标，自动生成 safelist
• 🌐 支持多种在线图标集合（Material Design Icons、Carbon 等）
• 🛠️ 内置常用 CSS 工具类和布局规则
• 📝 完整的 TypeScript 类型支持
• 🔧 高度可配置，满足不同项目需求
• ⚡ 与 Vite 完美集成，构建速度快

📦 安装

pnpm install @yubei826/unocss-config

🚀 快速开始

1. 在项目中创建 UnoCSS 配置文件

创建 unocss.config.ts：

import { defineUnoConfig } from "@yubei826/unocss-config";

export default defineUnoConfig({
  useOnlineIcon: false, // 是否使用在线图标
  iconsDir: "./src/assets/icons", // 本地 SVG 图标目录
  collections: {
    // 添加额外的在线图标集合
    mdi: () => import('@iconify-json/mdi/icons.json').then((i) => i.default),
    carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
    logos: () => import('@iconify-json/logos/icons.json').then(i => i.default),
  },
  // 添加自定义规则
  rules: [
    [/^my-custom-rule$/, ([], { rawSelector }) => {
      const selector = e(rawSelector);
      return `${selector} { color: blue; }`;
    }]
  ]
});

// vue 项目可能用到这个包
@iconify/vue

2. 配置 Vite

在 vite.config.ts 中：

也可以直接安装 @yubei826/vite-config 包，它已经集成了 UnoCSS 配置

import { defineConfig } from 'vite'
import UnoCSS from '@unocss/vite'
import unocssConfig from './unocss.config'

export default defineConfig({
  plugins: [
    UnoCSS(unocssConfig),
    // 其他插件...
  ]
})


// main.js 添加 UnoCSS 虚拟样式
import 'virtual:uno.css'

3. 在项目中使用图标

<!-- 使用本地 SVG 图标 -->
<div class="i-svg:home"></div>

<!-- 使用在线图标（如果启用） -->
<div class="i-mdi:account"></div>
<div class="i-carbon:user-avatar"></div>

<!-- 使用内置工具类 -->
<div class="custom-hover layout-border__left">悬停效果和左边框</div>
<div class="overflow-ellipsis">文本溢出显示省略号</div>

⚙️ 配置选项

UnocssConfigOptions

| 选项 | 类型 | 默认值 | 描述 | |------|------|--------|------| | useOnlineIcon | boolean | false | 是否启用在线图标集合 | | iconsDir | string | './src/assets/icons' | 本地 SVG 图标目录路径 | | iconPrefix | string | 'i-' | 图标类名前缀 | | collections | Record<string, () => Promise<IconifyJSON> \| IconifyJSON> | {} | 自定义在线图标集合 | | rules | Rule[] | [] | 自定义 UnoCSS 规则 | | presets | any[] | [] | 自定义 UnoCSS 预设 | | transformers | any[] | [] | 自定义 UnoCSS 转换器 |

内置规则

包内置了以下实用规则：

• overflow-ellipsis - 文本溢出显示省略号

• custom-hover - 自定义悬停效果

• layout-border__left - 左侧边框

• layout-border__right - 右侧边框

• layout-border__top - 顶部边框

• layout-border__bottom - 底部边框

🤝 贡献

欢迎提交 Issue 和 Pull Request！

• 克隆本项目

• 创建特性分支 (git checkout -b feature/AmazingFeature)

• 提交更改 (git commit -m 'Add some AmazingFeature')

• 推送到分支 (git push origin feature/AmazingFeature)

• 开启 Pull Request 并描述您的更改

📄 许可证

本项目基于 MIT 许可证开源，您可以在遵守许可证条款的前提下自由使用、修改和分发本项目的代码。

许可证详情

请参阅 LICENSE 文件了解更多详情。

🙏 致谢

• UnoCSS - 即时按需的原子化 CSS 引擎

• Iconify - 统一的图标框架

• Vite - 下一代前端构建工具

📞 支持

如果您有任何问题或建议，请通过以下方式联系：

• 创建 Issue

• 发送邮件至: ******@qq.com

⭐ 如果您觉得这个项目有用，请给它一个星标！