Tripshot
tripshot
tank
正在读取图标颜色…
颜色与描边跟随预览参数实时变化,以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · App 图标
浏览器 · 标签页与站点
操作按钮 · 主次层级
底部导航 · Tab 栏
真实组件上下文中的渲染效果,代码可直接复制。
导航项
导航菜单
<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">
<!-- 内联 Tank 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">
<!-- 内联 Tank SVG -->
立即开始
</button>React 组件
内联引入
import { TankIcon } from './icons';
function Nav() {
return <TankIcon 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">
<!-- 内联 Tank SVG -->
已完成
</span>输入框前缀
搜索框
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 Tank SVG -->
<input placeholder="搜索Tank…" 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">
<!-- 内联 Tank SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>为 Tank 添加 CSS 动效,导出的 SVG 内嵌样式,单文件即可播放,无需任何依赖。
描画
线条从无到有依次绘出,适合线性图标
.icon-ba280ef8cdde4065 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变,适合状态提示图标
.icon-ba280ef8cdde4065 { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转,适合加载中场景
.icon-ba280ef8cdde4065 { animation: svg-spin 1.6s linear infinite; }Tank 在真实界面中的三种常见用法。
按钮内
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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20.986 21.885h1.379M5.796 33.113c0 .603.124 1.164.509 1.634c.046.369.145.715.425.844c.068.318.188.632.509.8c-.02.39.154.735.523.841c.019.36.212.545.45.687c.015.372.258.681.587.865l.148.335h4.26l-.148-.335c-.328-.184-.571-.493-.586-.865c-.238-.142-.432-.328-.45-.687c-.37-.106-.543-.452-.524-.84c-.32-.17-.44-.483-.509-.801c-.28-.129-.379-.475-.425-.844c-.385-.47-.509-1.03-.509-1.634"/><path d="m13.1 39.114l11.892-2.52c.366-.077.648-.607.593-1.175M7.927 33.022c.162 2.181 1.463 4.218 2.738 6.022m15.138-5.578c-.16.656-.174 1.265.12 1.776c-.049.4-.033.777.238.917c-.011.346.036.687.34.87c-.124.423-.027.798.345.914c-.074.39.087.592.308.746c-.083.405.099.74.407.94l.072.365h4.63l-.072-.365c-.308-.2-.49-.535-.407-.94c-.221-.154-.382-.356-.307-.746c-.373-.116-.47-.491-.346-.913c-.304-.184-.35-.525-.34-.87c-.27-.14-.287-.517-.238-.918c-.294-.51-.28-1.12-.12-1.776"/><path d="m32.24 39.984l8.624-3.223l1.311-3.869l.1-2.424m-14.296 2.921c.184 3.047.945 4.637 1.994 6.513m4.683-9.218l.072 1.552l1.384-.22l.006-.682l.529-.108l-.015-.877m.798.039l.071 1.552l1.384-.22l.006-.682l.529-.108l-.014-.877M12.605 28.51c-1.83.109-2.287 2.754-2.537 4.543l-5.568-.08c.33-1.343.516-4.515 2.764-4.5z"/><path d="M30.536 33.363c.094-1.871.353-4.585 1.86-4.715l10.675-.62l.429 3.13l-2.553-1.439l-6.515.743z"/><path d="M32.397 28.648L26.02 28.6c-1.134-.01-1.567 3.17-1.74 4.82l6.256-.058m-19.692 1.67c4.955.085 9.911.253 14.867.418M12.95 33.671h2.577m4.446.217h2.578"/><path d="m30.584 28.635l2.1-6.153l3.173.096l5.726 3.725l.061 1.807m-8.961-5.628l-20.99.16L8.9 28.484m4.146-.68h13.507M12.097 21.81a.767.767 0 0 1-1.535 0a.767.767 0 1 1 1.535 0m-.762.765l.045 1.916m21.014-2.851a.767.767 0 1 1-1.534 0a.767.767 0 0 1 1.534 0m-.762.766l-.268 1.917m-.014 2.879l1.342 1.361m.276-1.413l1.342 1.362m.173-1.395l1.315 1.334m.164-1.429l1.323 1.342m.294-1.394l1.283 1.303m.215-1.388l1.282 1.3m.181-1.385l1.283 1.301m-23.285-6.539l-.299.87m12.79-9.36l.24 1.409l2.197-.334l-.175-1.463zm.053.315l-5.91-.684m5.925 3.765v-2.995M17.55 19.992c-.08.617.061 1.18.715 1.574l5.819-.064c-1.046-1.269-.5-3.028.561-3.146c-.237-.4-.687-.616-1.236-.566l-3.78.348c-.822.074-1.246.155-1.513.397"/><path d="m24.681 18.333l.694.35l-1.391 2.753m-4.498-1.031c.35.056.664-.379.644-.964c-.013-.372-.1
…调整颜色、描边或开启轮廓化,使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
Tank 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。
在本页点击「下载」即可保存 Tank 的 SVG 矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Tank 的品牌标志与名称版权归其品牌方所有,本站内容仅供学习与设计识别参考,请勿用于商标注册或误导性用途;商用前请确认品牌官方的使用规范与授权要求。文件体积 2.73 KB,viewBox 为 0 0 48 48,共 8 个矢量图元。
Tank 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。
在本页点击「下载 SVG」即可保存 Tank 的矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Tank 为品牌标志,版权归品牌方所有,本站内容仅供识别参考;商用前请先确认对应品牌的使用规范与授权要求。
在「预览参数」面板中调整颜色与描边宽度,使用场景与用法示例会实时跟随,确认效果后再复制或下载即可。
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
文件体积
2.73 KB
2,796 字节
viewBox
0 0 48 48
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
图元总数
8
<path> ×8
风格
单色轮廓
纯描边线性风格,当前色由 stroke 继承
Tank 是一个通用类别的单文件 SVG 矢量图标,文件体积 2.73 KB,协议为™ 品牌商标(版权归品牌方,仅供识别参考)。可在本站免费下载 Tank的 SVG 源文件与 PNG 位图(16-512px),支持自定义颜色与描边宽度、一键生成 Favicon 包,并提供 React / Vue 组件代码与 Data URI 引用。
Search for a command to run...