# Logo

`Logo` 組件提供了一種簡單且一致的方式，在您的應用程式中顯示官方的 DID Connect 標誌。它是一個專為品牌形象設計的直觀視覺組件，確保您的用戶能識別出這種熟悉的去中心化身份連接方式。

## 使用方式

若要使用此組件，只需匯入並將其包含在您的 JSX 中。您可以使用 `size` prop 控制其大小。

```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' }}>My Application</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">
    使用預先設定樣式的按鈕組件來觸發 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>