使用场景
颜色与描边跟随预览参数实时变化,以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · 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-57e382cd9e478b3a { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变,适合状态提示图标
.icon-57e382cd9e478b3a { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转,适合加载中场景
.icon-57e382cd9e478b3a { 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 161 46"><g clip-path="url(#clip0_667_719)"><path d="M47.27 6.219c-6.623-8.686-21.89-8.21-34.098 1.06C.959 16.544-3.574 31.1 3.045 39.786c6.622 8.686 21.888 8.21 34.097-1.06C49.355 29.456 53.887 14.9 47.269 6.22M28.91 20.849c-2.645.26-4.223 1.402-5.633 3.3-1.406 1.896-14.531 19.577-14.531 19.577L22.555 21.1 6.27 42.4l13.74-21.518-15.46 19.6 11.77-17.896c.89-1.369.615-2.103-.662-2.364-.878-.176-11.81-1.172-11.81-1.172l15.796-.88-14.785-.991 16.514-.983-15.116-.652s12.135-.936 13.61-1.09c1.471-.159 2.508-.73 3.47-1.88l3.407-4.025L32.713.91c.111-.137-8.008 13.24-8.008 13.24L34.987.583l-7.83 13.651L37.052.91s-6.266 10.733-6.597 11.355c-.538 1.013-.24 2.009 1.157 2.004l18.104.472-20.968 1.374 21.003.875-22.276 1.49 21.54 1.192s-17.463.914-20.108 1.176" fill="#1a96d5"/><path d="M67.386 25.972H63.97v-5.51l-3.504 1.51V18.29l3.504-1.51v-4.627h-1.604c-1.94 0-2.03-1.866-1.99-3.304v-4.7h2.554v5.009h1.04V3.395h3.415v5.759h1.54v2.995h-1.54v3.305l1.54-.782-.014 3.717-1.526.75zm11.916-4.253v-3.146q-3.502 2.835-9.087 6.236v-3.845a47.4 47.4 0 0 0 9.087-7.085v-2.674c-2.589 2.519-5.646 4.725-9.181 6.613v-3.94q3.407-1.698 7.762-5.664h-6.06c-1.479 0-2.356-.691-2.502-1.979a1.8 1.8 0 0 1 .133-.776L70.5 3.395h3.729L73.565 5h6.816c1.768.064 2.365 1.102 2.43 3.115v14.96q0 2.928-2.27 2.927h-3.79v-2.927h1.325c.757 0 1.166-.6 1.23-1.356m11.207-7.274v9.257c-.065 1.51-.194 2.266-1.643 2.266h-1.892V14.445c0-2.077 1.1-3.116 3.311-3.116h1.987l-1.608-3.21h-4.004V5.533h9.302V3.927h3.754v1.605h9.155V8.12h-4.128l-1.325 3.21h5.522v3.115zm10.506-6.33h-6.343q1.322 3.211 3.122 3.21 1.987.001 3.221-3.21m33.654 14.995h-9.143v2.858h-3.44v-1.159q0-1.7-2.27-1.7h-6.963V9.747q.093-4.153 4.069-4.154h5.164V3.3h3.44v2.292h5.139c2.46 0 4.004 1.356 4.004 4.064zm-12.587-2.927v-9.11q.095-2.363-2.46-2.361h-3.152v11.47h5.616zm3.44-11.471v11.47h5.522v-9.015c0-1.64-.478-2.455-2.051-2.455zm22.22 2.012h-8.932V7.682h9.13V4.339l3.853-1.292v4.639h9.117v3.043h-8.906c1.208 2.866 5.117 8.26 8.988 11.157v4.49c-4.907-2.769-8.236-6.696-10.88-11.785-2.709 5.09-6.545 8.948-11.323 11.591v-4.197c3.935-3.219 7.397-7.33 8.949-11.256m-71.02 20.723s-3.01 10.162-3.07 10.407c-.074-.296-3.127-10.115-3.127-10.115H68.71s-3.04 9.789-3.104 10.063c-.043-.18-3.101-10.355-3.101-10.355h-2.133l4.163 13.6h2.02s3.024-9.75 3.058-9.892c.035.142 3.084 9.892 3.084 9.892h2.021l4.163-13.6zm13.
…预览参数
调整颜色、描边或开启轮廓化,使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 物产中大 图标
物产中大 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。
在本页点击「下载」即可保存 物产中大 的 SVG 矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。 了解 物产中大 更多信息可访问官方网站。
物产中大 的品牌标志与名称版权归其品牌方所有,本站内容仅供学习与设计识别参考,请勿用于商标注册或误导性用途;商用前请确认品牌官方的使用规范与授权要求(参见品牌官网)。文件体积 5.61 KB,viewBox 为 0 0 161 46,共 3 个矢量图元。
常见问题
物产中大 图标是什么?
物产中大 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。
如何下载 物产中大 图标?
在本页点击「下载 SVG」即可保存 物产中大 的矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
物产中大 图标可以商用吗?
物产中大 为品牌标志,版权归品牌方所有,本站内容仅供识别参考;商用前请先确认对应品牌的使用规范与授权要求。
如何修改 物产中大 图标的颜色?
在「预览参数」面板中调整颜色与描边宽度,使用场景与用法示例会实时跟随,确认效果后再复制或下载即可。
SVG 健康报告
文件结构良好,未检测到问题
文件体积
5.61 KB
5,747 字节
viewBox
0 0 161 46
缩放适配正常
图元总数
3
<path> ×3
风格
双色
2 种品牌色 · 纯填充
同色系图标
品牌色 #1a96d5 的同色相色阶,点击复制色值;下方为同分类中可搭配使用的图标。
| 色值 | RGB | HSL | CMYK | 色名 |
|---|---|---|---|---|
| 26, 150, 213 | 200°, 78%, 47% | 88, 30, 0, 16 | 品牌主色 · 湛蓝色 | |
| 200, 232, 248 | 200°, 77%, 88% | 19, 6, 0, 3 | 浅灰色 | |
| 146, 209, 242 | 201°, 79%, 76% | 40, 14, 0, 5 | 天蓝色 | |
| 82, 183, 234 | 200°, 78%, 62% | 65, 22, 0, 8 | 矢车菊蓝 |
图标信息摘要
物产中大 是一个通用类别的单文件 SVG 矢量图标,文件体积 5.61 KB,协议为™ 品牌商标(版权归品牌方,仅供识别参考)。可在本站免费下载 物产中大的 SVG 源文件与 PNG 位图(16-512px),支持自定义颜色与描边宽度、一键生成 Favicon 包,并提供 React / Vue 组件代码与 Data URI 引用。 详情参见物产中大 官网。
继续探索
相关搜索
相关标签
相关图标
暂无相关图标

