Wall Lucca Alt Below
wall-lucca-alt-below
颜色与描边跟随预览参数实时变化,以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · 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">
<!-- 内联 Ulanzi Tc001 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">
<!-- 内联 Ulanzi Tc001 SVG -->
立即开始
</button>React 组件
内联引入
import { UlanziTc001Icon } from './icons';
function Nav() {
return <UlanziTc001Icon 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">
<!-- 内联 Ulanzi Tc001 SVG -->
已完成
</span>输入框前缀
搜索框
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 Ulanzi Tc001 SVG -->
<input placeholder="搜索Ulanzi Tc001…" 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">
<!-- 内联 Ulanzi Tc001 SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>为 Ulanzi Tc001 添加 CSS 动效,导出的 SVG 内嵌样式,单文件即可播放,无需任何依赖。
描画
线条从无到有依次绘出,适合线性图标
.icon-123785fde8114032 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变,适合状态提示图标
.icon-123785fde8114032 { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转,适合加载中场景
.icon-123785fde8114032 { animation: svg-spin 1.6s linear infinite; }Ulanzi Tc001 在真实界面中的三种常见用法。
按钮内
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 24 24"><path fill="currentColor" d="M21.917 11.175L21.4 9.786a1.1 1.1 0 0 0-.928-.707L3.694 7.547a2.4 2.4 0 0 0-1.129.164l-.351.14l-.069.028l.147-.046a1.2 1.2 0 0 1 .31.005l17.49 1.719a.9.9 0 0 1 .389.13a.93.93 0 0 1 .45.824v.041l-.063 4.249s-.009.638-.028 1.157l-.009.084a.9.9 0 0 1-.206.422l.175-.149l1.025-.987a.57.57 0 0 0 .175-.427Zm-1.217-.603a.854.854 0 0 0-.769-.859L2.456 8.046A.417.417 0 0 0 2 8.467l.088 5.186a.714.714 0 0 0 .627.7l17.267 2.081a.576.576 0 0 0 .645-.564ZM7.03 13.051v-.183l.091.008v.184h-.054Zm.047-.412H7.03v-.2l.091.008v.2Zm0-.433H7.03v-.183l.091.008v.184Zm0-.417H7.03v-.212l.091.009v.211Zm0-.444H7.03v-.183l.091.008v.184Zm0-.417H7.03v-.2l.091.009v.2Zm0-.434H7.03v-.183l.091.008v.182Zm0-.416H7.03v-.183l.091.008v.184Zm0-.624v.211h-.024a.8.8 0 0 0-.077-.218Zm-1.034-.479v-.062l.184.017v.125l-.184-.017Zm0 .383l.184.017v.2a.4.4 0 0 0-.066-.028a1 1 0 0 0-.118-.03Zm-.424-.422v-.062l.191.017v.125l-.191-.015Zm0 .383l.191.018v.149l-.134-.014a.4.4 0 0 0-.057 0ZM5.2 8.901v-.066l.184.017v.125L5.2 8.96Zm0 .382l.184.017v.211l-.184-.02Zm-1.709-.544v-.062l.184.017v.125l-.184-.018Zm0 .383l.184.017v.155a.3.3 0 0 0-.126.042l-.055-.005Zm-.85.038a1 1 0 0 1 .043-.113l.139.013a.7.7 0 0 0-.077.2l-.1-.01Zm0 .327l.091.009v.183l-.091-.008Zm0 .417l.091.008v.189l-.091-.008Zm0 .417l.091.008v.2l-.091-.008Zm0 .433l.091.009v.183l-.091-.008Zm0 .417l.091.008v.211l-.091-.008Zm0 .444l.091.009v.183l-.091-.006Zm0 .417l.091.008v.2l-.091-.009Zm0 .433l.091.009v.183l-.091-.008Zm0 .417l.091.008v.192l-.094-.009Zm.069.677l-.024-.043v-.143l.064.006a1 1 0 0 0 .106.193Zm.146-4.666l-.066-.006q.031-.03.066-.057Zm.4 5.019a1 1 0 0 1-.2-.1v-.054l.189.017h.011Zm0-.424l-.067-.049a.6.6 0 0 1-.09-.09l.157.015Zm0-.357l-.2-.019v-.191l.2.018Zm0-.425l-.2-.019v-.186l.2.019Zm0-.417l-.2-.018v-.2l.2.019Zm0-.433l-.2-.019v-.183l.2.018Zm0-.948v.087l-.2-.019v-.183l.2.018Zm0-.33l-.2-.018v-.2l.2.019Zm0-.433l-.2-.019v-.183l.2.018Zm0-.417l-.2-.019v-.183l.2.019Zm0-.417l-.2-.018v-.129a.5.5 0 0 1 .072-.076l.128.012Zm0-.562a.6.6 0 0 0-.2.076v-.146l.027-.011l.173.016Zm.417 5.229l-.184-.017v-.125l.184.017Zm0-.392l-.184-.017v-.184l.184.017Zm.008-2.547l-.2-.018v-.184h.008v-.005l.184.017v.005h.008Zm.436 2.98l-.209-.018v-.125l.211.019Zm0-.392l-.211-.02v-.183l.211.019Zm-.206-2.564v-.184l.2.019v.183Zm.206-1.739l-.209-.023V9.16l.211.02Zm0-.561v.1l-.211-.02v-.128l.211.02Zm.
…调整颜色、描边或开启轮廓化,使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
Ulanzi Tc001 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。
在本页点击「下载」即可保存 Ulanzi Tc001 的 SVG 矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Ulanzi Tc001 的品牌标志与名称版权归其品牌方所有,本站内容仅供学习与设计识别参考,请勿用于商标注册或误导性用途;商用前请确认品牌官方的使用规范与授权要求。文件体积 6.37 KB,viewBox 为 0 0 24 24,共 1 个矢量图元。
Ulanzi Tc001 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。
在本页点击「下载 SVG」即可保存 Ulanzi Tc001 的矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Ulanzi Tc001 为品牌标志,版权归品牌方所有,本站内容仅供识别参考;商用前请先确认对应品牌的使用规范与授权要求。
在「预览参数」面板中调整颜色与描边宽度,使用场景与用法示例会实时跟随,确认效果后再复制或下载即可。
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
文件体积
6.37 KB
6,519 字节
viewBox
0 0 24 24
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
图元总数
1
<path> ×1
风格
单色轮廓
无显式填色,跟随容器 currentColor
Ulanzi Tc001 是一个通用类别的单文件 SVG 矢量图标,文件体积 6.37 KB,协议为™ 品牌商标(版权归品牌方,仅供识别参考)。可在本站免费下载 Ulanzi Tc001的 SVG 源文件与 PNG 位图(16-512px),支持自定义颜色与描边宽度、一键生成 Favicon 包,并提供 React / Vue 组件代码与 Data URI 引用。
Search for a command to run...