🎉TinyVue v3.22.0 正式发布：支持深色模式、增加基于 UnoCSS 的图标库、支持更丰富的 TypeScript 类型声明

你好，我是 Kagol，个人公众号：前端开源星球。

我们非常高兴地宣布，2025年4月7日，TinyVue 发布了 v3.22.0 🎉。

本次 3.22.0 版本主要有以下重大变更：

支持深色模式
增加基于 UnoCSS 的图标库
更丰富的 TypeScript 类型声明
支持 XSS 配置

详细的 Release Notes 请参考：github.com/opentiny/ti...

本次版本共有 18 位贡献者参与开发，其中 hashiqi12138 / hu-qi / tsinghua-lau Darkingtail / lcy0620 / discreted66 是新朋友，欢迎新朋友的加入👏

hashiqi12138 - 新增贡献者✨
hu-qi - 新增贡献者✨
tsinghua-lau - 新增贡献者✨
Darkingtail - 新增贡献者✨
lcy0620 - 新增贡献者✨
discreted66 - 新增贡献者✨
shenjunjian
kagol
zzcr
gimmyhehe
Davont
betavs
wuyiping0628
Youyou-smiles
James-9696
chenxi-20
MomoPoppy
gweesin

感谢新老朋友们对 TinyVue 的辛苦付出👏

你可以更新 @opentiny/[email protected] 进行体验！

bash 复制代码

npm i @opentiny/[email protected]

我们一起来看看都有哪些更新吧！

1 支持深色模式

TinyVue 开源依赖，陆续有小伙伴提出要支持深色模式。

本次 v3.22.0 版本全面支持了深色模式。

效果如下：

使用方式也非常简单，只需要引入深色模式样式文件，在 html 标签配置 class="dark" 即可。

假设我们已经有了一个 Vite + Vue3 的工程。

先安装 TinyVue 3.22.0 版本。

bash 复制代码

npm i @opentiny/[email protected]

然后在 src/style.css 文件中写入以下代码，引入深色模式样式文件。

css 复制代码

@import '@opentiny/vue-theme/dark-theme-index.css';

接着在 index.html 的 HTML 根元素添加 dark 类名。

html 复制代码

<html class="dark">
...
</html>

我们尝试在 App.vue 中引入 TinyVue 的 Button 组件。

html 复制代码

<template>
  <tiny-button type="primary">主要按钮</tiny-button>
  <tiny-button>次要按钮</tiny-button>
</template>

<script setup>
import { TinyButton } from '@opentiny/vue'
</script>

具体代码可以拷贝 Button 组件的 demo 代码：opentiny.design/tiny-vue/zh...

效果如下：

2 增加基于 UnoCSS 的图标库

之前 TinyVue 的图标库图标整体不够统一，存在一些重复图标，并且是通过封装 Vue 组件方式提供的，性能欠佳。

本次我们的设计师小姐姐和开发小哥哥携手推出了一款更加现代、更美观、性能更优异的图标库，而且是框架无关的。

OpenTiny Icons 是 OpenTiny 团队推出的一款纯 CSS 图标库，单色图标以线型图标为主的设计风格，图标统一为16*16的大小，拥有安全边距，保证了一致的视觉大小。

该图标库主要有以下亮点特色：

CSS 图标库：纯 CSS 图标，支持 Vue / React 等所有的前端框架
按需引用：支持 @iconify-json 导出方式，配合 @unocss/preset-icons 插件，实现按需引用
图标美观/丰富：300+ 基础单色图标，精致美观，风格统一，大小&颜色随心变，可满足大部分日常开发需要
支持多色图标：支持 330+ 的多色图标，覆盖常见的空数据、请求状态、应用权限等场景
适用场景多：支持组件库的开发，日常应用开发

欢迎有需要的朋友使用！

使用方式也非常简单，我们以一个普通的 vite 工程为例，执行以下命令安装 @opentiny/icons 图标库。

bash 复制代码

npm install @opentiny/icons

在 style.css 中加入以下内容，就可以放心使用图标库了

css 复制代码

@import "@opentiny/icons/style/all.css";

图标库可以通过 CSS 去完全控制样式，其中单色图标支持通过字体大小和颜色去自定义样式，而彩色图标仅支持自定义大小。

css 复制代码

<i class="ci-home" style="font-size:14px; color:#000;"></i>
<i class="ci-email" style="font-size:16px; color:#d32222;"></i>
<i class="ci-news" style="font-size:18x; color:#4822d3;"></i>
<i class="ci-date" style="font-size:20px; color:#40d322;"></i>
<hr />
<i class="ci-svc-ecs" style="font-size:72px;"></i>
<i class="ci-svc-obs" style="font-size:72px;"></i>
<i class="ci-svc-cbr" style="font-size:72px;"></i>
<i class="ci-svc-live" style="font-size:72px;"></i>
<hr />

效果如下：

更多使用方式，请参考文档：opentiny.github.io/icons/

3 更丰富的 TypeScript 类型声明

TinyVue 组件库很早就支持 TypeScript 类型提示，不过有些函数式组件（比如 Modal、Loading 等）的 TypeScript 支持不是特别友好，本次版本完善了这部分组件的 TypeScript 类型声明，给 Modal、Notify、Loading、Message 等函数式组件增加了 TypeScript 类型声明。

使用效果如下：

4 支持 XSS 配置

为了尽可能防止 XSS 攻击，TinyVue 内置的 XSS 过滤规则比较严格，会对所有包含 XSS 风险的代码片段进行过滤处理。若开发者需要放开部分规则（比如富文本场景下放开 img 标签的 src 属性）的需求场景，可以手动配置 xss 白名单。

使用 @opentiny/utils 中的 setXssOption 方法传入自定义的 xss 白名单，示例：

ts 复制代码

import { xss } from '@opentiny/utils'

const options = {
  enableAttrs: true,
  enableHtml: true,
  enableUrl: true,

  html: {
    whiteList: {
      a: ['class', 'style', 'contenteditable', 'data-id', 'data-title', 'data-size', 'href', 'data-last-modified'],
      img: ['class', 'style', 'src']
    }
  }
}

xss.setXssOption(options)

联系我们

GitHub：github.com/opentiny/ti...（欢迎 Star ⭐）

官网：opentiny.design/tiny-vue

个人博客：kagol.github.io/blogs

小助手微信：opentiny-official

公众号：OpenTiny