davide
abeabb3a44
The marks come from the simple-icons package (CC0) and are inlined at build time — the earlier hand-drawn glyphs were wrong, the X mark in particular is not a plain cross. Importing the three SVGs individually rather than the package index keeps the other icons out of the bundle: 10 kB, not 5 MB. Rendered monochrome in the surrounding text colour, with the text label kept next to each one.
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>
|