Skip to main content

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.

MyHeader.js

jsx
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:

  • size number (default: 24) — Sets both the width and height of the logo in pixels.
  • ...rest any — Any other props are passed directly to the underlying SVG element, allowing for customization with attributes like className or style.

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:

Button

Use the pre-styled Button component to trigger the DID Connect flow.

Avatar

Display a user's profile picture after they have successfully logged in.

Address

Show the user's decentralized identifier (DID) in a formatted and readable way.