import React, {Component} from "react"; type IconProps = { width: number, height: number, } class Icon extends Component <IconProps> { private readonly width: string; private readonly height: string; constructor(props) { super(props); this.width = "w-" + this.props.width.toString(); this.height = "h-" + this.props.width.toString(); } dimensionsClassName() { return (this.height + " " + this.width) } } export class DollarIcon extends Icon { render() { return ( <svg className={this.dimensionsClassName()} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg> ) } } export class ClockIcon extends Icon { render() { return ( <svg className={this.dimensionsClassName()} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg> ) } }