流出 · 酒杯
pouring-chalice
- 图标库
- Game Icons
- 作者
- GameIcons
正在读取图标颜色…
使用场景
颜色与描边跟随预览参数实时变化,以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · App 图标
浏览器 · 标签页与站点
操作按钮 · 主次层级
底部导航 · Tab 栏
UI 使用示例
真实组件上下文中的渲染效果,代码可直接复制。
导航项
导航菜单
<a href="#" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800">
<!-- 内联 流出 · 酒杯 SVG -->
<span>导航菜单</span>
</a>主要按钮
立即开始
<button class="inline-flex items-center gap-2 rounded-lg bg-neutral-900 px-4 py-2 text-sm font-medium text-white dark:bg-neutral-100 dark:text-neutral-900">
<!-- 内联 流出 · 酒杯 SVG -->
立即开始
</button>React 组件
内联引入
import { IconIcon } from './icons';
function Nav() {
return <IconIcon className="size-4" />;
}状态徽标
已完成
<span class="inline-flex items-center gap-1.5 rounded-full bg-neutral-100 px-2.5 py-1 text-xs font-medium text-neutral-700">
<!-- 内联 流出 · 酒杯 SVG -->
已完成
</span>输入框前缀
搜索框
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 流出 · 酒杯 SVG -->
<input placeholder="搜索流出 · 酒杯…" class="w-full outline-none" />
</div>功能卡片
功能名称
功能名称
功能的一句话说明。
<div class="rounded-xl border border-neutral-200 p-4">
<span class="flex size-9 items-center justify-center rounded-lg bg-neutral-900 text-white">
<!-- 内联 流出 · 酒杯 SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>动效图标
为 流出 · 酒杯 添加 CSS 动效,导出的 SVG 内嵌样式,单文件即可播放,无需任何依赖。
描画
线条从无到有依次绘出,适合线性图标
.icon-37cf5a65b1a35091 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变,适合状态提示图标
.icon-37cf5a65b1a35091 { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转,适合加载中场景
.icon-37cf5a65b1a35091 { animation: svg-spin 1.6s linear infinite; }用法示例
流出 · 酒杯 在真实界面中的三种常见用法。
按钮内
16px · action 触发
导航项
18px · 列表选中态
暂无数据
空状态
40px · 引导提示
各尺寸下的 流出 · 酒杯
24px 到 128px 六个常用尺寸的真实渲染,用于检查小尺寸下的可读性。
24px
32px
48px
64px
96px
128px
下载 流出 · 酒杯 图标
SVG 矢量文件、PNG 位图(预设 16~512px 或自定义 16~1024px)、Favicon 包、App 图标包(iOS + Android)与矢量 PDF 一键导出;下载前可在下方「预览参数」改色,导出文件同步生效。
复制 流出 · 酒杯 图标代码
Web、移动端、桌面端与小程序共 17 种格式;代码基于当前预览颜色生成,复制即用。
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M228.223 21.195q-1.034.011-2.036.055c-10.698.47-18.53 3.562-24.062 9.094c-46.247 46.247-64.492 89.795-64.344 129.062c.15 39.268 18.763 75.295 49.845 106.375c30.724 30.723 69.188 47.024 110.063 45.94c31.945-.85 65.598-12.347 98.27-36.824a133 133 0 0 0-3.276-5.394c-10.605-16.437-24.044-28.604-36.274-34.766q-.004 0-.01-.004a127 127 0 0 1-7.134-2.976l-1.344-.445l-.47-.414c-22.307-10.453-47.853-29.242-72.52-53.91c-23.78-23.78-42.1-48.52-52.774-70.156c-5.336-10.82-8.82-20.845-9.84-30.15s.608-18.744 7.17-25.307c4.922-4.922 11.462-7.07 18.35-7.404a44 44 0 0 1 6.957.23c9.305 1.022 19.334 4.507 30.152 9.843c21.638 10.673 46.375 28.992 70.155 52.77c20.19 20.192 36.426 41.098 47.408 60.166c10.354 2.306 19.776 6.258 28.254 11.56c-11.875-26.925-32.735-57.202-60.7-85.165c-31.504-31.503-65.977-54.003-95.25-64.78c-13.72-5.054-26.26-7.5-36.59-7.4m224.78 134.858c-8.156 0-14.767 6.61-14.767 14.765s6.61 14.766 14.766 14.766s14.766-6.61 14.766-14.766c0-8.154-6.61-14.765-14.766-14.765zm-131.15 27.277l35.82 31.658c18.85 6.934 36.815 22.84 50.714 44.38c14.405 22.33 24.3 50.874 24.3 82.232v42.312c-2.678-3.76-7.063-6.223-12.03-6.223c-8.156 0-14.766 6.61-14.766 14.765s6.61 14.766 14.766 14.766c4.968 0 9.353-2.46 12.03-6.222v93.088h32.277v-21.158a19.9 19.9 0 0 0 8.797 2.054c11.067 0 20.04-8.972 20.04-20.04s-8.973-20.04-20.04-20.04c-3.16 0-6.14.752-8.797 2.055V341.6c0-40.176-6.675-80.88-21.86-110.422c-15.184-29.544-37.235-47.848-72.166-47.848zm-164.072 77.2l-27.06 12.72l.218.22c-3.374 3.36-3.612 5.753-1.563 11.592s7.55 13.72 15.22 21.375c7.492 7.483 15.54 12.637 21.686 14.625c6.148 1.99 8.97 1.4 11.376-1l.094.094l12.625-26.875a190 190 0 0 1-15.97-14.28c-5.936-5.937-11.49-12.096-16.624-18.47zm-128 16.376c-4.147.122-6.81 1.282-8.374 2.844c-1.952 1.953-3.558 5.7-3.5 12.188s1.904 15.2 5.72 24.968c7.63 19.535 22.975 43.288 44.718 65.03c21.743 21.745 45.758 37.354 65.594 45.252c9.917 3.948 18.778 5.924 25.375 6.062c6.596.138 10.365-1.428 12.25-3.313c2.485-2.485 3.91-7.837 1.718-17.656c-1.543-6.92-4.898-15.422-9.81-24.717c-10.077 6.655-23.1 6.935-35.064 3.062c-14.03-4.542-28.03-14.195-40.906-27.063c-12.703-12.694-22.842-26.034-27.72-39.937c-4.203-11.987-3.644-25.438 3.72-36.03c-9.252-4.857-17.694-8.16-24.563-9.658c-3.652-.795-6.667-1.104-9.156-1.03zM109.97 283l-25.564 12l-4.625 2.18
…预览参数
调整颜色、描边或开启轮廓化,使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 流出 · 酒杯 图标
流出 · 酒杯 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。
在本页点击「下载」即可保存 流出 · 酒杯 的 SVG 矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
流出 · 酒杯 的品牌标志与名称版权归其品牌方所有,本站内容仅供学习与设计识别参考,请勿用于商标注册或误导性用途;商用前请确认品牌官方的使用规范与授权要求。文件体积 2.85 KB,viewBox 为 0 0 512 512,共 1 个矢量图元。
常见问题
流出 · 酒杯 图标是什么?
流出 · 酒杯 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。
如何下载 流出 · 酒杯 图标?
在本页点击「下载 SVG」即可保存 流出 · 酒杯 的矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
流出 · 酒杯 图标可以商用吗?
流出 · 酒杯 为品牌标志,版权归品牌方所有,本站内容仅供识别参考;商用前请先确认对应品牌的使用规范与授权要求。
如何修改 流出 · 酒杯 图标的颜色?
在「预览参数」面板中调整颜色与描边宽度,使用场景与用法示例会实时跟随,确认效果后再复制或下载即可。
SVG 健康报告
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
文件体积
2.85 KB
2,922 字节
viewBox
0 0 512 512
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
图元总数
1
<path> ×1
风格
单色轮廓
无显式填色,跟随容器 currentColor
图标信息摘要
流出 · 酒杯 是一个通用类别的单文件 SVG 矢量图标,文件体积 2.85 KB,协议为™ 品牌商标(版权归品牌方,仅供识别参考)。可在本站免费下载 流出 · 酒杯的 SVG 源文件与 PNG 位图(16-512px),支持自定义颜色与描边宽度、一键生成 Favicon 包,并提供 React / Vue 组件代码与 Data URI 引用。

