Logo

Use the logo component to render an SVG version of the Datastory logo.

import Logo from "@ds-kit/logo"

Basic example

Without any custom properties the logo component will render the datastory logo in datastory blurble.


<Logo />

Custom size

The standard size for the logo is 2.5rem, or 40px. You can set a manual size for the logo if necessary using the size prop.


<>
  <Logo size="10rem" />
  <Logo size="5rem" />
  <Logo size="2.5rem" />
</>

Custom colors

You can specify custom colors for the badge (bg), and for the "d" (color).


<>
  <Logo bg="green.400" />
  <Logo outlined color="primary" />
</>

Custom text

To brand

Skolkartan
Skolkartan
Skolkartan
<>
  <Logo text="Skolkartan" />
  <Logo text="Skolkartan" textColor="grey.100" />
  <Logo text="Skolkartan" size="6rem" />
</>

Logo props

Name

Type

Default

bg

string

"primary"

color

string

"white"

text

string

textColor

string

"text"

size

string

"2.5rem"

outlined

bool

Sections