#Logo

#Import

import { Logo } from '@dnb/eufemia'

#Description

A ready to use Logo component with the needed SVGs.

#Relevant links

• Source code
• Docs code

#Logo that changes based on theme

You can import the SVGs for each brand like this:

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

You can then create your helper function to get the right SVG based on the current theme:

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

function getLogoSvg(theme: ThemeProps) {
  switch (theme?.name) {
    case 'sbanken':
      return SbankenDefault

    case 'carnegie':
      return CarnegieDefault

    case 'eiendom':
      return EiendomDefault

    default:
      return DnbDefault
  }
}

#Demos

function MyApp() {
  return (
    <Provider>
      <Card stack>
        <ChangeStyleTheme />
        <Logo height="32" svg={getLogoSvg} />
      </Card>
    </Provider>
  )
}
render(<MyApp />)

#Logo with dynamic height

The height will be set based on the inherited font-size.

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

#Logo with dynamic height

The height will be set based on the parent, inherited height.

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

#Logo with fixed height

<Logo height="96" svg={getLogoSvg} />

#Logo and inherit color

The color will be set based on the parent, inherited color by using currentColor.

<span
  style={{
    color: 'tomato',
  }}
>
  <Logo height="96" inheritColor svg={getLogoSvg} />
</span>