Logo 组件提供了一种简单且一致的方式，在您的应用程序中显示官方的 DID Connect 徽标。它是一个专为品牌展示而设计的直观视觉组件，确保您的用户能够识别这种熟悉的去中心化身份连接方式。
用法
要使用该组件，只需导入它并将其包含在您的 JSX 中。您可以使用 size 属性来控制其大小。
MyHeader.js
import React from 'react';
import Logo from '@arcblock/did-connect-react/lib/Logo';
export default function AppHeader() {
return (
<header style={{ display: 'flex', alignItems: 'center', padding: '16px', borderBottom: '1px solid #eee' }}>
<Logo size={40} />
<h1 style={{ marginLeft: '12px', fontSize: '24px' }}>我的应用</h1>
</header>
);
}属性
Logo 组件是 SVG 元素的包装器，接受以下属性：
- size
number(default:24) — 设置徽标的宽度和高度，单位为像素。 - ...rest
any— 任何其他属性都会直接传递给底层的 SVG 元素，从而允许使用className或style等属性进行自定义。
何时使用
- 在应用程序的页眉或页脚中，以表明它由 DID Connect 提供支持。
- 在登录或连接屏幕上，通常放置在
Button附近或DidConnect模态框内，以保持品牌一致性。 - 在描述可用身份验证方法的信息性或“关于”页面上。
后续步骤
添加 Logo 后，探索其他 UI 组件以完善您的用户界面：