Skip to content
Home

Logo

Info
Demos
Properties

Demos

Logo that changes based on theme

You can import the SVGs for each brand like this:

import {
  DnbDefault,
  SbankenDefault,
  CarnegieDefault,
} from '@dnb/eufemia/components/Logo'
Code Editor
function getLogoSvg(themeName) {
  switch (themeName) {
    case 'sbanken':
      return SbankenDefault
    case 'carnegie':
      return CarnegieDefault
    default:
      return DnbDefault
  }
}
function MyApp() {
  const { name } = useTheme()
  return (
    <Provider>
      <Card stack>
        <ChangeStyleTheme />
        <Logo height="32" svg={getLogoSvg(name)} />
      </Card>
    </Provider>
  )
}
render(<MyApp />)

Logo with dynamic height

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

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

Logo with dynamic height

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

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

Logo with fixed height

Code Editor
<Logo height="96" />

Logo and inherit color

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

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