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

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
Advanced Topics