import React , { forwardRef , Ref } from 'react' ; import cx from 'classnames' ; import { makeStyles } from '@material-ui/core/styles' ; import { StandardProps } from '@toptal/picasso-shared' ; import kebabToCamelCase from '../utils/kebab-to-camel-case' ; import styles from './styles' ; const BASE_SIZE = 16 ; type ScaleType = 1 | 2 | 3 | 4 ; export interface Props extends StandardProps { scale ? : ScaleType ; color ? : string ; base ? : number ; } const useStyles = makeStyles ( styles , { name : 'PicassoSvgArrowUpMinor16' } ) ; const SvgArrowUpMinor16 = forwardRef ( function SvgArrowUpMinor16 ( props , ref ) { const { className , style = { } , color , scale , base , 'data-testid' : testId } = props ; const classes = useStyles ( props ) ; const classNames = [ classes . root , className ] ; const scaledSize = base || BASE_SIZE * Math . ceil ( scale || 1 ) ; const colorClassName = kebabToCamelCase ( `${ color }` ) ; if ( classes [ colorClassName ] ) { classNames . push ( classes [ colorClassName ] ) ; } const svgStyle = { minWidth : `${ scaledSize }px` , minHeight : `${ scaledSize }px` , ... style } ; return ( < svg viewBox = '0 0 16 16' className = { cx ( ... classNames ) } style = { svgStyle } ref = { ref } data - testid = { testId } > < path d = 'M7.997 5.29l4.707 4.707-.707.707-4-4-4 4-.707-.707 4-4 .707-.707z' / > < /svg>); } ) ; SvgArrowUpMinor16 . displayName = 'SvgArrowUpMinor16' ; export default SvgArrowUpMinor16 ;