Usage
import { Logo } from '@loomhq/lens'
<Logo />
Brands
<Arrange gap="xlarge" alignment="center">
<Logo brand="apptile" maxWidth={13} />
<Logo brand="loom" maxWidth={13} />
<Logo brand="ai" maxWidth={13} />
</Arrange>
Variants
<Arrange gap="xlarge" alignment="center">
<Logo variant="symbol" maxWidth={8} brand="apptile" />
<Logo variant="symbol" maxWidth={8} />
<Logo variant="symbol" maxWidth={8} brand="ai" />
<Logo variant="wordmark" maxWidth={13} />
<Logo variant="wordmark" maxWidth={13} brand="ai" />
</Arrange>
Size
<Arrange gap="medium">
<Logo variant="symbol" maxWidth={12} />
<Logo variant="symbol" maxWidth={6} />
<Logo variant="symbol" maxWidth={3} />
</Arrange>
Custom ID
Note: this section currently only affects the AI symbol (for more context).
When there're multiple elements on the same page refer to radialGradient with the same id,
it may invalidate the second and following references. To resolve it, you can assign a
custom ID to the AI symbol.
<Logo maxWidth={6} variant="symbol" brand="ai" customId="aiPanelLogo"/>
Color
Use one of the palette colors.
Symbol and wordark colors can be assigned independently with symbolColor and wordmarkColor props.
<Arrange gap="xlarge">
<Logo maxWidth={12} symbolColor="body" wordmarkColor="orange" brand="apptile" />
<Logo maxWidth={12} symbolColor="body" wordmarkColor="orange" />
<Logo maxWidth={12} symbolColor="body" wordmarkColor="orange" brand="ai" />
</Arrange>
Props
variant
'combined' | 'symbol' | 'wordmark'
'combined'
wordmarkColor
string
'body'
brand
'loom' | 'ai' | 'apptile'
'loom'