Logomark

Use the <Logomark> component to easily render the Sajari logomark.

Import

import { Logomark } from '@sajari-ui/core';

import { Logomark } from '@sajari-ui/core';

Usage

Editable Example

<Logomark />

<Logomark />

Animated

An animated version is available using the animated prop. Animation is performed via CSS @keyframes.

Editable Example

<Logomark animated />

<Logomark animated />

Sizes

The size of the logomark can be set using the size prop.

Value	Pixels
`xs`	16
`sm`	32
`md`	48
`lg`	64
`xl`	96
`2xl`	128
`3xl`	256

Editable Example

<Flex space="space-x-4">
  <Logomark size="xs" />
  <Logomark size="sm" />
  <Logomark size="md" />
  <Logomark size="lg" />
  <Logomark size="xl" />
  <Logomark size="2xl" />
  <Logomark size="3xl" />
</Flex>

<Flex space="space-x-4">
  <Logomark size="xs" />
  <Logomark size="sm" />
  <Logomark size="md" />
  <Logomark size="lg" />
  <Logomark size="xl" />
  <Logomark size="2xl" />
  <Logomark size="3xl" />
</Flex>

Composition

Here's an example usage of the logomark.

Editable Example

<Flex
  height="h-96"
  alignItems="items-center"
  justifyContent="justify-center"
  backgroundColor="bg-gray-900"
  textColor="text-white"
  borderRadius="rounded"
>
  <Box textAlign="text-center">
    <Logomark animated display="inline-flex" />
    <Text margin="mt-4" fontSize="text-xl">
      Loading...
    </Text>
  </Box>
</Flex>

<Flex
  height="h-96"
  alignItems="items-center"
  justifyContent="justify-center"
  backgroundColor="bg-gray-900"
  textColor="text-white"
  borderRadius="rounded"
>
  <Box textAlign="text-center">
    <Logomark animated display="inline-flex" />
    <Text margin="mt-4" fontSize="text-xl">
      Loading...
    </Text>
  </Box>
</Flex>

Props

Icon component composes Box so you can pass all Box props.

Name	Type	Default	Description
`size`	`xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	`lg`	The size of the logomark.
`animated`	`boolean`	`false`	Whether to animate the logomark.
`flat`	`boolean`	`false`	Whether to fill the logomark using `currentColor` rather than brand colors.
`role`	`presentation`, `img`	`presentation`	The html role of the icon.