39 lines
966 B
Vue
39 lines
966 B
Vue
|
<script setup lang="ts">
|
||
|
|
// The official brand marks, inlined at build time from the simple-icons
|
||
|
|
// package (CC0) rather than redrawn here. Importing the three files directly
|
||
|
|
// keeps the other ~3000 icons out of the bundle.
|
||
|
|
import facebookMark from 'simple-icons/icons/facebook.svg?raw'
|
||
|
|
import instagramMark from 'simple-icons/icons/instagram.svg?raw'
|
||
|
|
import xMark from 'simple-icons/icons/x.svg?raw'
|
||
|
|
|
||
|
|
const MARKS = {
|
||
|
|
X: xMark,
|
||
|
|
Instagram: instagramMark,
|
||
|
|
Facebook: facebookMark,
|
||
|
|
} as const
|
||
|
|
|
||
|
|
const props = defineProps<{ name: keyof typeof MARKS }>()
|
||
|
|
|
||
|
|
const mark = computed(() => MARKS[props.name])
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<!-- eslint-disable-next-line vue/no-v-html -- build-time asset, not user input -->
|
||
|
|
<span class="icon" aria-hidden="true" v-html="mark" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.icon {
|
||
|
|
flex: none;
|
||
|
|
display: inline-flex;
|
||
|
|
width: 0.95rem;
|
||
|
|
height: 0.95rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon :deep(svg) {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
fill: currentColor;
|
||
|
|
}
|
||
|
|
</style>
|