Skip to content
Home

Logo

Info
Demos
Properties

Import

import { Logo } from '@dnb/eufemia'

Description

A ready to use Logo component with the needed SVGs.

Relevant links

Demos

Importing a logo

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

import {
  DnbDefault,
  CarnegieDefault,
  EiendomDefault,
  SbankenDefault,
  SbankenHorizontal,
  SbankenCompact,
} from '@dnb/eufemia/components/Logo'
Code Editor
<Flex.Container>
  <Logo height="48" svg={DnbDefault} />
  <Logo height="48" svg={CarnegieDefault} />
  <Logo height="48" svg={EiendomDefault} />
  <Logo height="48" svg={SbankenDefault} />
  <Logo height="48" svg={SbankenHorizontal} />
  <Logo height="48" svg={SbankenCompact} />
</Flex.Container>

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

Code Editor
<Logo height="96" />

Change logo based on theme

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

import type { ThemeProps } from '@dnb/eufemia/shared/Theme'
Code Editor
function myLogoSelector(theme: ThemeProps) {
  switch (theme?.name) {
    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.

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

Alternative inherited height

You can chose to let the height be set by the inherited height instead by setting the inheritSize prop.

Code Editor
<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.

Code Editor
<Flex.Container>
  <Logo height="96" svg={myLogoSelector} />
  <Logo width="96" svg={myLogoSelector} />
</Flex.Container>

Color

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

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

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