added icons class to handle svg elements
This commit is contained in:
parent
565af21955
commit
fd54ae2ca2
50
websrc/components/Icons.tsx
Normal file
50
websrc/components/Icons.tsx
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user