Files
flotilla/src/lib/components/Icon.svelte
2024-08-08 17:22:23 -07:00

70 lines
2.5 KiB
Svelte

<style>
div {
mask-repeat: none;
mask-size: 100% 100%;
}
</style>
<script lang="ts">
import cx from "classnames"
import {switcher} from "@welshman/lib"
import AddSquare from "@assets/icons/Add Square.svg?dataurl"
import AddCircle from "@assets/icons/Add Circle.svg?dataurl"
import AltArrowRight from "@assets/icons/Alt Arrow Right.svg?dataurl"
import AltArrowLeft from "@assets/icons/Alt Arrow Left.svg?dataurl"
import ClipboardText from "@assets/icons/Clipboard Text.svg?dataurl"
import CloseCircle from "@assets/icons/Close Circle.svg?dataurl"
import Copy from "@assets/icons/Copy.svg?dataurl"
import Compass from "@assets/icons/Compass.svg?dataurl"
import CompassBig from "@assets/icons/Compass Big.svg?dataurl"
import FireMinimalistic from "@assets/icons/Fire Minimalistic.svg?dataurl"
import GallerySend from "@assets/icons/Gallery Send.svg?dataurl"
import HandPills from "@assets/icons/Hand Pills.svg?dataurl"
import HomeSmile from "@assets/icons/Home Smile.svg?dataurl"
import InfoCircle from "@assets/icons/Info Circle.svg?dataurl"
import LinkRound from "@assets/icons/Link Round.svg?dataurl"
import Plain from "@assets/icons/Plain.svg?dataurl"
import RemoteControllerMinimalistic from "@assets/icons/Remote Controller Minimalistic.svg?dataurl"
import Settings from "@assets/icons/Settings.svg?dataurl"
import UFO3 from "@assets/icons/UFO 3.svg?dataurl"
import UserHeart from "@assets/icons/User Heart.svg?dataurl"
import WiFiRouterRound from "@assets/icons/Wi-Fi Router Round.svg?dataurl"
export let icon
export let size = 5
const px = size * 4
const data = switcher(icon, {
"add-square": AddSquare,
"add-circle": AddCircle,
"alt-arrow-right": AltArrowRight,
"alt-arrow-left": AltArrowLeft,
"clipboard-text": ClipboardText,
"close-circle": CloseCircle,
copy: Copy,
compass: Compass,
"compass-big": CompassBig,
"fire-minimalistic": FireMinimalistic,
"gallery-send": GallerySend,
"hand-pills": HandPills,
"home-smile": HomeSmile,
"info-circle": InfoCircle,
"link-round": LinkRound,
plain: Plain,
'remote-controller-minimalistic': RemoteControllerMinimalistic,
settings: Settings,
"ufo-3": UFO3,
"user-heart": UserHeart,
"wifi-router-round": WiFiRouterRound,
})
if (!data) {
throw new Error(`Invalid icon: ${icon}`)
}
</script>
<div
class={cx($$props.class, "bg-base-content")}
style="mask-image: url({data}); width: {px}px; height: {px}px; min-width: {px}px; min-height: {px}px;" />