import * as React from 'react' ; import { colors } from '@workday/canvas-kit-react/tokens' ; import { CanvasAccentIcon , CanvasIconTypes } from '@workday/design-assets-types' ; import { CSSObject } from '@emotion/core' ; import Icon , { IconProps } from './Icon' ; export interface AccentIconStyles { default color ? : string ; default transparent ? : boolean ; } export interface AccentIconProps extends AccentIconStyles , Omit < IconProps , 'src' | 'type' > { /**
     *  The icon to display from `@workday/canvas-accent-icons-web`.
     */ icon : CanvasAccentIcon ; default size ? : number ; } export const accentIconStyles = ( { color = colors . blueberry500 , transparent = false , } ) : CSSObject => ( { '& .color-500' : { fill : color , } , '& .french-vanilla-100' : { fill : transparent ? 'transparent' : colors . frenchVanilla100 , } , } ) ; export default class AccentIcon extends React . Component < AccentIconProps > { render ( ) { const { transparent = false , size = 56 , icon , color , iconRef , shouldMirror , ... elemProps } = this . props ; return ( < Icon src = { icon } type = { CanvasIconTypes . Accent } styles = { accentIconStyles ( { color , transparent } ) } size = { size } iconRef = { iconRef } shouldMirror = { shouldMirror } { ... elemProps } />); } }