Add internal kernel API `/api/icon/getDynamicIcon` #12939

Achuan-2 · 2024-10-27T09:52:46Z

思源笔记内核添加/api/icon/getDynamicIcon，使得思源笔记支持动态图标

参数

type：图标类型，默认为1
- type=1：显示年月日星期
- type=2：显示年月日
- type=3：仅显示年月
- type=4：仅显示年
- type=5：当前周数
- type=6：仅返回星期
- type=7：倒数日
- type=8：文字图标
lang：中英文切换，默认为当前思源笔记使用的语言，仅在type=1、2、3、5、6、7时有效
- lang=zh_CN：显示中文简体
- lang=zh_CHT：显示中文繁体
- lang=en_US/lang=en_ES：显示英文
- 其他语言用英文显示
color：设置配色，一共八种配色
- color=red
- color=blue
- color=yellow
- color=green
- color=purple
- color=pink
- color=orange
- color=grey
支持通过color=FE3427 或color=%23FE3427设置自定义颜色（注意：直接输出color=#FE3427，会由于#是URL特殊符号，导致URL被截断，会使得参数不起作用）

![](api/icon/getDynamicIcon?color=FE3427&type=3)

date: 设置日期，默认为当前日期，日期设置格式为yyyy-mm-dd，仅在type=1-7时有效
weekdayType: 设置星期格式，默认为第一种类型，仅在type=1、6时有效
- 中文
  - weekdayType=1："周日", "周一", "周二", "周三", "周四", "周五", "周六"
  - weekdayType=2："周天", "周一", "周二", "周三", "周四", "周五", "周六"
  - weekdayType=3："星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"
  - weekdayType=4："星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六
- 英文
  - weekdayType=1："Sun","Mon","Tue","Wed","Thu","Fri","Sat"
  - weekdayType=2："SUN","MON","TUE","WED","THU","FRI","SAT"
  - weekdayType=3："Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"
  - weekdayType=4："SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"
content：设置文字图标的内容，默认为空，仅在type=8时有效
注意输入下面特殊符号，需要用URL编码替代，否则导致解析参数失败或丢失
- %: %25
- +: %2B
- #: %23

使用

如果是在思源笔记内部使用（不用外部软件打开），可以直接用api/icon/getDynamicIcon后添加type、color、lang、date/content等参数，例如api/icon/getDynamicIcon?color=red&type=7&lang=zh_CN
外部使用需要添加ip地址和端口，如http://127.0.0.1:6806/api/icon/getDynamicIcon

示例

type=1：显示年月日星期

默认显示今天的日期。

可通过date=2024-10-26指定显示的日期

![](api/icon/getDynamicIcon?color=red&lang=zh_CN&date=2024-10-27)
![](api/icon/getDynamicIcon?color=red&lang=en_US_US&date=2024-10-27)

type=2：显示年月日

![](api/icon/getDynamicIcon?type=2&color=red&lang=&date=2024-10-27)
![](api/icon/getDynamicIcon?type=2&color=red&lang=en_US&date=2024-10-27)

type=3：仅显示年月

![](api/icon/getDynamicIcon?type=3&color=red&lang=zh_CN&date=2024-10-27)
![](api/icon/getDynamicIcon?type=3&color=red&lang=en_US&date=2024-10-27)

type=4：仅显示年

![](api/icon/getDynamicIcon?type=4&color=red&lang=zh_CN&date=2024-10-27)

type=5：当前周数

![](api/icon/getDynamicIcon?type=5&color=red&lang=zh_CN&date=2024-10-27)

![](api/icon/getDynamicIcon?type=5&color=red&lang=en_US&date=2024-10-27)

type=6：仅返回星期

不输入color的话，默认星期一到星期五为红色，星期六和星期日为蓝色

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-21 "星期一")

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-22 "星期二")

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-23 "星期三")

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-24 "星期四")

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-25 "星期五")

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-26 "星期六")

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-27 "星期日")

指定color

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-21&color=red "星期一")

![](api/icon/getDynamicIcon?type=6&lang=zh_CN&date=2024-10-22&color=blue "星期二")

![](api/icon/getDynamicIcon?type=6&lang=zh_CN&date=2024-10-23&color=green "星期三")

![](api/icon/getDynamicIcon?type=6&lang=zh_CN&date=2024-10-24&color=yellow "星期四")

![](api/icon/getDynamicIcon?type=6&lang=zh_CN&date=2024-10-25&color=purple "星期五")

![](api/icon/getDynamicIcon?type=6&lang=zh_CN&date=2024-10-26&color=pink "星期六")

![](api/icon/getDynamicIcon?type=6&lang=zh_CN&date=2024-10-27&color=grey "星期日")

type=7：倒数日

该图标会显示当前日期与指定日期之间的天数。

支持 lang=en_US 修改为英文：

已过 用 Past 表示。
还有 用 Left 表示。

![](api/icon/getDynamicIcon?color=red&date=2024-10-22&type=7&lang=zh_CN)
![](api/icon/getDynamicIcon?color=red&date=2024-10-22&type=7&lang=en_US)

![](api/icon/getDynamicIcon?color=red&type=7&lang=zh_CN)
![](api/icon/getDynamicIcon?color=red&type=7&lang=en_US)

![](api/icon/getDynamicIcon?color=red&date=2025-10-26&type=7&lang=zh_CN)
![](api/icon/getDynamicIcon?color=red&date=2025-10-26&type=7&lang=en_US)

type=8：文字图标

该图标可以显示文字。

![](api/icon/getDynamicIcon?type=8&content=知乎&color=blue)
![](api/icon/getDynamicIcon?type=8&content=GREAT&color=red)

wish5115 · 2024-10-27T10:03:58Z

大小怎么设置？

Achuan-2 · 2024-10-27T10:06:48Z

大小怎么设置？

返回的就是svg，如果在笔记里放，拖动设置图片大小就可以了。默认是512*512大小

kernel/api/router.go

kernel/api/icon.go

wish5115 · 2024-10-27T10:08:38Z

大小怎么设置？

返回的就是svg，如果在笔记里放，拖动设置图片大小就可以了。默认是512*512大小

哦哦

TCOTC · 2024-10-27T11:51:59Z

我希望加一个星期/周天

参考模板这个：

kernel/api/icon.go

更改locale参数为lang 新增weekdayType参数，支持设置weekday格式

Achuan-2 · 2024-10-27T14:16:15Z

我希望加一个星期/周天

参考模板这个：

已经支持

88250 · 2024-10-27T14:20:26Z

感谢你的贡献，思源有你更精彩！
Thank you for your contribution. SiYuan will be more wonderful with you!

Achuan-2 · 2024-10-27T14:25:25Z

使用方法已经更新

luo-chuan · 2024-10-29T11:49:38Z

本机使用和伺服使用的时候，图片链接中的 ip 不一致。

有没有办法使用 siyuan://api/icon/xxxxxx 这样的链接呢？

Wetoria · 2024-10-29T11:54:43Z

本机使用和伺服使用的时候，图片链接中的 ip 不一致。

有没有办法使用 siyuan://api/icon/xxxxxx 这样的链接呢？

img地址用 api/icon/xxxxxx

Vanessa219 · 2024-11-08T03:56:09Z

@Achuan-2

color 需要支持一下变量，如 var(--b3-card-warning-color)
能否全部类型都设置为正方形，即长和宽一致

Achuan-2 · 2024-11-08T08:19:56Z

@Achuan-2

color 需要支持一下变量，如 var(--b3-card-warning-color)

能否全部类型都设置为正方形，即长和宽一致

1.color 需要支持一下变量，如 var(--b3-card-warning-color)

这个我感觉没必要，wolai的动态图标也是单独配色的，字体背景颜色、文字颜色不一定适合用来当图标颜色的，背景色会偏淡一点，文字颜色饱和度又会偏深。
另外go代码可以获取到 var(--b3-card-warning-color)的实际变量吗，是不是应该在前端调用http的时候就自动获取实际的值，然后再调用api

能否全部类型都设置为正方形，即长和宽一致

更改viewbox就可以，我等会提交pr，之前设计的时候就是新建512×512的画布的，只不过导出的时候会有点点改变

Vanessa219 · 2024-11-08T10:57:40Z

变量还是需要的，不同主题可以适配。不一定用 var(--b3-card-warning-color) 这个变量，可以用 --b3-dynamic-emoji-color 之类的

Achuan-2 · 2024-11-08T11:23:22Z

变量还是需要的，不同主题可以适配。不一定用 var(--b3-card-warning-color) 这个变量，可以用 --b3-dynamic-emoji-color 之类的

是可以搞一个单独的css变量，主题想改自己改（虽然我觉得图标不是文字，图标本身就提供了内容对比度，其实不同主题不太需要适配，都能比较好的显示，除非他觉得默认的配色不喜欢）

不过这个解析css变量的功能应该是前端js来做然后传递给内核吧，内核可以直接做吗，我不太了解。得v姐帮忙，或者指点我下。

Vanessa219 · 2024-11-09T05:36:20Z

这样好像不会跟随系统
api/icon/getDynamicIcon?type=2&color=red&date=2024-11-09&lang=

只能用变量哦，比如一个主题选了 --b3-card-warning-color ，解析为 red，另外一个主题解析出来是 darkred，这个时候系统不会根据主题的切换去修改 emoji 的链接的。

把变量值换为我传给你的就可以了

Achuan-2 · 2024-11-09T05:43:29Z

这样好像不会跟随系统 api/icon/getDynamicIcon?type=2&color=red&date=2024-11-09&lang=

只能用变量哦，比如一个主题选了 --b3-card-warning-color ，解析为 red，另外一个主题解析出来是 darkred，这个时候系统不会根据主题的切换去修改 emoji 的链接的。

把变量值换为我传给你的就可以了

svg直接用变量我试过了，目前不行的
因为思源目前用动态图片是用的链接显示，而不是svg直接加载到dom里，用链接显示的话，就没法传递css变量了

要么传入的时候变为具体的颜色值
要么动态图标专门处理，显示svg源码，而不是通过链接显示

v姐可以切换下明暗主题以及试试其他主题，动态图标其实本身就能兼容各种主题，wolai也没有对明暗主题选择不同配色。哪怕我选用红色的图标，主题背景也是红色，可是里面的背景是灰色，文字是灰色和白色，依然能看清的。就好像我往笔记里放入一个图片，除非图片是透明背景，否则图片在各个主题都是能看清楚的，不存在不同主题我就要更改图片颜色的情况。
支持css变量设置动态图标，在我看来，只是为了按照个人需要美化图标，而这一点是完全可以输入具体颜色值来调整的，只是不能方便批量替换

Vanessa219 · 2024-11-09T07:39:46Z

好的，我也没找到合适的方法，就传色值吧

luo-chuan · 2024-11-24T10:12:41Z

设置文档图标颜色时，可不可以用单词而不用色值呀？

Achuan-2 added 2 commits October 27, 2024 17:39

Create icon.go

6bf5012

✨ Add internal kernel API /api/icon

03473c1

88250 assigned Achuan-2 Oct 27, 2024

88250 added the Development label Oct 27, 2024

88250 added this to the 3.1.11 milestone Oct 27, 2024

88250 requested changes Oct 27, 2024

View reviewed changes

kernel/api/router.go Outdated Show resolved Hide resolved

kernel/api/icon.go Outdated Show resolved Hide resolved

kernel/api/icon.go Outdated Show resolved Hide resolved

Achuan-2 added 2 commits October 27, 2024 19:45

Update icon.go

32c6277

Update router.go

ef76540

Update router.go

a60505a

88250 requested changes Oct 27, 2024

View reviewed changes

kernel/api/icon.go Outdated Show resolved Hide resolved

kernel/api/icon.go Outdated Show resolved Hide resolved

88250 changed the title ~~✨ Add internal kernel API /api/icon~~ Add internal kernel API /api/icon/getDynamicIcon Oct 27, 2024

Update icon.go

aad7e84

更改locale参数为lang 新增weekdayType参数，支持设置weekday格式

88250 approved these changes Oct 27, 2024

View reviewed changes

88250 merged commit c1a7995 into siyuan-note:dev Oct 27, 2024

88250 added a commit that referenced this pull request Oct 27, 2024

🎨 Clean code #12939

ed4661c

TCOTC mentioned this pull request Oct 27, 2024

Document icons support the use of dynamic icons #12943

Closed

Achuan-2 deleted the patch-1 branch October 28, 2024 04:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add internal kernel API `/api/icon/getDynamicIcon` #12939

Add internal kernel API `/api/icon/getDynamicIcon` #12939

Achuan-2 commented Oct 27, 2024 •

edited

Loading

wish5115 commented Oct 27, 2024

Achuan-2 commented Oct 27, 2024 •

edited

Loading

wish5115 commented Oct 27, 2024

TCOTC commented Oct 27, 2024

Achuan-2 commented Oct 27, 2024

88250 commented Oct 27, 2024

Achuan-2 commented Oct 27, 2024

luo-chuan commented Oct 29, 2024

Wetoria commented Oct 29, 2024

Vanessa219 commented Nov 8, 2024 •

edited

Loading

Achuan-2 commented Nov 8, 2024 •

edited

Loading

Vanessa219 commented Nov 8, 2024 •

edited

Loading

Achuan-2 commented Nov 8, 2024 •

edited

Loading

Vanessa219 commented Nov 9, 2024

Achuan-2 commented Nov 9, 2024 •

edited

Loading

Vanessa219 commented Nov 9, 2024

luo-chuan commented Nov 24, 2024

Add internal kernel API /api/icon/getDynamicIcon #12939

Add internal kernel API /api/icon/getDynamicIcon #12939

Conversation

Achuan-2 commented Oct 27, 2024 • edited Loading

参数

使用

示例

type=1：显示年月日星期

type=2：显示年月日

type=3：仅显示年月

type=4：仅显示年

type=5：当前周数

type=6：仅返回星期

type=7：倒数日

type=8：文字图标

wish5115 commented Oct 27, 2024

Achuan-2 commented Oct 27, 2024 • edited Loading

wish5115 commented Oct 27, 2024

TCOTC commented Oct 27, 2024

Achuan-2 commented Oct 27, 2024

88250 commented Oct 27, 2024

Achuan-2 commented Oct 27, 2024

luo-chuan commented Oct 29, 2024

Wetoria commented Oct 29, 2024

Vanessa219 commented Nov 8, 2024 • edited Loading

Achuan-2 commented Nov 8, 2024 • edited Loading

Vanessa219 commented Nov 8, 2024 • edited Loading

Achuan-2 commented Nov 8, 2024 • edited Loading

Vanessa219 commented Nov 9, 2024

Achuan-2 commented Nov 9, 2024 • edited Loading

Vanessa219 commented Nov 9, 2024

luo-chuan commented Nov 24, 2024

Add internal kernel API `/api/icon/getDynamicIcon` #12939

Add internal kernel API `/api/icon/getDynamicIcon` #12939

Achuan-2 commented Oct 27, 2024 •

edited

Loading

Achuan-2 commented Oct 27, 2024 •

edited

Loading

Vanessa219 commented Nov 8, 2024 •

edited

Loading

Achuan-2 commented Nov 8, 2024 •

edited

Loading

Vanessa219 commented Nov 8, 2024 •

edited

Loading

Achuan-2 commented Nov 8, 2024 •

edited

Loading

Achuan-2 commented Nov 9, 2024 •

edited

Loading