Icon

import React from 'react'
import { Icon } from '../../'

const IconDefault = () => {
  return (
    <div>
      <Icon
          fixedWidth
          icon="user"
      />
    </div>
  )
}

export default IconDefault

import React from 'react'
import { Icon } from '../../'

const IconRotate = () => {
  return (
    <div>
      <Icon
          fixedWidth
          icon="user"
          rotation={90}
          size="2x"
      />
      <Icon
          fixedWidth
          icon="user"
          rotation={180}
          size="2x"
      />
      <Icon
          fixedWidth
          icon="user"
          rotation={270}
          size="2x"
      />
    </div>
  )
}

export default IconRotate

import React from 'react'
import { Icon } from '../../'

const IconFlip = () => {
  return (
    <div>
      <Icon
          fixedWidth
          flip="horizontal"
          icon="question-circle"
          size="2x"
      />
      <Icon
          fixedWidth
          flip="vertical"
          icon="question-circle"
          size="2x"
      />
      <Icon
          fixedWidth
          flip="both"
          icon="question-circle"
          size="2x"
      />
    </div>
  )
}

export default IconFlip

import React from 'react'
import { Icon } from '../../'

const IconAnimate = () => {
  return (
    <div>
      <p>
        <Icon
            fixedWidth
            icon="spinner"
            size="2x"
            spin
        />
        {' '}
        <span>{'Spin'}</span>
      </p>
      <br />
      <p>
        <Icon
            fixedWidth
            icon="spinner"
            pulse
            size="2x"
        />
        {' '}
        <span>{'Pulse'}</span>
      </p>
    </div>
  )
}

export default IconAnimate

import React from 'react'
import { Icon } from '../../'

const IconPull = () => {
  return (
    <div>
      <Icon
          fixedWidth
          icon="arrow-left"
          pull="left"
          size="2x"
      />
      <Icon
          fixedWidth
          icon="arrow-right"
          pull="right"
          size="2x"
      />
    </div>
  )
}

export default IconPull

import React from 'react'
import { Icon } from '../../'

const IconBorder = () => {
  return (
    <div>
      <Icon
          border
          fixedWidth
          icon="user"
          size="2x"
      />
    </div>
  )
}

export default IconBorder

import React from 'react'
import { Icon } from '../../'

const IconSizes = () => {
  return (
    <div>
      <p>
        <Icon
            icon="user"
            size="lg"
        />
        {' '}
        <span>{'Large'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="sm"
        />
        {' '}
        <span>{'Small'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="xs"
        />
        {' '}
        <span>{'XSmall'}</span>
      </p>

      <br />
      <br />

      <p>
        <Icon
            icon="user"
            size="1x"
        />
        {' '}
        <span>{'1x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="2x"
        />
        {' '}
        <span>{'2x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="3x"
        />
        {' '}
        <span>{'3x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="4x"
        />
        {' '}
        <span>{'4x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="5x"
        />
        {' '}
        <span>{'5x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="6x"
        />
        {' '}
        <span>{'6x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="7x"
        />
        {' '}
        <span>{'7x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="8x"
        />
        {' '}
        <span>{'8x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="9x"
        />
        {' '}
        <span>{'9x'}</span>
      </p>
      <p>
        <Icon
            icon="user"
            size="10x"
        />
        {' '}
        <span>{'10x'}</span>
      </p>
    </div>
  )
}

export default IconSizes

import React from 'react'
import { Body, Icon } from '../../'

const IconDefaultDark = () => {
  return (
    <div>
      <Body dark>
        <Icon
            fixedWidth
            icon="user"
        />
      </Body>
    </div>
  )
}

export default IconDefaultDark