Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 1x 6x 6x 6x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import Icon from './Icon.js'
import LazyIcon from './LazyIcon.js'
import {ATOM_ICON_COLORS, ATOM_ICON_RENDERS, ATOM_ICON_SIZES, ATOM_ICON_SHAPES, BASE_CLASS} from './settings.js'
const AtomIcon = ({
as = 'span',
children,
className: classNameProp,
shape,
color = ATOM_ICON_COLORS.currentColor,
size = ATOM_ICON_SIZES.small,
render = ATOM_ICON_RENDERS.eager,
style: _ignoredStyle, // eslint-disable-line react/prop-types
...props
}) => {
const className = cx(
BASE_CLASS,
{
[`${BASE_CLASS}--size-${size}`]: size,
[`${BASE_CLASS}--color-${color}`]: color,
[`${BASE_CLASS}--shape-${shape}`]: shape
},
classNameProp
)
const IconRender = render === ATOM_ICON_RENDERS.eager ? Icon : LazyIcon
return (
<IconRender as={as} {...props} className={className}>
{children}
</IconRender>
)
}
AtomIcon.displayName = 'AtomIcon'
AtomIcon.propTypes = {
/* Render the passed value as the correspondent HTML tag or the component if a function is passed */
as: PropTypes.elementType,
/**
* Determine color of the icon
* Besides the primary color types, you could use currentColor to inherit the color from the parent.
* (default: ATOM_ICON_COLORS.currentColor)
*/
color: PropTypes.oneOf(Object.values(ATOM_ICON_COLORS)),
/**
* The children must be a SVG that follows the definition stated on the UXDEF.md.
*/
children: PropTypes.element,
/**
* Determine the size of the icon. (default: ATOM_ICON_SIZES.medium)
*/
size: PropTypes.oneOf(Object.values(ATOM_ICON_SIZES)),
/**
* Determine the render type of the icon.
* 'eager': The icon will be server-side rendered (default)
* 'lazy': The icon will be loaded on a client when visible
*/
render: PropTypes.oneOf(Object.values(ATOM_ICON_RENDERS)),
/** CSS Classes to add to icon */
className: PropTypes.string,
/**
* CSS styles border radius
*/
shape: PropTypes.oneOf(Object.values(ATOM_ICON_SHAPES))
}
export default AtomIcon
export {
ATOM_ICON_COLORS,
ATOM_ICON_SIZES,
ATOM_ICON_RENDERS,
ATOM_ICON_SHAPES,
ATOM_ICON_COLORS as atomIconColors,
ATOM_ICON_SIZES as atomIconSizes,
ATOM_ICON_RENDERS as atomIconRenders,
ATOM_ICON_SHAPES as atomIconShapes
}
|