Skip to content

图标 ​

ui.Icon 把 SVG 作为图标显示:使用文本颜色——和文本一样从祖先元素继承, 无论文件本身是什么颜色——高度与字号一致,并保持 SVG 的宽高比。Lucide、 Heroicons、Tabler、Material Symbols 等图标集可以直接使用:

go
//go:embed icons/save.svg
var saveSVG []byte

var save = ui.MustParseSVG(saveSVG)

ui.Row(c).Gap(6).Children(func() {
	ui.Icon(c, save)
	ui.Text(c, "Save")
})
ui.Icon(c, save).FontSize(24).TextColor(c.Theme().Danger)

FontSize 和 TextColor 像对文本那样决定它的大小和颜色;Size 给它另外的 尺寸。图标不会在列中横向拉伸。

在按钮中 ​

在按钮里(按钮把子元素按行布局并赋予它们文本颜色),图标放在标签前面:

go
ui.PrimaryButton(c, "").Children(func() {
	ui.Icon(c, save)
	ui.Text(c, "Save").SingleLine()
})

Rotate 旋转图标,比如旋转指示器或展开用的箭头:

go
spin := ui.Icon(c, loader)
spin.Rotate(spin.Loop("spin", time.Second, ui.Linear) * 360)

MyGo 如何绘制 SVG、支持其中哪些内容,见图像页面。在 Draw 回调中,Painter.Icon 绘制图标。

无障碍 ​

图标是辅助技术看不到的装饰,除非用 Label 为它命名:对于只显示图标的按钮, 请改为给按钮命名。