v11

src/components/BaseLogo.vue

@@ -1,57 +1,72 @@
 <template>
-  <div 
-    class="flex row items-center no-wrap logo-component"
-    >
-    <img
-      src="src/assets/logo.svg"
-      style="height: 24px; max-width: 24px; padding-right: 2px;"
+  <div class="flex row items-center no-wrap logo-component">
+    <LogoIcon
+      v-bind="$attrs"
+      class="logo-svg" 
+      :class="{ 
+        'is-animated': animated, 
+        'hide-bg': !withBackground
+      }"
+      :style="{ color: iconColor }"
     />
 
-    <span
-      class="text-brand"
-      style="margin-right: 0.05em;"
-      >
-      tg
-    </span>
-
-    <span class="text-brand text-bold">
-      Crew
-    </span>
+    <div :class="'text-' + textColor" class="logo-text q-ml-xs">
+      <span>tg</span>
+      <span class="text-bold">Crew</span>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+  import LogoIcon from 'components/BaseLogoSvg.vue'
+  interface Props {
+    textColor?: string
+    iconColor?: string
+    withBackground?: boolean
+    animated?: boolean
+  }
+
+  withDefaults(defineProps<Props>(), {
+    textColor: 'brand',
+    iconColor: 'white',
+    withBackground: true,
+    animated: true
+  })
 </script>
 
 <style lang="scss" scoped>
-  .logo-component {
-    svg {
-      width: 1em;
-      height: 1em;
-      margin-right: 0.125em;
+  .logo-svg {
+    height: 24px;
+    width: 24px;
+
+    :deep(.logo-bg) {
+      transition: opacity 0.3s;
     }
 
-    span {
-      line-height: 1;
+    &.hide-bg :deep(.logo-bg) {
+      display: none;
+    }
+
+    :deep(.x), :deep(.c) { 
+      transform-box: fill-box; 
+    }
+    
+    &.is-animated {
+      :deep(.x) { animation: expand-r 6s ease-in-out infinite; }
+      :deep(.c) { animation: o 6s ease-in-out infinite; }
+      :deep(.l) {
+        stroke-dasharray: 1; 
+        stroke-dashoffset: 1;
+        stroke-width: 1.5;
+        animation: draw 6s ease-in-out infinite;
+      }
     }
   }
 
-  .fill-brand {
-    fill: $brand;
-  }
-
-  @keyframes blink {
-    100%,
-    0% {
-      fill: $brand2;
-    }
-    60% {
-      fill: $brand2;
-      opacity: 0.8;
-    }
-  }
-
-  #path5 {
-    animation: blink 3s infinite;
+  @keyframes expand-r { 50% { r: 8px; } }
+  @keyframes o { 50% { transform: var(--t); } }
+  @keyframes draw {
+    0%, 100% { stroke-dashoffset: 0; }
+    50% { stroke-dashoffset: 1; }
   }
 </style>