Skip to content

Commit e60650d

Browse files
authored
Update Iconify form value documentation (#532)
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 e60650d

File tree

1 file changed

+15
-3
lines changed

1 file changed

+15
-3
lines changed

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)