Maxxair Fan Delux Open
maxxair-fan-delux-open
颜色与描边跟随预览参数实时变化,以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · 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">
<!-- 内联 Lancia 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">
<!-- 内联 Lancia SVG -->
立即开始
</button>React 组件
内联引入
import { LanciaIcon } from './icons';
function Nav() {
return <LanciaIcon 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">
<!-- 内联 Lancia SVG -->
已完成
</span>输入框前缀
搜索框
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 Lancia SVG -->
<input placeholder="搜索Lancia…" 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">
<!-- 内联 Lancia SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>为 Lancia 添加 CSS 动效,导出的 SVG 内嵌样式,单文件即可播放,无需任何依赖。
描画
线条从无到有依次绘出,适合线性图标
.icon-d4f0a285a215c9f1 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变,适合状态提示图标
.icon-d4f0a285a215c9f1 { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转,适合加载中场景
.icon-d4f0a285a215c9f1 { animation: svg-spin 1.6s linear infinite; }Lancia 在真实界面中的三种常见用法。
按钮内
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="m9.971 10.488l-.218.872h.449Zm8.296.048a6.32 6.32 0 0 0-5.672-5.872l.282 3.323h-1.585l.211-3.336a6.28 6.28 0 0 0-3.758 1.633l-.397-.777l-.907 1.939h.307a6.3 6.3 0 0 0-1.045 2.952l1.364-.031v1.225l-1.364-.178a6.3 6.3 0 0 0 1.369 3.455v1.611h.6v-.962a6.28 6.28 0 0 0 3.738 1.688l-.204-3.124h1.668l-.158 3.107a6.32 6.32 0 0 0 5.532-5.617l-1.265.102v-1.252Zm-11.2-.361l-1.152.028a6.1 6.1 0 0 1 1.056-2.756h.096Zm0 4.382a6.1 6.1 0 0 1-1.154-2.923l1.154.146Zm.6-7.114h.67l-.511-.986a6.12 6.12 0 0 1 3.471-1.593l-.204 3.123H7.667Zm2.568 4.055h-.51a3 3 0 0 0-.102.466c0 .137.11.145.189.154v.086H9.34v-.09c.124-.028.157-.153.225-.422l.51-1.969h.064l.511 1.889c.102.386.138.511.248.502v.09h-.743v-.09c.144-.017.185-.023.185-.14a3 3 0 0 0-.105-.476M7.834 9.865v-.087h.799v.09c-.161.011-.231.014-.231.332v1.698c0 .173.05.204.204.204c.347 0 .477-.298.584-.701h.064l-.093.817H7.835v-.091c.126-.025.197-.036.197-.256v-1.736c-.001-.248-.097-.256-.198-.267Zm-.167 5.384v-1.165h3.344l.191 2.908a6.1 6.1 0 0 1-3.535-1.74Zm4.917-5.384c-.167.034-.18.115-.18.287v2.118h-.066l-1.021-1.949v1.436c0 .26.047.33.217.358v.089h-.523v-.09c.138-.025.204-.05.204-.287v-1.7c-.13-.248-.165-.259-.194-.259v-.09h.484l.794 1.537v-1.09c0-.216-.024-.334-.211-.357v-.09h.493Zm.162 1.151c0-.732.33-1.292.817-1.292c.204 0 .386.178.445.178s.081-.077.102-.167h.062v.842h-.056c-.082-.312-.274-.734-.536-.734c-.335 0-.425.552-.425 1.16a2.7 2.7 0 0 0 .103.788a.42.42 0 0 0 .349.313c.18 0 .352-.11.541-.443l.07.091c-.168.298-.346.524-.642.524c-.541 0-.83-.589-.83-1.26m5.286.764a6.12 6.12 0 0 1-5.116 5.19l.149-2.886h3.92v-2.219Zm-3.695-1.912v-.09h.804v.09c-.102.008-.218.011-.218.256v1.735c0 .231.091.243.218.257v.088h-.804v-.09c.125-.017.215-.034.215-.257v-1.735c-.002-.235-.113-.243-.217-.254Zm1.764 1.633h-.518a3 3 0 0 0-.102.466c0 .137.112.146.187.154v.083h-.464v-.09c.124-.028.155-.153.226-.422l.51-1.969h.062l.51 1.889c.103.386.141.511.252.502v.09h-.745v-.09c.144-.017.184-.023.184-.14a3 3 0 0 0-.104-.476Zm.884-1.267V7.989h-3.916l-.263-3.107a6.134 6.134 0 0 1 5.248 5.442Zm-5.003-7.413a8.115 8.115 0 1 0 8.113 8.115a8.13 8.13 0 0 0-8.113-8.115m0 16.036a7.924 7.924 0 1 1 7.921-7.921a7.94 7.94 0 0 1-7.921 7.921m9.591-13.439q-9.594-6.813-19.189-.045C1.739 13.355 4.918 18.961 11.985 22c6.629-2.723 10.467-8.06 9.588-16.582m-9.594 14.107a8.591 8.591 0 1
…调整颜色、描边或开启轮廓化,使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
Lancia 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。
在本页点击「下载」即可保存 Lancia 的 SVG 矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Lancia 的品牌标志与名称版权归其品牌方所有,本站内容仅供学习与设计识别参考,请勿用于商标注册或误导性用途;商用前请确认品牌官方的使用规范与授权要求。文件体积 2.44 KB,viewBox 为 0 0 24 24,共 1 个矢量图元。
Lancia 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。
在本页点击「下载 SVG」即可保存 Lancia 的矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Lancia 为品牌标志,版权归品牌方所有,本站内容仅供识别参考;商用前请先确认对应品牌的使用规范与授权要求。
在「预览参数」面板中调整颜色与描边宽度,使用场景与用法示例会实时跟随,确认效果后再复制或下载即可。
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
文件体积
2.44 KB
2,503 字节
viewBox
0 0 24 24
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
图元总数
1
<path> ×1
风格
单色轮廓
无显式填色,跟随容器 currentColor
Lancia 是一个通用类别的单文件 SVG 矢量图标,文件体积 2.44 KB,协议为™ 品牌商标(版权归品牌方,仅供识别参考)。可在本站免费下载 Lancia的 SVG 源文件与 PNG 位图(16-512px),支持自定义颜色与描边宽度、一键生成 Favicon 包,并提供 React / Vue 组件代码与 Data URI 引用。
Search for a command to run...