PLIcon - React svg icon component helper

PLIcon.tsx

import * as React from 'react'
import { MouseEvent, CSSProperties } from 'react'
import styled from 'styled-components'

export interface IPLIconProps {
  size?: number
  color?: string
  hoverColor?: string
  opacity?: number
  style?: CSSProperties
  onClick?: (e: MouseEvent<SVGSVGElement>) => void
}

export type PLIconEntity = (elementProps: IPLIconProps) => JSX.Element
export type PLIconCreator = (props: IPLIconProps) => PLIconEntity

export const PLIcon = {
  from(width: number, height: number, d: string): PLIconCreator {
    return props => (elementProps: IPLIconProps) => {
      const StyledSvg = styled.svg`
        ${props.hoverColor ? `
          &:hover {
            path {
              fill: ${props.hoverColor};
            }
          }
        ` : ''}
      `
      return (
        <StyledSvg
          onClick={e => (elementProps.onClick && elementProps.onClick(e)) || (props.onClick && props.onClick(e))}
          style={elementProps.style || props.style || {}}
          viewBox={`0 0 ${width} ${height}`}
          width={(elementProps.size || props.size || 12) * width / 12}
          height={(elementProps.size || props.size || 12) * height / 12}>
          <path
            d={d}
            fill={elementProps.color || props.color}
            fillRule="evenodd"
            opacity={elementProps.opacity || props.opacity}
          />
        </StyledSvg>
      )
    }
  }
}