A spinner icon can show a user that something is loading or saving.
Icon Pull can be used to indicate that the user can perform a pull action.
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.
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).
Pass any text, status, data, product, or category Playbook color token to the color prop to change any icon's color.
Customize your icon circle by passing one of our seven base colors to the variant prop: royal orange purple teal red yellow green
The Icon Circle also allows you to pass in an HTML emoji in place of an icon if needed. To do so, pass any emoji or its hexa/decimal ref (see here) as a string to the icon prop as shown in the code snippet below.
Use these to represent what affiliation an employee has.
To add a transition, simply use the transition prop and one of the three string options "fade", "blur", or "scale".
Lightbox contains several props: photos (an array of urls), initialPhoto (a number), onClickLeft (an optional callback function for top left close button), title and description (string or custom components), icon ( optional prop for the close button in the top left of the header), navRight (optional prop that renders clickable text in the top right section of the header), onClickRight (optional callback function of navRight) and onChange (optional event handler prop exposing index of current photo).
When multiple images are passed to the Lightbox kit, it will also display scrollable thumbnails at the bottom of the screen for easier access to all images. In addition to the scrollable thumbnails, larger screens provide arrow buttons on the left and right of the image itself for easier scrolling while on mobile devices the kit allows for swiping.
This example also highlights the use of the optional onChange prop which is an event handler prop that tracks the index of the image being viewed and exposes it for use by the developer.
title and description are optional props that can be passed to the kit if needed. Each of these props can take a string OR a custom component. This example highlights what the kit will look like when only strings are passed as title and description.
title and description props also accept custom components if needed. The optional navRight prop only accepts a string that translates into a clickable button. onClickRight prop can be used to pass in click function for navRight.
The currentPhotoIndex prop allows the user to pass a number to the lightbox that will set the current slide by index. This can be leveraged if the user wants to change slides using custom buttons. To do this, the user must also make use of the current slide's index that is exposed by the onChange prop.
