Spot illustration

Components

Spot illustration

Code

Spot illustration is used to render svg illustrations.

Spot illustration assets are stored in @sproutsocial/seeds-illustrations. See the Getting Started guide for an example of how to attach sprites to the DOM.

All of our spot illustration assets are synced from our shared Figma library. Designers with edit access in our Figma account can add/edit spot illustrations.

Many of the spot illustrations are used in the component.

import { SpotIllustration } from '@sproutsocial/racine'

() => {
  const [selection, setSelection] = useState("cat")
  const updateSelection = (e) => setSelection(e.target.value)

  return (
    <>
        <FormField
          label='Illustrations'
          id='illustrationNames'
        >
          { props =>
            <Select
              defaultValue={selection}
              onChange={updateSelection}
              {...props}
            >
              {
                illustrationNames.map(illustration => <option key={illustration} value={illustration}>{illustration}</option>)
              }
            </Select>
          }
        </FormField>
        <Box height="24px" />
        <Box mt={600} display="flex" justifyContent="center">
          <SpotIllustration name={selection} aria-hidden />
        </Box>
    </>
  )
}

Properties

Name	Type	Default	Description	Required?
`name`	`EnumIllustrationNames`
`customFill`	`'red'` `'green'` `'yellow'` `'magenta'` `'purple'` `'aqua'`
`height`	`string`
`width`	`string`

Recipes

Custom fills

<Box display="flex" justifyContent="center">
  <SpotIllustration name="astronaut" customFill="purple" aria-hidden />
</Box>

Custom sizes

<Box display="flex" justifyContent="center">
  <SpotIllustration name="astronaut" width="30" aria-hidden />
</Box>

Small spot illustrations

<Box
    display="flex"
    flexDirection="column"
    justifyContent="center"
    p={400}
  >
    <Box
      width={1}
      display="flex"
      justifyContent="space-between"
      alignItems="center"
    >
      <SpotIllustration name="lightbulb-alt" customFill="green" aria-hidden />
      <SpotIllustration name="shopping-bag" customFill="red" aria-hidden />
      <SpotIllustration name="headset" customFill="yellow" aria-hidden />
      <SpotIllustration name="storefront" customFill="red" aria-hidden />
      <SpotIllustration name="business" customFill="green" aria-hidden />
      <SpotIllustration name="podium" customFill="yellow" aria-hidden />
      <SpotIllustration name="rocket" customFill="magenta" aria-hidden />
      <SpotIllustration name="calendar-event" customFill="aqua" aria-hidden />
      <SpotIllustration name="general-topic" aria-hidden />
    </Box>
    <Box
      width={1}
      display="flex"
      justifyContent="space-between"
      alignItems="center"
      mt={600}
    >
      <SpotIllustration name="pointer" aria-hidden />
      <SpotIllustration name="upward-trend" aria-hidden />
      <SpotIllustration name="compose" aria-hidden />
      <SpotIllustration name="puzzle-piece" aria-hidden />
      <SpotIllustration name="loading" aria-hidden />
      <SpotIllustration name="warning" customFill="red" aria-hidden />
      <SpotIllustration name="lightbulb" aria-hidden />
      <SpotIllustration name="pdf" aria-hidden />
      <SpotIllustration name="wifi" customFill="yellow" aria-hidden />
    </Box>
  </Box>