You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.9 KiB
70 lines
1.9 KiB
<script lang="ts" context="module">
|
|
import generic_lamp from "./icons/generic_lamp.svg?raw";
|
|
import generic_boob from "./icons/generic_boob.svg?raw";
|
|
import generic_ball from "./icons/generic_ball.svg?raw";
|
|
import generic_strip from "./icons/generic_strip.svg?raw";
|
|
import hue_signe from "./icons/hue_signe.svg?raw";
|
|
import hue_dimmerswitch from "./icons/hue_dimmerswitch.svg?raw";
|
|
import hue_motionsensor from "./icons/hue_motionsensor.svg?raw";
|
|
import hue_lightbulb_e27 from "./icons/hue_lightbulb_e27.svg?raw";
|
|
import hue_lightbulb_e14 from "./icons/hue_lightbulb_e14.svg?raw";
|
|
import hue_lightbulb_gu10 from "./icons/hue_lightbulb_gu10.svg?raw";
|
|
import hue_adore_tube from "./icons/hue_adore_tube.svg?raw";
|
|
import hue_playbar from "./icons/hue_playbar.svg?raw";
|
|
|
|
export const iconMap = Object.seal({
|
|
generic_lamp,
|
|
generic_boob,
|
|
generic_ball,
|
|
generic_strip,
|
|
hue_signe,
|
|
hue_dimmerswitch,
|
|
hue_motionsensor,
|
|
hue_lightbulb_e27,
|
|
hue_lightbulb_e14,
|
|
hue_lightbulb_gu10,
|
|
hue_adore_tube,
|
|
hue_playbar,
|
|
});
|
|
|
|
export type IconName = keyof typeof iconMap;
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { ColorRGB } from "$lib/models/color";
|
|
import { rgbToHex } from "$lib/utils/color";
|
|
|
|
export let brightColor: ColorRGB;
|
|
export let darkColor: ColorRGB;
|
|
export let name: IconName;
|
|
|
|
let gandalf: string;
|
|
let voldemort: string;
|
|
$: gandalf = rgbToHex(brightColor);
|
|
$: voldemort = rgbToHex(darkColor);
|
|
|
|
let icon: string;
|
|
$: icon = iconMap[name];
|
|
|
|
let dataUrl: string;
|
|
$: {
|
|
const data = encodeURIComponent(
|
|
icon
|
|
.replaceAll("fill:#ff0000", `fill:${gandalf}`)
|
|
.replaceAll("fill:#0000ff", `fill:${voldemort}`)
|
|
);
|
|
dataUrl = `data:image/svg+xml;url,${data}`
|
|
}
|
|
</script>
|
|
|
|
<div class="icon">
|
|
<img alt="icon" src={dataUrl} />
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<style>
|
|
div.icon > img {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
</style>
|