Logo#

Demos#

Importing a logo#

To use a logo, the svg must be imported and handed to the Logo components through the svg property.

import {
  DnbDefault,
  CarnegieDefault,
  EiendomDefault,
  SbankenDefault,
  SbankenHorizontal,
  SbankenCompact,
} from '@dnb/eufemia/components/Logo'

<Flex.Vertical>
  <Logo height="48" svg={DnbDefault} />
  <Logo height="48" svg={EiendomDefault} />
  <Logo height="48" svg={CarnegieDefault} />
  <Logo height="48" svg={SbankenDefault} />
  <Logo height="48" svg={SbankenHorizontal} />
  <Logo height="48" svg={SbankenCompact} />
</Flex.Vertical>

If no svg is provided, the DnbDefault logo is used by default:

<Logo height="96" />

Change logo based on theme#

The svg property can also accept a function that returns a logo svg based on the current theme props.

import type { ThemeProps } from '@dnb/eufemia/shared/Theme'

function myLogoSelector(theme: ThemeProps) {
  switch (theme?.brand) {
    case 'sbanken':
      return SbankenDefault
    case 'carnegie':
      return CarnegieDefault
    case 'eiendom':
      return EiendomDefault
    default:
      return DnbDefault
  }
}
function MyApp() {
  return (
    <Card stack>
      <MyThemeSelector />
      <Logo height="96" svg={myLogoSelector} />
    </Card>
  )
}
render(<MyApp />)

Customization#

Default inherited height#

By default the logo will use the inherited font-size to set its height.

<span
  style={{
    fontSize: '6rem',
  }}
>
  <Logo svg={myLogoSelector} />
</span>

Alternative inherited height#

You can choose to let the height be set by the inherited height instead by setting the inheritSize property.

<span
  style={{
    height: '6rem',
  }}
>
  <Logo inheritSize svg={myLogoSelector} />
</span>

Fixed height and/or width#

The logo's height and width can be fixed depending on your needs.

<Flex.Vertical>
  <Logo height="96" svg={myLogoSelector} />
  <Logo width="96" svg={myLogoSelector} />
</Flex.Vertical>

Color#

You can choose to override the default colors by either inheriting the currentcolor, or set it directly.

<Flex.Vertical>
  <span
    style={{
      color: 'tomato',
    }}
  >
    <Logo height="96" inheritColor svg={myLogoSelector} />
  </span>

  <Logo height="96" color="hotpink" svg={myLogoSelector} />
</Flex.Vertical>

Suggest an edit