# Logo

The `Logo` component provides a simple and consistent way to display the official DID Connect logo within your application. It's a straightforward visual component designed for brand representation, ensuring your users recognize the familiar decentralized identity connection method.

## Usage

To use the component, simply import it and include it in your JSX. You can control its size using the `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>
  );
}
```

## Props

The `Logo` component is a wrapper around an SVG element and accepts the following props:

<x-field-group>
  <x-field data-name="size" data-type="number" data-default="24" data-desc="Sets both the width and height of the logo in pixels."></x-field>
  <x-field data-name="...rest" data-type="any" data-desc="Any other props are passed directly to the underlying SVG element, allowing for customization with attributes like `className` or `style`."></x-field>
</x-field-group>

## When to Use

- In the header or footer of your application to show that it's powered by DID Connect.
- On login or connection screens, often placed near the `Button` or within the `DidConnect` modal for brand consistency.
- On informational or "About" pages that describe the authentication methods available.

## Next Steps

After adding the `Logo`, explore other UI components to complete your user interface:

<x-cards>
  <x-card data-title="Button" data-href="/ui-components/button" data-icon="lucide:mouse-pointer-click">
    Use the pre-styled Button component to trigger the DID Connect flow.
  </x-card>
  <x-card data-title="Avatar" data-href="/ui-components/avatar" data-icon="lucide:user-circle">
    Display a user's profile picture after they have successfully logged in.
  </x-card>
  <x-card data-title="Address" data-href="/ui-components/address" data-icon="lucide:fingerprint">
    Show the user's decentralized identifier (DID) in a formatted and readable way.
  </x-card>
</x-cards>