图标

此元素基于Quasar的QIcon组件。

这里是可能名称的参考。

• name：图标的名称（snake 命名，例如 add_circle）

• size：CSS 单位中的大小，包括单位名称或标准大小名称（xs|sm|md|lg|xl），示例：16px, 2rem

• color：图标颜色（可以是 Quasar、Tailwind 或 CSS 颜色，或者是 None，默认值：None）

from nicegui import ui

ui.icon('thumb_up', color='primary').classes('text-5xl')

# ui.run()

<nicegui.elements.icon.Icon at 0x7faea40b3eb0>

材料图标和符号

您可以使用不同集合的材料图标和符号。Quasar文档概述了所有可用的图标集及其名称前缀：

• None 用于 填充图标

• "o_" 用于 轮廓图标

• "r_" 用于 圆角图标

• "s_" 用于 锐利图标

• "sym_o_" 用于 轮廓符号

• “sym_r_" 用于 圆角符号

• "sym_s_" 用于 锐利符号

from nicegui import ui

with ui.row().classes('text-4xl'):
    ui.icon('home')
    ui.icon('o_home')
    ui.icon('r_home')
    ui.icon('sym_o_home')
    ui.icon('sym_r_home')

# ui.run()

Eva 图标

您可以在应用程序中使用Eva图标。

from nicegui import ui

ui.add_head_html('<link href="https://unpkg.com/eva-icons@1.1.3/style/eva-icons.css" rel="stylesheet" />')

ui.icon('eva-github').classes('text-5xl')

# ui.run() 

<nicegui.elements.icon.Icon at 0x7faea40f2380>

其他图标集

您可以使用相同的方法将其他图标集添加到您的应用程序中。一般来说，您需要引用相应的CSS文件，而该CSS文件会进一步引用字体文件。此演示展示了如何包含Themify图标。

from nicegui import ui

ui.add_head_html('<link href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" rel="stylesheet" />')

ui.icon('ti-car').classes('text-5xl')

# ui.run()

<nicegui.elements.icon.Icon at 0x7fae62c7cbb0>

Lottie 文件

您还可以使用Lottie文件与动画一起。

from nicegui import ui

ui.add_body_html('<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>')

src = 'https://assets5.lottiefiles.com/packages/lf20_MKCnqtNQvg.json'
ui.html(f'<lottie-player src="{src}" loop autoplay />').classes('w-24')

# ui.run()

<nicegui.elements.html.Html at 0x7faea40f35e0>