57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import { h, Rung, RungOptions } from "@djledda/ladder";
|
|
import "./Icon.css";
|
|
|
|
import List from "assets/svgs/list.svg";
|
|
import ArrowClockwise from "assets/svgs/arrow-clockwise.svg";
|
|
import Trash from "assets/svgs/trash.svg";
|
|
import Snowflake from "assets/svgs/snowflake.svg";
|
|
import LeftHand from "assets/svgs/LH.png";
|
|
import RightHand from "assets/svgs/RH.png";
|
|
import LeftFoot from "assets/svgs/LF.png";
|
|
import RightFoot from "assets/svgs/RF.png";
|
|
|
|
const IconUrlMap = {
|
|
arrowClockwise: ArrowClockwise,
|
|
list: List,
|
|
trash: Trash,
|
|
snowflake: Snowflake,
|
|
lh: LeftHand,
|
|
rh: RightHand,
|
|
lf: LeftFoot,
|
|
rf: RightFoot,
|
|
} as const;
|
|
|
|
export type IconName = keyof typeof IconUrlMap;
|
|
|
|
export type IconViewOptions = RungOptions & {
|
|
iconName: IconName,
|
|
color?: string,
|
|
};
|
|
|
|
export default class IconView extends Rung<HTMLDivElement> {
|
|
private iconUrl: string;
|
|
private color: string | null;
|
|
|
|
constructor(options: IconViewOptions) {
|
|
super(options);
|
|
this.color = options.color ?? null;
|
|
this.iconUrl = IconUrlMap[options.iconName];
|
|
}
|
|
|
|
setIcon(name: IconName) {
|
|
this.iconUrl = IconUrlMap[name];
|
|
this.render().style.cssText = this.cssText();
|
|
}
|
|
|
|
cssText() {
|
|
const colorString = this.color ? `--icon-bg:${this.color}` : "";
|
|
return `-webkit-mask-image: url(${this.iconUrl}); mask-image: url(${this.iconUrl});${colorString ?? ''}`;
|
|
}
|
|
|
|
build() {
|
|
const icon = <div className={"icon-view"} /> as HTMLDivElement;
|
|
icon.style.cssText = this.cssText();
|
|
return icon;
|
|
}
|
|
}
|