{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# [图标](https://nicegui.io/documentation/icon)\n",
    "\n",
    "此元素基于Quasar的[QIcon](https://quasar.dev/vue-components/icon)组件。\n",
    "\n",
    "[这里](https://fonts.google.com/icons?icon.set=Material+Icons)是可能名称的参考。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "- `name`：图标的名称（snake 命名，例如 `add_circle`）\n",
    "- `size`：CSS 单位中的大小，包括单位名称或标准大小名称（`xs|sm|md|lg|xl`），示例：`16px, 2rem`\n",
    "- `color`：图标颜色（可以是 Quasar、Tailwind 或 CSS 颜色，或者是 `None`，默认值：`None`）"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.icon.Icon at 0x1a0198d9b50>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.icon('thumb_up', color='primary').classes('text-5xl')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 材料图标和符号\n",
    "\n",
    "您可以使用不同集合的材料图标和符号。[Quasar文档](https://quasar.dev/vue-components/icon#webfont-usage)概述了所有可用的图标集及其名称前缀：\n",
    "\n",
    "* `None` 用于 [填充图标](https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Filled)\n",
    "* `\"o_\"` 用于 [轮廓图标](https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Outlined)\n",
    "* `\"r_\"` 用于 [圆角图标](https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Rounded)\n",
    "* `\"s_\"` 用于 [锐利图标](https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Sharp)\n",
    "* `\"sym_o_\"` 用于 [轮廓符号](https://fonts.google.com/icons?icon.set=Material+Symbols&icon.style=Outlined)\n",
    "* \"`sym_r_\"` 用于 [圆角符号](https://fonts.google.com/icons?icon.set=Material+Symbols&icon.style=Rounded)\n",
    "* `\"sym_s_\"` 用于 [锐利符号](https://fonts.google.com/icons?icon.set=Material+Symbols&icon.style=Sharp)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.row().classes('text-4xl'):\n",
    "    ui.icon('home')\n",
    "    ui.icon('o_home')\n",
    "    ui.icon('r_home')\n",
    "    ui.icon('sym_o_home')\n",
    "    ui.icon('sym_r_home')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Eva 图标\n",
    "\n",
    "您可以在应用程序中使用[Eva图标](https://akveo.github.io/eva-icons/)。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.icon.Icon at 0x1a02da81d10>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.add_head_html('<link href=\"https://unpkg.com/eva-icons@1.1.3/style/eva-icons.css\" rel=\"stylesheet\" />')\n",
    "\n",
    "ui.icon('eva-github').classes('text-5xl')\n",
    "\n",
    "# ui.run() "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 其他图标集\n",
    "\n",
    "您可以使用相同的方法将其他图标集添加到您的应用程序中。一般来说，您需要引用相应的CSS文件，而该CSS文件会进一步引用字体文件。此演示展示了如何包含[Themify图标](https://themify.me/themify-icons)。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.icon.Icon at 0x1a02da837d0>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.add_head_html('<link href=\"https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css\" rel=\"stylesheet\" />')\n",
    "\n",
    "ui.icon('ti-car').classes('text-5xl')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Lottie 文件\n",
    "\n",
    "您还可以使用[Lottie文件](https://lottiefiles.com/)与动画一起。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.html.Html at 0x1a02da81e10>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.add_body_html('<script src=\"https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js\"></script>')\n",
    "\n",
    "src = 'https://assets5.lottiefiles.com/packages/lf20_MKCnqtNQvg.json'\n",
    "ui.html(f'<lottie-player src=\"{src}\" loop autoplay />').classes('w-24')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "py311",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}