Sha256: cb5be48ed27d92a6526c60925796367420d02d11faac878d4b7c72ec1cc26cdc
Contents?: true
Size: 1.86 KB
Versions: 32
Compression:
Stored size: 1.86 KB
Contents
/* @flow */
import React from 'react'
import classnames from 'classnames'
import { buildAriaProps, buildDataProps } from '../utilities/props'
import { globalProps } from '../utilities/globalProps.js'
type IconProps = {
aria?: object,
border?: boolean,
className?: string,
data?: object,
fixedWidth?: boolean,
flip?: "horizontal" | "vertical" | "both" | "none",
icon: string,
id?: string,
inverse?: boolean,
listItem?: boolean,
pull?: "left" | "right" | "none",
pulse?: boolean,
rotation?: 90 | 180 | 270,
size?: | "lg"
| "xs"
| "sm"
| "1x"
| "2x"
| "3x"
| "4x"
| "5x"
| "6x"
| "7x"
| "8x"
| "9x"
| "10x",
spin?: boolean,
}
const flipMap = {
horizontal: 'fa-flip-horizontal',
vertical: 'fa-flip-vertical',
both: 'fa-flip-horizontal fa-flip-vertical',
}
const Icon = (props: IconProps) => {
const {
aria = {},
border = false,
className,
data = {},
fixedWidth = true,
flip = false,
icon,
id,
inverse = false,
listItem = false,
pull,
pulse = false,
rotation,
size,
spin = false,
} = props
const classes = classnames(
flipMap[flip],
'pb_icon_kit',
'far',
{
'fa-border': border,
'fa-fw': fixedWidth,
'fa-inverse': inverse,
'fa-li': listItem,
'fa-pulse': pulse,
'fa-spin': spin,
[`fa-${icon}`]: icon,
[`fa-${size}`]: size,
[`fa-pull-${pull}`]: pull,
[`fa-rotate-${rotation}`]: rotation,
},
globalProps(props),
className
)
aria.label ? null : aria.label = `${icon} icon`
const ariaProps = buildAriaProps(aria)
const dataProps = buildDataProps(data)
return (
<>
<i
{...dataProps}
className={classes}
id={id}
/>
<span
{...ariaProps}
hidden
/>
</>
)
}
export default Icon
Version data entries
32 entries across 32 versions & 1 rubygems