Skip to content

Commit 8a1284e

Browse files
committed
Update Iconify form value documentation
Added detailed explanation of the Iconify form value object, including its properties and usage for different formats. Updated code examples to reference the correct value property.
1 parent 0951d78 commit 8a1284e

1 file changed

Lines changed: 15 additions & 3 deletions

File tree

‎docs/developer-guide/form-schema.md‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -614,18 +614,30 @@ menuSelect 基于 select,并兼容 select 的[参数](#select-params)。
614614
- `url`:Iconify 的 CDN 链接
615615
- `name`:Iconify 的图标名称,需要在使用的地方自行加载图标
616616

617+
#### 值类型
618+
619+
Iconify 表单类型的值为对象,包含以下属性:
620+
621+
- `value`: 图标数据,当 `format` 参数不同时,value 的形式也不同,具体如下:
622+
- `svg`:value 的值为 svg 字符串,可以直接放置在 HTML 中使用
623+
- `dataurl` / `url`:可以使用 `img` 标签加载
624+
- `name`:Iconify 对应的图标名称,需要在前端加载 [Iconify](https://iconify.design/docs/iconify-icon/) 的依赖配合使用
625+
- `name`:Iconify 对应的图标名称,保留这个字段的目的是为了在 Console 中回显图标信息,通常不需要使用此字段
626+
- `width`:用户在选择图标时设置的图标大小,此字段的目的是为了在 Console 中再次编辑时回显,通常不需要使用此字段
627+
- `color`:用户在选择图标时设置的图标颜色,此字段的目的是为了在 Console 中再次编辑时回显,通常不需要使用此字段
628+
617629
在主题模板中的使用示例:
618630

619631
```html
620632
<!-- 当 format 为 name 时,使用 Iconify 封装的 Web Component 加载图标 -->
621633
<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
622-
<iconify-icon th:icon="${theme.config.group.social_icon}"></iconify-icon>
634+
<iconify-icon th:icon="${theme.config.group.social_icon.value}"></iconify-icon>
623635
624636
<!-- svg -->
625-
<th:block th:utext="${theme.config.group.social_icon}"></th:block>
637+
<th:block th:utext="${theme.config.group.social_icon.value}"></th:block>
626638
627639
<!-- dataurl 或者 url -->
628-
<img th:src="${theme.config.group.social_icon}" />
640+
<img th:src="${theme.config.group.social_icon.value}" />
629641
```
630642

631643
开发者可根据具体使用情况自行选择图标格式,通常推荐 `svg` 或者 `dataurl`,因为这样无需任何网络请求,确保图标可以稳定地正常加载。

0 commit comments

Comments
 (0)