An icon is a graphic symbol that represents an object (ie a file) or a function. They can be used to give the user feedback.
import React from 'react' import { Icon } from '../../' const IconDefault = (props) => { return ( <div> <Icon fixedWidth icon="user" {...props} /> </div> ) } export default IconDefault
import React from 'react' import { Icon } from '../../' const IconRotate = (props) => { return ( <div> <Icon fixedWidth icon="user" rotation={90} size="2x" {...props} /> <Icon fixedWidth icon="user" rotation={180} size="2x" {...props} /> <Icon fixedWidth icon="user" rotation={270} size="2x" {...props} /> </div> ) } export default IconRotate
import React from 'react' import { Icon } from '../../' const IconFlip = (props) => { return ( <div> <Icon fixedWidth flip="horizontal" icon="question-circle" size="2x" {...props} /> <Icon fixedWidth flip="vertical" icon="question-circle" size="2x" {...props} /> <Icon fixedWidth flip="both" icon="question-circle" size="2x" {...props} /> </div> ) } export default IconFlip
A spinner icon can show a user that something is loading or saving.
import React from 'react' import { Icon } from '../../' const IconAnimate = (props) => { return ( <div> <p> <Icon fixedWidth icon="spinner" size="2x" spin {...props} /> {' '} <span>{'Spin'}</span> </p> <br /> <p> <Icon fixedWidth icon="spinner" pulse size="2x" {...props} /> {' '} <span>{'Pulse'}</span> </p> </div> ) } export default IconAnimate
Icon Pull can be used to indicate that the user can perform a pull action.
import React from 'react' import { Icon } from '../../' const IconPull = (props) => { return ( <div> <Icon fixedWidth icon="arrow-left" pull="left" size="2x" {...props} /> <Icon fixedWidth icon="arrow-right" pull="right" size="2x" {...props} /> </div> ) } export default IconPull
import React from 'react' import { Icon } from '../../' const IconBorder = (props) => { return ( <div> <Icon border fixedWidth icon="user" size="2x" {...props} /> </div> ) } export default IconBorder
import React from 'react' import { Icon } from '../../' const IconSizes = (props) => { return ( <div> <p> <Icon icon="user" size="lg" {...props} /> {' '} <span>{'Large'}</span> </p> <p> <Icon icon="user" size="sm" {...props} /> {' '} <span>{'Small'}</span> </p> <p> <Icon icon="user" size="xs" {...props} /> {' '} <span>{'XSmall'}</span> </p> <br /> <br /> <p> <Icon icon="user" size="1x" {...props} /> {' '} <span>{'1x'}</span> </p> <p> <Icon icon="user" size="2x" {...props} /> {' '} <span>{'2x'}</span> </p> <p> <Icon icon="user" size="3x" {...props} /> {' '} <span>{'3x'}</span> </p> <p> <Icon icon="user" size="4x" {...props} /> {' '} <span>{'4x'}</span> </p> <p> <Icon icon="user" size="5x" {...props} /> {' '} <span>{'5x'}</span> </p> <p> <Icon icon="user" size="6x" {...props} /> {' '} <span>{'6x'}</span> </p> <p> <Icon icon="user" size="7x" {...props} /> {' '} <span>{'7x'}</span> </p> <p> <Icon icon="user" size="8x" {...props} /> {' '} <span>{'8x'}</span> </p> <p> <Icon icon="user" size="9x" {...props} /> {' '} <span>{'9x'}</span> </p> <p> <Icon icon="user" size="10x" {...props} /> {' '} <span>{'10x'}</span> </p> </div> ) } export default IconSizes
Be careful of use cases where there should be a clickable area around the icon. Icon Circle Button may need to be used instead.