Usage
import { Logo } from '@loomhq/lens'
<Logo />
Variants
<Distribute gap="large" alignment="center">
<Logo variant="symbol" maxWidth={8} />
<div className="borderLeft borderRight px:large">
<Logo variant="wordmark" maxWidth={13} />
</div>
<Logo maxWidth={13} />
</Distribute>
Size
<Distribute gap="medium" alignment="center">
<Logo variant="symbol" maxWidth={12} />
<Logo variant="symbol" maxWidth={6} />
<Logo variant="symbol" maxWidth={3} />
</Distribute>
Color
Use one of the pallete colors.
Symbol and wordark colors can be assigned independently with symbolColor
and wordmarkColor
props.
<Distribute gap="medium" alignment="center">
<Logo maxWidth={12} symbolColor="body" wordmarkColor="orange" />
</Distribute>
Props
symbolColor
string
'primary'
wordmarkColor
string
'body'
variant
oneOf: 'combined', 'symbol', 'wordmark'
'combined'