Components

Spot illustration

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

NameTypeDefaultDescriptionRequired?
nameEnumIllustrationNames
customFill
'red'
'green'
'yellow'
'magenta'
'purple'
'aqua'
heightstring
widthstring

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>