59 lines
2.9 KiB
Vue
59 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { useFillIds } from '~/composables/useFillIds';
|
|
|
|
defineProps<{
|
|
size?: string | number;
|
|
color?: boolean;
|
|
avatar?: boolean;
|
|
}>();
|
|
|
|
const TITLE = 'Gemini';
|
|
|
|
const [a, b, c] = useFillIds(TITLE, 3);
|
|
|
|
const BACKGROUND_COLOR = "#fff";
|
|
|
|
const d = "M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z";
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:style="[`max-width: ${size}px; max-height: ${size}px;`, avatar ? `background-color: ${BACKGROUND_COLOR}; border-radius: 9999px; padding: 0.25rem;` : '']">
|
|
<svg v-if="color" class="w-full h-full" style="flex: none; line-height: 1;" viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<title>{{ TITLE }}</title>
|
|
|
|
<!-- Base Layer -->
|
|
<path :d="d" fill="#3186FF" />
|
|
|
|
<!-- Gradient Layers -->
|
|
<path :d="d" :fill="a!.fill" />
|
|
<path :d="d" :fill="b!.fill" />
|
|
<path :d="d" :fill="c!.fill" />
|
|
|
|
<defs>
|
|
<linearGradient gradientUnits="userSpaceOnUse" :id="a!.id" x1="7" x2="11" y1="15.5" y2="12">
|
|
<stop stop-color="#08B962" />
|
|
<stop offset="1" stop-color="#08B962" stop-opacity="0" />
|
|
</linearGradient>
|
|
|
|
<linearGradient gradientUnits="userSpaceOnUse" :id="b!.id" x1="8" x2="11.5" y1="5.5" y2="11">
|
|
<stop stop-color="#F94543" />
|
|
<stop offset="1" stop-color="#F94543" stop-opacity="0" />
|
|
</linearGradient>
|
|
|
|
<linearGradient gradientUnits="userSpaceOnUse" :id="c!.id" x1="3.5" x2="17.5" y1="13.5" y2="12">
|
|
<stop stop-color="#FABC12" />
|
|
<stop offset=".46" stop-color="#FABC12" stop-opacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
<svg v-else fill="currentColor" fillRule="evenodd" :height="size" style="flex: none; line-height: 1;"
|
|
viewBox="0 0 24 24" :width="size" xmlns="http://www.w3.org/2000/svg">
|
|
<title>{{ TITLE }}</title>
|
|
<path
|
|
d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" />
|
|
</svg>
|
|
</div>
|
|
</template>
|