跳到主要内容
网站首页

图标库

← SVG Logos
Editorconfig

Editorconfig

editorconfig

图标库
SVG Logos
作者
SVG Logos Contributors

正在读取图标颜色…

使用场景

颜色与描边跟随预览参数实时变化，以下为常见界面中的渲染效果。

按钮内

输入框

搜索Editorconfig...

导航

Editorconfig

空状态

暂无内容

场景预览

桌面 / 浏览器 / 按钮 / 导航栏

手机桌面 · App 图标

9:41
Editorconfig

浏览器 · 标签页与站点

91a7233f2a90664c.example
Editorconfig开始使用

操作按钮 · 主次层级

Editorconfig了解更多

底部导航 · Tab 栏

Editorconfig推荐收藏我的

UI 使用示例

真实组件上下文中的渲染效果，代码可直接复制。

导航项

导航菜单

导航菜单
html
<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">
  <!-- 内联 Editorconfig SVG -->
  <span>导航菜单</span>
</a>

主要按钮

立即开始

html
<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">
  <!-- 内联 Editorconfig SVG -->
  立即开始
</button>

React 组件

内联引入

react
import { EditorconfigIcon } from './icons';

function Nav() {
  return <EditorconfigIcon className="size-4" />;
}

状态徽标

已完成

已完成
html
<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">
  <!-- 内联 Editorconfig SVG -->
  已完成
</span>

输入框前缀

搜索框

搜索Editorconfig…
html
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
  <!-- 内联 Editorconfig SVG -->
  <input placeholder="搜索Editorconfig…" class="w-full outline-none" />
</div>

功能卡片

功能名称

功能名称

功能的一句话说明。

html
<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">
    <!-- 内联 Editorconfig SVG -->
  </span>
  <p class="mt-3 text-sm font-medium">功能名称</p>
  <p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>

动效图标

为 Editorconfig 添加 CSS 动效，导出的 SVG 内嵌样式，单文件即可播放，无需任何依赖。

描画

线条从无到有依次绘出，适合线性图标

.icon-91a7233f2a90664c { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }

呼吸

透明度往复渐变，适合状态提示图标

.icon-91a7233f2a90664c { animation: svg-breathe 1.8s infinite; }

旋转

匀速循环旋转，适合加载中场景

.icon-91a7233f2a90664c { animation: svg-spin 1.6s linear infinite; }

用法示例

Editorconfig 在真实界面中的三种常见用法。

继续下一步

按钮内
16px · action 触发

Editorconfig

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 Editorconfig

24px 到 128px 六个常用尺寸的真实渲染，用于检查小尺寸下的可读性。

24px

32px

48px

64px

96px

128px

下载 Editorconfig 图标

SVG 矢量文件、PNG 位图（预设 16~512px 或自定义 16~1024px）、Favicon 包、App 图标包（iOS + Android）与矢量 PDF 一键导出；下载前可在下方「预览参数」改色，导出文件同步生效。

按预览颜色导出px（16~1024）

复制 Editorconfig 图标代码

Web、移动端、桌面端与小程序共 17 种格式；代码基于当前预览颜色生成，复制即用。

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 248"><path fill="#e3e3f8" d="M61.342 145.021c5.405-2.394 9.87-8.379 7.168-12.608c-7.403 2.155-7.05 7.102-7.168 12.608m56.817 13.725c5.064-1.276 9.926-5.745 7.19-10.373c-3.95 2.154-6.481 5.107-7.19 10.373"/><path fill="#e3e3f8" d="M6.521 224.82c0 5.026 1.277 10.453 4.788 12.368c12.927 7.261 58.253 1.596 73.654-1.835c8.06-1.836 14.603-7.82 22.183-11.092c17.077-7.422 29.446-13.406 43.091-23.381c9.895-7.262 25.616-27.69 27.291-39.9l-13.486-3.032c-.319 13.726-3.43 16.838-15.64 20.03c-8.22 2.234-24.259 2.713-32.637 1.276c-11.092-1.835-16.12-7.66-21.147-14.283c-9.735-12.928 2.155-21.945-13.246-22.823c-16.2 19.87-44.767 5.586-57.295 3.591c-5.347 7.74-17.875 58.013-17.717 69.504c7.742-2.633 12.61.24 19.552 2.953c24.578 9.496 3.112 17.875-6.703 15.401c-6.703-1.596-8.778-5.985-12.688-8.778M38.68 110.15c9.974 1.915 18.832 6.064 27.29 10.293c13.806 6.863 16.28 5.905 17.556 15.481c.16 1.756-.16 2.713 4.868 4.31c8.458 2.633-4.868-2.076 17.795-1.996c13.486.08 44.368 5.506 54.342 11.81c4.15 2.634 3.352 5.985 17.396 5.586c-.16-16.518-4.548-41.176-11.012-56.337c-7.9-18.354-18.353-21.147-39.66-28.01c-12.448-3.99-48.996-8.378-60.327-1.356C56.315 76.554 54.32 84.454 44.425 98.34c-2.873 4.07-3.91 7.182-5.745 11.81"/><path fill="#e3e3f8" d="M126.537 144.064c7.98 3.271-.399 24.418-11.49 19.31c-3.592-10.134 4.947-15.88 7.261-20.428c-4.788-.718-18.433-2.872-22.503-1.356c-5.267 1.995-6.464 13.246-3.75 18.513c12.767 25.057 69.184 19.71 63.2.24c-2.394-7.9-4.629-9.177-12.688-11.89c-6.464-2.155-12.928-4.39-20.03-4.39M26.231 141.27c6.384 6.145 20.827 7.103 30.164 7.581c1.197-12.368 2.234-21.625 12.13-20.907c4.867 6.624 2.313 14.444-2.794 19.471c8.698-.08 13.725-6.623 12.449-16.12c-7.342-5.266-29.605-15.8-40.777-17.315c-3.112 3.351-10.773 21.705-11.172 27.29"/><path fill="#e3e3f8" d="M11.23 220.27c5.266-.478 18.991 3.512 20.108 7.98c-8.538 1.038-19.39.24-20.109-7.98m-4.709 4.55c3.91 2.792 5.985 7.181 12.688 8.777c9.815 2.474 31.28-5.905 6.703-15.401c-6.942-2.713-11.81-5.586-19.552-2.953c-.158-11.49 12.37-61.763 17.717-69.504c12.528 1.995 41.096 16.28 57.295-3.59c15.4.877 3.51 9.894 13.246 22.822c5.027 6.623 10.055 12.448 21.147 14.283c8.378 1.437 24.418.958 32.637-1.276c12.21-3.192 15.321-6.304 15.64-20.03l13.486 3.033c-1.675 12.209-17.396 32.637-27.29 39.899c-13.646 9.975-26.015 15.96-43.092 23.38c-7.58 3.272-14.124 9.257-22.183 11.09
…

预览参数

调整颜色、描边或开启轮廓化，使用场景与用法示例实时跟随。

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 Editorconfig 图标

Editorconfig 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。

在本页点击「下载」即可保存 Editorconfig 的 SVG 矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。

Editorconfig 的品牌标志与名称版权归其品牌方所有，本站内容仅供学习与设计识别参考，请勿用于商标注册或误导性用途；商用前请确认品牌官方的使用规范与授权要求。文件体积 6.80 KB，viewBox 为 0 0 256 248，共 8 个矢量图元。

常见问题

Editorconfig 图标是什么？

Editorconfig 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。

如何下载 Editorconfig 图标？

在本页点击「下载 SVG」即可保存 Editorconfig 的矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。

Editorconfig 图标可以商用吗？

Editorconfig 为品牌标志，版权归品牌方所有，本站内容仅供识别参考；商用前请先确认对应品牌的使用规范与授权要求。

如何修改 Editorconfig 图标的颜色？

在「预览参数」面板中调整颜色与描边宽度，使用场景与用法示例会实时跟随，确认效果后再复制或下载即可。

SVG 健康报告

100/100

同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器

文件体积

6.80 KB

6,959 字节

viewBox

0 0 256 248

同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器

图元总数

8

<path> ×8

风格

多彩

5 种品牌色 · 纯填充

提取色值#e3e3f8#020202#fdf2f2#efefef#faf1f1

同色系图标

品牌色 #e3e3f8 的同色相色阶，点击复制色值；下方为同分类中可搭配使用的图标。

#ebebfa#cecef3#9d9de7#6464d8#3131c4#e3e3f8#aaaaea#7979dd
Editorconfig 品牌色详表
色值RGBHSLCMYK色名
227, 227, 248240°, 60%, 93%8, 8, 0, 3品牌主色 · 米色
206, 206, 243240°, 61%, 88%15, 15, 0, 5浅灰色
157, 157, 231240°, 61%, 76%32, 32, 0, 9天蓝色
100, 100, 216240°, 60%, 62%54, 54, 0, 15宝蓝色

图标信息摘要

Editorconfig 是一个通用类别的单文件 SVG 矢量图标，文件体积 6.80 KB，协议为™ 品牌商标（版权归品牌方，仅供识别参考）。可在本站免费下载 Editorconfig的 SVG 源文件与 PNG 位图（16-512px），支持自定义颜色与描边宽度、一键生成 Favicon 包，并提供 React / Vue 组件代码与 Data URI 引用。

继续探索

相关搜索

暂无推荐

Command Palette

Search for a command to run...