Logo#

Import#

import { Logo } from '@dnb/eufemia'

Description#

A ready-to-use Logo component with the needed SVGs.

Relevant links#

Related components#

Logo is part of the Content category. Other components for similar needs:

Accordion — to let people open and close sections of related content.
Avatar — to make a person, company, or profile easier to recognize.
Card — to group related content in a clear, separated area.
CountryFlag — to show a country by its flag from an ISO country code.
DateFormat — to show dates in the correct DNB format.
Heading — to create accessible page headings with the correct level.

See all in Content →

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