Add Iconify icon selector to FormKit docs (#527)

This commit is contained in:
Ryan Wang
2025-12-10 16:35:57 +08:00
committed by GitHub
parent 99e82aeb3b
commit 33beb46cf1
5 changed files with 59 additions and 1 deletions

View File

@@ -584,3 +584,46 @@ menuSelect 基于 select并兼容 select 的[参数](#select-params)。
label: 标签
value: []
```
### iconify
统一的图标选择器,基于 [Iconify](https://iconify.design/)。
示例
```yaml
- $formkit: iconify
name: social_icon
label: 社交图标
format: svg # svg / dataurl / url / name
```
#### 参数
- `format`:图标格式
- `svg`svg 字符串
- `dataurl`base64 的图片链接,可以直接用于 img 标签
- `url`Iconify 的 CDN 链接
- `name`Iconify 的图标名称,需要在使用的地方自行加载图标
在主题模板中的使用示例:
```html
<!-- 当 format 为 name 时,使用 Iconify 封装的 Web Component 加载图标 -->
<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
<iconify-icon th:icon="${theme.config.group.social_icon}"></iconify-icon>
<!-- svg -->
<th:block th:utext="${theme.config.group.social_icon}"></th:block>
<!-- dataurl 或者 url -->
<img th:src="${theme.config.group.social_icon}" />
```
开发者可根据具体使用情况自行选择图标格式,通常推荐 `svg` 或者 `dataurl`,因为这样无需任何网络请求,确保图标可以稳定地正常加载。
UI 效果:
<p>
<img src="/img/formkit/formkit-iconify.png" width="50%" class="medium-zoom-image" />
</p>

View File

@@ -45,3 +45,7 @@ pnpm install @halo-dev/ui-shared
2. 提升 [plugin.yaml#spec.requires](./basics/manifest.md#字段详解) 版本为 `>=2.22.0`。
3. 按照[最新文档](./extension-points/ui/attachment-selector-create.md)修改插件代码
### 表单定义 > 新增 Iconify 图标选择器
在 2.22.0 中,我们为 FormKit 表单提供了通用的图标选择器,基于 [Iconify](https://icon-sets.iconify.design/),详细文档可查阅:[表单定义#Iconify](../../developer-guide/form-schema.md#iconify)

View File

@@ -0,0 +1,10 @@
---
title: API 变更日志
description: 记录每一个版本的主题 API 变更记录,方便开发者适配
---
## 2.22.0
### 表单定义 > 新增 Iconify 图标选择器
在 2.22.0 中,我们为 FormKit 表单提供了通用的图标选择器,基于 [Iconify](https://icon-sets.iconify.design/),详细文档可查阅:[表单定义#Iconify](../../developer-guide/form-schema.md#iconify)

View File

@@ -340,7 +340,7 @@ module.exports = {
items: ["developer-guide/plugin/examples/todolist"],
},
// "developer-guide/plugin/appendices",
"developer-guide/plugin/api-changelog"
"developer-guide/plugin/api-changelog",
],
},
{
@@ -401,6 +401,7 @@ module.exports = {
"developer-guide/theme/global-variables",
"developer-guide/theme/template-tag",
"developer-guide/theme/code-snippets",
"developer-guide/theme/api-changelog",
],
},
{

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB