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 'playbook-ui' const IconRotate = (props) => { 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 'playbook-ui' const IconFlip = (props) => { 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
A spinner icon can show a user that something is loading or saving.
import React from 'react' import Icon from 'playbook-ui' const IconAnimate = (props) => { 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
Icon Pull can be used to indicate that the user can perform a pull action.
import React from 'react' import Icon from 'playbook-ui' const IconSizes = (props) => { 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
When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
Attributes must be React compatible e.g. xmlns:xlink
should be xmlnsXlink
and so on. There should be no hyphenated attributes and no semi-colons!.
Fill colors with regards to g
or path
nodes, e.g. fill="black"
, should be replaced with currentColor
ala fill="currentColor"
. Your mileage may vary depending on the complexity of your SVG.
Pay attention to your custom icon's dimensions and viewBox
attribute. It is best to use a viewBox="0 0 512 512"
starting point when designing instead of trying to retrofit the viewbox afterwards!
You must source your own SVG into component/view you are working on. This can easily be done in programmatic and maintainable ways.
Sending the absolute path to the icon
prop results in an <SVG>
tag within the working view.
import React from 'react' import { Icon } from 'playbook-ui' const config = { icon: ( <svg viewBox="0 -256 1792 1792" xmlns="http://www.w3.org/2000/svg" > <g transform="matrix(1,0,0,-1,53.152542,1217.0847)"> <path d="m 384,64 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 26,0 45,19 19,19 19,45 z m 644,420 -682,-682 q -37,-37 -90,-37 -52,0 -91,37 L 59,-90 Q 21,-54 21,0 21,53 59,91 L 740,772 Q 779,674 854.5,598.5 930,523 1028,484 z m 634,435 q 0,-39 -23,-106 Q 1592,679 1474.5,595.5 1357,512 1216,512 1031,512 899.5,643.5 768,775 768,960 q 0,185 131.5,316.5 131.5,131.5 316.5,131.5 58,0 121.5,-16.5 63.5,-16.5 107.5,-46.5 16,-11 16,-28 0,-17 -16,-28 L 1152,1120 V 896 l 193,-107 q 5,3 79,48.5 74,45.5 135.5,81 61.5,35.5 70.5,35.5 15,0 23.5,-10 8.5,-10 8.5,-25 z" /> </g> </svg> ), } const IconCustom = (props) => { return ( <React.Fragment> <p> <Icon icon={config.icon} /> </p> <p> <Icon icon={config.icon} rotation={90} size="2x" /> </p> <p> <Icon icon={config.icon} size="3x" spin /> </p> <p> <Icon icon={config.icon} size="5x" /> </p> <p> <Icon flip="horizontal" icon={config.icon} size="5x" /> </p> </React.Fragment> ) } export default IconCustom
Our Icon kit allows integration with FontAwesome's custom kit functionality out-of-the-box.
All you need to do is 3 things:
1) Import your custom-icon.js file as outlined in the FontAwesome docs.
2) Use our fontStyle prop called "fak" so that our Icon component knows you are using a "fa-kit" icon.
3) Pass in your FaKit name as a string to our icon prop (This is the name that you designated when you uploaded the icon on their site).
Be careful of use cases where there should be a clickable area around the icon. Icon Circle Button may need to be used instead.