Icon

The Box component serves as a wrapper component for @bristlecone/icons that extends their styling capabilities with System Props.

Icon component is presently limited in what icons it exposes, or are available; once ready, it will expose Octicons

Default example

<Box p={4}>
 <Icon icon='Logo' />
</Box>

Various sizes

<Flex
    my='3'
    flexWrap='wrap'
    justifyContent='space-evenly'
    alignItems='center'
>
    <Icon icon='Logo' size={'small'} />
    <Icon icon='Logo' size={'medium'} />
    <Icon icon='Logo' size={'large'} />
    <Icon icon='Logo' size={'xlarge'} />
    <Icon icon='Logo' size={'jumbo'} />
</Flex>

Various schemes / color palettes

Some @bristlecone/icons accept a scheme prop to change the look-n-feel of their color palette, such as the Logo Icon.

<Flex
    my='3'
    flexWrap='wrap'
    justifyContent='space-evenly'
    alignItems='center'
>
    <Icon icon='Logo' scheme='darkInverted' size={'large'} />
    <Icon icon='Logo' scheme='light' size={'large'} />
    <Icon icon='Logo' scheme='blue' size={'large'} />
    <Icon icon='Logo' scheme='green' size={'large'} />
    <Icon icon='Logo' scheme='yellow' size={'large'} />
</Flex>

System props

Box components get the COMMON, LAYOUT and POSITION categories of system props. Read the System Props doc page for a full list of available props.

Component props

Prop nameTypeDefaultDescription
iconStringname of the @bristlecone/icon you wish to render with COMMON system props. A full list of available icons is here.
sizeNumber / String32A size for the icon that sets the width and height. Can be a number or one of small, medium, large, xlarge and jumbo, all of which map to a corresponding number