# ロゴ

`Logo`コンポーネントは、アプリケーション内に公式のDID Connectロゴをシンプルかつ一貫して表示する方法を提供します。これはブランド表現のために設計された単純なビジュアルコンポーネントであり、ユーザーがおなじみの分散型ID接続方法を認識できるようにします。

## 使用方法

コンポーネントを使用するには、インポートして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' }}>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`モーダル内に配置します。
- 利用可能な認証方法を説明する情報ページや「About」ページに表示します。

## 次のステップ

`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>