import classNames from 'classnames' ; import React , { SVGAttributes , memo } from 'react' ; import { deepEqual } from '../../utils/fast_deep_equal' ; import { AlertIcon } from './assets/alert' ; import { DotIcon } from './assets/dot' ; import { EmptyIcon } from './assets/empty' ; import { EyeIcon } from './assets/eye' ; import { EyeClosedIcon } from './assets/eye_closed' ; import { ListIcon } from './assets/list' ; import { QuestionInCircle } from './assets/question_in_circle' ; const typeToIconMap = { alert : AlertIcon , dot : DotIcon , empty : EmptyIcon , eye : EyeIcon , eyeClosed : EyeClosedIcon , list : ListIcon , questionInCircle : QuestionInCircle , } ; internal export type IconColor = string ; internal export type IconType = keyof typeof typeToIconMap ; interface IconProps { className ? : string ; 'aria-label' ? : string ; 'data-test-subj' ? : string ; type ? : IconType ; color ? : IconColor ; } internal export type IconComponentProps = Omit < SVGAttributes < SVGElement > , 'color' | 'type' > & IconProps ; function IconComponent ( { type , color , className , tabIndex , ... rest } ) { let optionalCustomStyles = null ; if ( color ) { optionalCustomStyles = { color } ; } const classes = classNames ( 'echIcon' , className ) ; const Svg = ( type && typeToIconMap [ type ] ) || EmptyIcon ; const focusable = tabIndex === undefined || tabIndex === - 1 ? 'false' : 'true' ; return < Svg className = { classes } { ... optionalCustomStyles } tabIndex = { tabIndex } focusable = { focusable } { ... rest } />; } IconComponent . displayName = 'Icon' ; internal export const Icon = memo ( IconComponent , deepEqual ) ;