Skip to content
Home

Logo

Info
Demos
Properties

Demos

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

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

Logo with dynamic height

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

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

Logo with fixed height

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

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 svg={getLogoSvg} />
</span>