react-images/src/components/svg.js

A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS

// @flow
// @jsx glam
import React from 'react'
import glam from 'glam'

type Props = { size: number }

const Svg = ({ size, ...props }: Props) => (
  <svg
    role="presentation"
    viewBox="0 0 24 24"
    css={{
      display: 'inline-block',
      fill: 'currentColor',
      height: size,
      stroke: 'currentColor',
      strokeWidth: 0,
      width: size,
    }}
    {...props}
  />
)

export const ChevronLeft = ({ size = 32, ...props }: Props) => (
  <Svg size={size} {...props}>
    <path d="M15.422 16.078l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z" />
  </Svg>
)
export const ChevronRight = ({ size = 32, ...props }: Props) => (
  <Svg size={size} {...props}>
    <path d="M9.984 6l6 6-6 6-1.406-1.406 4.594-4.594-4.594-4.594z" />
  </Svg>
)
export const Close = ({ size = 32, ...props }: Props) => (
  <Svg size={size} {...props}>
    <path d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z" />
  </Svg>
)
export const FullscreenEnter = ({ size = 32, ...props }: Props) => (
  <Svg size={size} {...props}>
    <path d="M14.016 5.016h4.969v4.969h-1.969v-3h-3v-1.969zM17.016 17.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 9.984v-4.969h4.969v1.969h-3v3h-1.969zM6.984 14.016v3h3v1.969h-4.969v-4.969h1.969z" />
  </Svg>
)
export const FullscreenExit = ({ size = 32, ...props }: Props) => (
  <Svg size={size} {...props}>
    <path d="M15.984 8.016h3v1.969h-4.969v-4.969h1.969v3zM14.016 18.984v-4.969h4.969v1.969h-3v3h-1.969zM8.016 8.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 15.984v-1.969h4.969v4.969h-1.969v-3h-3z" />
  </Svg>
)