30 lines
1.7 KiB
Vue
30 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { useId } from "vue";
|
|
|
|
withDefaults(defineProps<{
|
|
size?: string | number;
|
|
color?: boolean;
|
|
avatar?: boolean;
|
|
}>(), {
|
|
size: 24,
|
|
});
|
|
|
|
const titleId = useId();
|
|
const BACKGROUND_COLOR = "#a3e6d9";
|
|
const AVATAR_SCALE = 0.7;
|
|
</script>
|
|
|
|
<template>
|
|
<div class="inline-flex items-center justify-center"
|
|
:style="{ width: `${size}px`, height: `${size}px`, backgroundColor: avatar ? BACKGROUND_COLOR : undefined, borderRadius: avatar ? '0.375rem' : undefined }">
|
|
<!-- Artwork from https://github.com/lobehub/lobe-icons/pull/396 (MIT; see LICENSE). -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size"
|
|
viewBox="0 0 24 24" :fill="avatar ? '#000' : 'currentColor'" fill-rule="evenodd"
|
|
role="img" :aria-labelledby="titleId" style="flex: none; line-height: 1;"
|
|
:style="{ transform: avatar ? `scale(${AVATAR_SCALE})` : undefined }">
|
|
<title :id="titleId">Dots Studio</title>
|
|
<path d="M8.429 23.18a67 67 0 0 1-.423-2.074c0-.024 2.298-.042 5.106-.042 4.836 0 5.104.005 5.077.098a19 19 0 0 0-.148.714c-.066.34-.158.787-.204.996l-.084.378h-4.651c-3.671 0-4.656-.015-4.673-.07m1.89-6.37-6.351-1.1-.054-.195c-.05-.177-.025-.247.286-.836 1.975-3.727 5.2-7.438 8.824-10.153 1.898-1.422 4.002-2.647 6.013-3.502.733-.311.744-.314.897-.218l.17.106c.01.005-.728 3.81-1.64 8.457-.91 4.645-1.655 8.47-1.655 8.5s-.032.052-.07.048-2.928-.502-6.42-1.107m4.799-1.675c.293-1.376 2.09-10.679 2.067-10.701-.017-.017-.354.172-.75.418-2.186 1.362-3.772 2.637-5.599 4.501a27.4 27.4 0 0 0-3.302 4.03c-.367.545-.419.648-.331.668.25.056 7.628 1.337 7.737 1.343.101.006.13-.037.178-.26z"></path>
|
|
</svg>
|
|
</div>
|
|
</template>
|