Image

import { Image } from 'theme-ui'

<Image
  src={images.flatiron}
/>
<Image
  src={images.flatiron}
/>

<Image
  src={images.logo}
  variant='avatar'
/>
<Image
  src={images.logo}
  variant='avatar'
/>

Variants

Image style variants can be defined in the theme.images object.

// example theme variants
{
  images: {
    avatar: {
      width: 48,
      height: 48,
      borderRadius: 99999,
    },
  }
}