43 lines
2.8 KiB
Vue
43 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
size?: string | number;
|
|
color?: boolean;
|
|
avatar?: boolean;
|
|
}>();
|
|
|
|
const TITLE = 'Essential AI';
|
|
|
|
const BACKGROUND_COLOR = "linear-gradient(135deg, #5E38A5, #31018C 63%)";
|
|
const AVATAR_SCALE = 0.7;
|
|
|
|
const [fill] = useFillIds(TITLE, 1);
|
|
</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 v-if="color && !avatar"
|
|
:style="[`width: ${size}px; height: ${size}px; flex: none; line-height: 1;`, avatar ? `transform: scale(${AVATAR_SCALE});` : '']"
|
|
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<title>{{ TITLE }}</title>
|
|
<path
|
|
d="M3.429 10.75c0 2.32.903 4.546 2.51 6.187A8.484 8.484 0 0012 19.5a8.484 8.484 0 006.06-2.563 8.843 8.843 0 002.511-6.187H24c0 3.249-1.264 6.365-3.515 8.662A11.877 11.877 0 0112 23c-3.183 0-6.235-1.29-8.485-3.588A12.38 12.38 0 010 10.75h3.429zm13.714 0a5.306 5.306 0 01-1.507 3.712A5.09 5.09 0 0112 16a5.09 5.09 0 01-3.637-1.538 5.306 5.306 0 01-1.506-3.712h10.286zM12 2c2.273 0 4.453.922 6.06 2.563a8.843 8.843 0 012.511 6.187h-3.428a5.306 5.306 0 00-1.507-3.712A5.09 5.09 0 0012 5.5a5.09 5.09 0 00-3.637 1.538 5.306 5.306 0 00-1.506 3.712H3.43c0-2.32.903-4.546 2.51-6.187A8.484 8.484 0 0112 2z"
|
|
:fill="fill!.fill" />
|
|
<defs>
|
|
<radialGradient cx="0" cy="0" gradientTransform="matrix(21.6991 27.0254 -47.9838 40.1491 2.3 -4.025)"
|
|
gradientUnits="userSpaceOnUse" :id="fill!.id" r="1">
|
|
<stop stop-color="#6A46AC" />
|
|
<stop offset=".63" stop-color="#31008C" />
|
|
</radialGradient>
|
|
</defs>
|
|
</svg>
|
|
<svg v-else fill="currentColor" fill-rule="evenodd" :height="size" style="flex: none; line-height: 1;"
|
|
:style="[`width: ${size}px; height: ${size}px; flex: none; line-height: 1;`, avatar ? `transform: scale(${AVATAR_SCALE});` : '']"
|
|
viewBox="0 0 24 24" :width="size" xmlns="http://www.w3.org/2000/svg">
|
|
<title>{{ TITLE }}</title>
|
|
<path
|
|
d="M3.429 10.75c0 2.32.903 4.546 2.51 6.187A8.484 8.484 0 0012 19.5a8.484 8.484 0 006.06-2.563 8.843 8.843 0 002.511-6.187H24c0 3.249-1.264 6.365-3.515 8.662A11.877 11.877 0 0112 23c-3.183 0-6.235-1.29-8.485-3.588A12.38 12.38 0 010 10.75h3.429zm13.714 0a5.306 5.306 0 01-1.507 3.712A5.09 5.09 0 0112 16a5.09 5.09 0 01-3.637-1.538 5.306 5.306 0 01-1.506-3.712h10.286zM12 2c2.273 0 4.453.922 6.06 2.563a8.843 8.843 0 012.511 6.187h-3.428a5.306 5.306 0 00-1.507-3.712A5.09 5.09 0 0012 5.5a5.09 5.09 0 00-3.637 1.538 5.306 5.306 0 00-1.506 3.712H3.43c0-2.32.903-4.546 2.51-6.187A8.484 8.484 0 0112 2z" />
|
|
</svg>
|
|
</div>
|
|
</template>
|