Logo 主标

Unif 品牌主标——白色简化飞鸟剪影 + 底部"健康快乐"中文标语，整体置于主橙 #EB6E00 背景上。

实时预览

下方渲染的就是 src/components/ui/Logo/Logo.tsx 本体,通过 react-native-web 翻译成浏览器节点。source 由 consumer 自传(品牌资产由消费者持有),文档站这里通过本地包装传入 static/img/logo.png。

默认 size=64 · borderRadius=size/4 squircle

尺寸档位 32 / 64 / 96 / 120

borderRadius 覆盖

0 直角 · 默认 squircle · 32 满圆

资源位置

用途	路径	说明
RN App / 设计系统 Logo 组件	src/assets/logo.png	主标 1024×1024 RGBA（飞鸟 + "健康快乐"）
文档站 navbar / OG image / Favicon	website/static/img/logo.png	同源镜像，docusaurus.config.ts 内三处都引用同一份

用法

React Native（推荐：用 <Logo> 组件）

import { Logo } from '@unif/react-native-design';

<Logo />                                       // 默认 64×64 squircle
<Logo size={120} />                            // App icon 预览
<Logo size={32} borderRadius={32} />           // 满圆 / drawer 头像

Web / Docusaurus（静态资源）

<img src="/img/logo.png" alt="Unif" width="64" height="64" />

App Icon 预设尺寸

平台	输出尺寸
iOS App icon	1024×1024（源文件即用）
iOS @1x/@2x/@3x	60 / 120 / 180
Android mdpi → xxxhdpi	48 / 72 / 96 / 144 / 192
浏览器 favicon	32 / 48 / 64

源文件足够大（1024×1024），按需下采样即可。

API

Prop	Type	默认	说明
size	number?	64	渲染正方形边长
borderRadius	number?	size / 4	圆角；不传走柔和的 squircle
style	StyleProp<ImageStyle>?	—	附加样式
testID	string?	—	E2E 定位

用法规则

• 背景色 主橙 #EB6E00，不要换其它底色。如需放在浅色背景上，外层包一层主橙圆角容器或留 padding。
• 不要变形 等比缩放可以；扁平拉伸 / 改色 / 加阴影 / 加描边都不行。
• 最小尺寸 24×24 飞鸟主标在 ≥24px 清晰可读；更小尺寸（如 16×16 浏览器 tab）就接受糊感，或临时用一张降采样后的 PNG，不要为了清晰度重画 logo。
• 不要替换 "健康快乐" 标语 这是 logo 内嵌文字，不是 caption——不要外加自定义副标。
• 不要重新绘制飞鸟 直接用 <Logo> 组件或 src/assets/logo.png，不要用 SVG 重画。

Favicon

文档站 (docusaurus.config.ts) 的 favicon / themeConfig.image / navbar.logo.src 三处都指向同一份 img/logo.png —— 站点视觉一致性优先于小尺寸辨识度。