54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { withBase } from 'vuepress/client'
|
|
import { isLinkHttp } from 'vuepress/shared'
|
|
|
|
const { type, name, color, size } = defineProps<{
|
|
type: 'link' | 'svg'
|
|
name: string | { svg: string }
|
|
color?: string
|
|
size?: { width?: string, height?: string }
|
|
}>()
|
|
|
|
const svg = computed(() => {
|
|
if (type === 'svg' && typeof name === 'object' && 'svg' in name) {
|
|
return name.svg
|
|
}
|
|
return ''
|
|
})
|
|
const link = computed(() => {
|
|
if (type === 'link') {
|
|
const link = name as string
|
|
return isLinkHttp(link) ? link : withBase(link)
|
|
}
|
|
return ''
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<span v-if="type === 'link'" class="vp-icon-img" aria-hidden>
|
|
<img :src="link" alt="" :style="{ height: size?.height }">
|
|
</span>
|
|
<span
|
|
v-else-if="type === 'svg'"
|
|
class="vp-icon"
|
|
:style="{ color, ...size }"
|
|
aria-hidden
|
|
v-html="svg"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.vp-icon-img {
|
|
display: inline-block;
|
|
width: max-content;
|
|
height: 1em;
|
|
margin: 0 0.3em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.vp-icon-img img {
|
|
height: 100%;
|
|
}
|
|
</style>
|