Haskell Wordmark
haskell-wordmark
使用场景
颜色与描边跟随预览参数实时变化，以下为常见界面中的渲染效果。
按钮内
输入框
搜索Godot Wordmark...
导航
Godot Wordmark
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · App 图标
9:41
Godot Wordmark
浏览器 · 标签页与站点
3708630fee37b89d.example
Godot Wordmark开始使用
操作按钮 · 主次层级
Godot Wordmark了解更多
底部导航 · Tab 栏
Godot Wordmark推荐收藏我的
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">
<!-- 内联 Godot Wordmark 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">
<!-- 内联 Godot Wordmark SVG -->
立即开始
</button>React 组件
内联引入
react
import { GodotWordmarkIcon } from './icons';
function Nav() {
return <GodotWordmarkIcon 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">
<!-- 内联 Godot Wordmark SVG -->
已完成
</span>输入框前缀
搜索框
搜索Godot Wordmark…
html
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 Godot Wordmark SVG -->
<input placeholder="搜索Godot Wordmark…" 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">
<!-- 内联 Godot Wordmark SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>动效图标
为 Godot Wordmark 添加 CSS 动效，导出的 SVG 内嵌样式，单文件即可播放，无需任何依赖。
描画
线条从无到有依次绘出，适合线性图标
.icon-3708630fee37b89d { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变，适合状态提示图标
.icon-3708630fee37b89d { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转，适合加载中场景
.icon-3708630fee37b89d { animation: svg-spin 1.6s linear infinite; }用法示例
Godot Wordmark 在真实界面中的三种常见用法。
继续下一步
按钮内
16px · action 触发
Godot Wordmark
导航项
18px · 列表选中态
暂无数据
空状态
40px · 引导提示
各尺寸下的 Godot Wordmark
24px 到 128px 六个常用尺寸的真实渲染，用于检查小尺寸下的可读性。
24px
32px
48px
64px
96px
128px
下载 Godot Wordmark 图标
SVG 矢量文件、PNG 位图（预设 16~512px 或自定义 16~1024px）、Favicon 包、App 图标包（iOS + Android）与矢量 PDF 一键导出；下载前可在下方「预览参数」改色，导出文件同步生效。
按预览颜色导出px（16~1024）
复制 Godot Wordmark 图标代码
Web、移动端、桌面端与小程序共 17 种格式；代码基于当前预览颜色生成，复制即用。
svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="currentColor" fill-rule="evenodd" d="M38.887 106.234c-1.313 0-2.41.598-3.301 1.793q-1.331 1.8-1.332 5.043c0 2.168.422 3.825 1.27 4.98q1.27 1.74 3.343 1.74q2.07 0 3.363-1.759q1.291-1.753 1.293-5.023q0-3.265-1.336-5.024q-1.33-1.751-3.3-1.75m-.02 21.512q-5.76.001-9.394-3.754q-3.626-3.755-3.625-10.96c0-4.81 1.222-8.446 3.668-10.927c2.445-2.472 5.605-3.71 9.472-3.71c3.871 0 6.996 1.214 9.371 3.656c2.383 2.433 3.57 6.125 3.57 11.062c0 4.938-1.214 8.614-3.652 11.024c-2.433 2.406-5.566 3.61-9.41 3.61m24.559-21.341v12.23q.001.861.125 1.083q.123.227.738.226q2.256.001 3.422-1.68q1.17-1.675 1.168-5.578q0-3.908-1.207-5.093q-1.212-1.186-3.836-1.188zm-7.871 18.977v-24.535q-.002-1.025.511-1.621c.344-.395.786-.594 1.336-.594h6.844q6.522.001 9.902 3.277q3.382 3.269 3.383 10.305q-.001 15.051-12.875 15.05h-7.011c-1.391 0-2.09-.624-2.09-1.882m37.918-19.149c-1.309 0-2.414.598-3.301 1.793q-1.331 1.8-1.332 5.043c0 2.168.426 3.825 1.27 4.98q1.27 1.74 3.343 1.74c1.379 0 2.504-.587 3.363-1.759q1.295-1.753 1.293-5.023q0-3.265-1.332-5.024c-.89-1.168-1.988-1.75-3.304-1.75m-.02 21.512q-5.765.001-9.39-3.754q-3.631-3.755-3.63-10.96c0-4.81 1.223-8.446 3.669-10.927q3.672-3.709 9.476-3.71c3.867 0 6.992 1.214 9.371 3.656c2.38 2.433 3.567 6.125 3.567 11.062q.001 7.408-3.649 11.024c-2.433 2.406-5.574 3.61-9.414 3.61m28.414-1.294q.001.812-4.058.813c-2.704 0-4.059-.274-4.059-.813V106.04h-4.918c-.465 0-.793-.621-.984-1.871a13 13 0 0 1-.121-1.828c0-.621.039-1.235.12-1.832q.288-1.87.985-1.871h17.832q.698.001.984 1.87c.082.598.122 1.212.122 1.833q0 .93-.122 1.828q-.287 1.873-.984 1.871h-4.797zM18.516 112.18c-2.215-.032-4.75.425-4.75.425v4.29h2.55l-.027 1.914c0 .707-.71 1.062-2.121 1.062q-2.12-.001-3.742-1.777c-1.086-1.188-1.625-2.918-1.625-5.203q0-3.434 1.582-5.067c1.055-1.086 2.437-1.633 4.133-1.633q1.07-.002 2.222.348q1.153.347 1.543.652c.262.207.508.305.742.305c.23 0 .61-.27 1.13-.812q.783-.821 1.402-2.47c.41-1.105.613-1.952.613-2.554q.001-.897-.04-1.226c-.573-.625-1.64-1.121-3.19-1.489q-2.32-.55-5.204-.55q-6.334 0-9.91 3.96q-3.578 3.96-3.578 10.286c0 4.957 1.219 8.71 3.656 11.27c2.446 2.558 5.653 3.835 9.63 3.835c2.136 0 4.034-.18 5.695-.55c1.66-.364 2.765-.743 3.312-1.122l.164-12.777c0-.742-1.973-1.078-4.187-1.117M55.746 0c-3.707.82-7.375 1.965-10.812 3.688c.078 3.023.273 5.917.671 8.859c-1.332.855-2.738 1.586-3.984 2.582c-1
…预览参数
调整颜色、描边或开启轮廓化，使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 Godot Wordmark 图标
Godot Wordmark 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。
在本页点击「下载」即可保存 Godot Wordmark 的 SVG 矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Godot Wordmark 的品牌标志与名称版权归其品牌方所有，本站内容仅供学习与设计识别参考，请勿用于商标注册或误导性用途；商用前请确认品牌官方的使用规范与授权要求。文件体积 4.17 KB，viewBox 为 0 0 128 128，共 2 个矢量图元。
常见问题
Godot Wordmark 图标是什么？
Godot Wordmark 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。
如何下载 Godot Wordmark 图标？
在本页点击「下载 SVG」即可保存 Godot Wordmark 的矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Godot Wordmark 图标可以商用吗？
Godot Wordmark 为品牌标志，版权归品牌方所有，本站内容仅供识别参考；商用前请先确认对应品牌的使用规范与授权要求。
如何修改 Godot Wordmark 图标的颜色？
在「预览参数」面板中调整颜色与描边宽度，使用场景与用法示例会实时跟随，确认效果后再复制或下载即可。
SVG 健康报告
100/100
同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器
文件体积
4.17 KB
4,271 字节
viewBox
0 0 128 128
同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器
图元总数
2
<path> ×2
风格
单色轮廓
无显式填色，跟随容器 currentColor
图标信息摘要
Godot Wordmark 是一个通用类别的单文件 SVG 矢量图标，文件体积 4.17 KB，协议为™ 品牌商标（版权归品牌方，仅供识别参考）。可在本站免费下载 Godot Wordmark的 SVG 源文件与 PNG 位图（16-512px），支持自定义颜色与描边宽度、一键生成 Favicon 包，并提供 React / Vue 组件代码与 Data URI 引用。
继续探索
相关搜索
暂无推荐
已显示全部 24 项
