使用场景
颜色与描边跟随预览参数实时变化,以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · 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-18e4456d134e9426 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变,适合状态提示图标
.icon-18e4456d134e9426 { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转,适合加载中场景
.icon-18e4456d134e9426 { 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 fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 423 46"><g clip-path="url(#clip0_583_3232)"><g clip-path="url(#clip1_583_3232)"><path d="M0 13.82c32.472-3.038 41.347 39.488 73.17 26.903C43.728 60.466 27.71 18.81 0 13.82" fill="#e4004f"/><path d="M14.287 13.82c10.391-1.085 17.319 2.602 25.328 9.545l4.763 4.123c9.092 8.028 14.72 13.235 27.71 9.546C60.83 43.76 50.44 38.77 41.564 30.743l-4.762-4.123c-6.711-5.859-13.855-11.282-22.515-12.8" fill="#e4004f"/><path d="M27.276 13.82c8.443-.867 14.287 2.17 20.783 7.81l3.897 3.471c6.928 6.075 10.175 10.198 19.916 8.896-8.01 3.255-15.154 0-22.081-6.291l-3.897-3.472c-5.63-4.773-11.473-9.113-18.618-10.414" fill="#e4004f"/><path d="M112.353 32.261C79.88 35.3 71.006-7.227 39.183 5.358c29.658-19.96 45.461 21.913 73.17 26.903" fill="#e4004f"/><path d="M98.065 32.044C87.674 33.13 80.746 29.442 72.737 22.5l-4.762-4.123c-9.093-8.028-14.72-13.235-27.71-9.546C51.52 2.104 61.912 7.094 70.789 15.12l4.762 4.123c6.71 6.075 13.855 11.282 22.514 12.8" fill="#e4004f"/><path d="M85.076 32.044c-8.443.867-14.287-2.17-20.782-7.81l-3.898-3.471c-6.927-6.075-10.174-10.198-19.699-8.896 8.01-3.255 15.154 0 22.081 6.291l3.898 3.472c5.412 4.99 11.256 9.113 18.4 10.414" fill="#e4004f"/><path d="M38.75 14.037C54.12 11.434 58.666 30.96 73.82 32.26 58.015 35.3 51.737 15.121 38.75 14.037" fill="#e4004f"/><path d="M131.187 26.404c8.876 0 11.473-2.17 14.287-4.555l.433-.218 1.515-1.301.866-.867c.433-.217.65-.652.65-1.084v-.867c0-.218-.217-.435-.434-.652-.216-.217-.433-.217-.865-.217h-13.422l.434-.434.65-.435.65-.651.217-.217h-4.114c-.65 0-1.082 0-1.515.217-.434.217-.866.434-1.299.867l-5.846 4.99-.216.217h4.979v.217l1.515 2.387.217.435.216.217h-.433l-4.546.217h-.433s-.217 0-.217.217l-1.298 1.302 8.009.217zM234.88 40.072h3.03c.217 0 .651 0 .866-.218.215-.217.433-.434.433-.651l3.247-23.866h-3.68c-.217 0-.434 0-.434.217l-.216.217-.65 4.773-3.681 7.16h2.814v.217l-1.732 12.15zM197.645 15.99h-8.009c-.217 0-.433 0-.433.217-.217 0-.217.217-.217.434l-.865 5.86h8.659v.216l-.216 1.085v.217h-9.958c-.434 0-.65.217-.865.217-.217.217-.434.434-.434.651l-.217 1.302h25.979c.433 0 .865-.217 1.082-.217.216-.218.433-.435.65-.867l.216-.867h-11.039v-.218l.216-1.084v-.217h8.876l.865-5.859v-.434s-.216 0-.216-.217h-8.443v-.218l.217-1.084h-5.196l-.65 1.084zm3.247 15.404h-5.195l-.217 2.17-4.545 3.038a83 83 0 0 1-4.546 3.037s-.217 0-.217.217h5.629l5.413-3.689 4.329 3.69
…预览参数
调整颜色、描边或开启轮廓化,使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 多彩贵州航空 图标
多彩贵州航空 是出行分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。出行服务与交通平台的品牌标识。
在本页点击「下载」即可保存 多彩贵州航空 的 SVG 矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。 了解 多彩贵州航空 更多信息可访问官方网站。
多彩贵州航空 的品牌标志与名称版权归其品牌方所有,本站内容仅供学习与设计识别参考,请勿用于商标注册或误导性用途;商用前请确认品牌官方的使用规范与授权要求(参见品牌官网)。文件体积 13.62 KB,viewBox 为 0 0 423 46,共 10 个矢量图元。
常见问题
多彩贵州航空 图标是什么?
多彩贵州航空 是出行分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。
如何下载 多彩贵州航空 图标?
在本页点击「下载 SVG」即可保存 多彩贵州航空 的矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
多彩贵州航空 图标可以商用吗?
多彩贵州航空 为品牌标志,版权归品牌方所有,本站内容仅供识别参考;商用前请先确认对应品牌的使用规范与授权要求。
如何修改 多彩贵州航空 图标的颜色?
在「预览参数」面板中调整颜色与描边宽度,使用场景与用法示例会实时跟随,确认效果后再复制或下载即可。
SVG 健康报告
文件结构良好,未检测到问题
文件体积
13.62 KB
13,946 字节
viewBox
0 0 423 46
缩放适配正常
图元总数
10
<path> ×10
风格
多彩
6 种品牌色 · 纯填充
相似图标
按名称与标签相似度排序。
同色系图标
品牌色 #e4004f 的同色相色阶,点击复制色值;下方为品牌色同色相的其他图标。
| 色值 | RGB | HSL | CMYK | 色名 |
|---|---|---|---|---|
| 228, 0, 79 | 339°, 100%, 45% | 0, 100, 65, 11 | 品牌主色 · 玫红色 | |
| 255, 194, 215 | 339°, 100%, 88% | 0, 24, 16, 0 | 粉红色 | |
| 255, 133, 175 | 339°, 100%, 76% | 0, 48, 31, 0 | 热粉色 | |
| 255, 61, 128 | 339°, 100%, 62% | 0, 76, 50, 0 | 玫红色 |
图标信息摘要
多彩贵州航空 是一个出行类别的单文件 SVG 矢量图标,文件体积 13.62 KB,协议为™ 品牌商标(版权归品牌方,仅供识别参考)。可在本站免费下载 多彩贵州航空的 SVG 源文件与 PNG 位图(16-512px),支持自定义颜色与描边宽度、一键生成 Favicon 包,并提供 React / Vue 组件代码与 Data URI 引用。 详情参见多彩贵州航空 官网。

