jsx import { CSSObject , jsx } from '@emotion/core' ; import React from 'react' ; import type { Theme } from '../Layout' ; export interface InternalSVGIconProps < T = SVGSVGElement > extends SVGIconProps < T > { realHeight : number ; realWidth : number ; } export interface SVGIconProps < T = SVGSVGElement > extends React . SVGProps < T > { color ? : string ; height ? : number ; scale ? : number ; shadow ? : boolean ; width ? : number ; } const svgIconStyle = ( theme , { color = theme . general . color } ) => ( { fill : color , overflow : 'visible' , } ) ; export const SVGIcon = ( { realWidth , realHeight , scale = 1 , width = null , height = null , shadow , children , ... props } ) => { let newScale = scale ; if ( width || height ) { const widthScale = width ? width / realWidth : Infinity ; const heightScale = height ? height / realHeight : Infinity ; newScale = Math . min ( widthScale , heightScale ) ; } const newWidth = Math . ceil ( realWidth * newScale ) ; const newHeight = Math . ceil ( realHeight * newScale ) ; const shadowId = shadow && Math . random ( ) . toString ( ) ; return ( < svg css = { theme => svgIconStyle ( theme , props ) } viewBox = { `0 0 ${ realWidth } ${ realHeight }` } width = { newWidth } height = { newHeight } { ... props } > { shadow && ( < defs > < filter id = { shadowId } x = "-50%" y = "-50%" width = "200%" height = "200%" > < feOffset result = "offOut" in = "SourceAlpha" dx = "0" dy = "0" / > < feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = "2.5" / > < feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal" / > < /filter> < /defs>)} < g filter = { shadow && `url(#${ shadowId })` } > { children } < /g> < /svg>); } ;