# Logo

`Logo` 组件提供了一种简单且一致的方式，在您的应用程序中显示官方的 DID Connect 徽标。它是一个专为品牌展示而设计的直观视觉组件，确保您的用户能够识别这种熟悉的去中心化身份连接方式。

## 用法

要使用该组件，只需导入它并将其包含在您的 JSX 中。您可以使用 `size` 属性来控制其大小。

```jsx MyHeader.js icon=logos:react
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 元素的包装器，接受以下属性：

<x-field-group>
  <x-field data-name="size" data-type="number" data-default="24" data-desc="设置徽标的宽度和高度，单位为像素。"></x-field>
  <x-field data-name="...rest" data-type="any" data-desc="任何其他属性都会直接传递给底层的 SVG 元素，从而允许使用 `className` 或 `style` 等属性进行自定义。"></x-field>
</x-field-group>

## 何时使用

- 在应用程序的页眉或页脚中，以表明它由 DID Connect 提供支持。
- 在登录或连接屏幕上，通常放置在 `Button` 附近或 `DidConnect` 模态框内，以保持品牌一致性。
- 在描述可用身份验证方法的信息性或“关于”页面上。

## 后续步骤

添加 `Logo` 后，探索其他 UI 组件以完善您的用户界面：

<x-cards>
  <x-card data-title="Button" data-href="/ui-components/button" data-icon="lucide:mouse-pointer-click">
    使用预设样式的 Button 组件来触发 DID Connect 流程。
  </x-card>
  <x-card data-title="Avatar" data-href="/ui-components/avatar" data-icon="lucide:user-circle">
    在用户成功登录后，显示其个人资料图片。
  </x-card>
  <x-card data-title="Address" data-href="/ui-components/address" data-icon="lucide:fingerprint">
    以格式化且易于阅读的方式显示用户的去中心化标识符（DID）。
  </x-card>
</x-cards>