36 lines
1.6 KiB
Vue
36 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
size?: string | number;
|
|
color?: boolean;
|
|
avatar?: boolean;
|
|
}>();
|
|
|
|
const TITLE = 'ClosedRouter';
|
|
const BACKGROUND_COLOR = "#050816";
|
|
const AVATAR_SCALE = 0.7;
|
|
</script>
|
|
|
|
<template>
|
|
<div class="inline-flex items-center justify-center"
|
|
:style="[`width: ${size}px; height: ${size}px;`, avatar ? `background: ${BACKGROUND_COLOR}; border-radius: 0.375rem;` : '']">
|
|
<svg :style="[`width: ${size}px; height: ${size}px; flex: none; line-height: 1;`, avatar ? `transform: scale(${AVATAR_SCALE});` : '']"
|
|
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<title>{{ TITLE }}</title>
|
|
|
|
<g transform="translate(-10.909 -10)" stroke-width="2.1818">
|
|
<path
|
|
d="m16.364 14.364v6.5455c0 2.41 1.9537 4.3636 4.3636 4.3636h4.3636c2.41 0 4.3636 1.9537 4.3636 4.3636v0"
|
|
:stroke="color ? '#00e87a' : 'currentColor'" stroke-linecap="round" stroke-linejoin="round" />
|
|
|
|
<g :fill="BACKGROUND_COLOR">
|
|
<circle cx="16.364" cy="14.364" r="3.2727" :stroke="color ? '#00e87a' : 'currentColor'" />
|
|
<circle cx="29.455" cy="29.636" r="3.2727" :stroke="color ? '#00e87a' : 'currentColor'" />
|
|
<circle cx="29.455" cy="14.364" r="3.2727" :stroke="color ? '#7aa2ff' : 'currentColor'" />
|
|
</g>
|
|
|
|
<path d="m20.727 14.364h5.4545" :stroke="color ? '#7aa2ff' : 'currentColor'" stroke-linecap="round" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</template>
|