55 lines
1 KiB
Vue
55 lines
1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
|
|
import brandLogo from "@/logo.png";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
size?: "sm" | "md" | "lg" | "xl";
|
|
}>(),
|
|
{
|
|
size: "md",
|
|
},
|
|
);
|
|
|
|
const sizeClass = computed(() => {
|
|
if (props.size === "sm") {
|
|
return "h-5 w-5";
|
|
}
|
|
if (props.size === "lg") {
|
|
return "h-8 w-8";
|
|
}
|
|
if (props.size === "xl") {
|
|
return "h-12 w-12";
|
|
}
|
|
return "h-6 w-6";
|
|
});
|
|
|
|
const logoMaskStyle: Record<string, string> = {
|
|
"--brand-logo-mask": `url(${brandLogo})`,
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
:class="['brand-logo-mark', sizeClass]"
|
|
:style="logoMaskStyle"
|
|
aria-hidden="true"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.brand-logo-mark {
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
background-color: rgb(var(--color-brand-700));
|
|
-webkit-mask-image: var(--brand-logo-mask);
|
|
mask-image: var(--brand-logo-mask);
|
|
-webkit-mask-position: center;
|
|
mask-position: center;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: contain;
|
|
mask-size: contain;
|
|
}
|
|
</style>
|