mingnan-website/src/components/icons/IconMenu.vue

<template>
  <svg 
    :class="[
      'icon-menu',
      openState ? 'open' : '',
    ]"
    viewBox="0 0 1024 1024"
    width="30"
    height="30"
  >
    <path class="line1" d="M133.310936 296.552327l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949 0-19.781623-15.997312-35.950949-35.950949-35.950949L133.310936 224.650428c-19.781623 0-35.950949 16.169326-35.950949 35.950949C97.359987 280.383 113.529313 296.552327 133.310936 296.552327z" fill="currentColor"></path>
    <path class="line2" d="M890.51705 476.135058 133.310936 476.135058c-19.781623 0-35.950949 16.169326-35.950949 35.950949 0 19.781623 16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-16.169326 35.950949-35.950949C926.467999 492.304384 910.298673 476.135058 890.51705 476.135058z" fill="currentColor"></path>
    <path class="line3" d="M890.51705 727.447673 133.310936 727.447673c-19.781623 0-35.950949 15.997312-35.950949 35.950949s16.169326 35.950949 35.950949 35.950949l757.206115 0c19.781623 0 35.950949-15.997312 35.950949-35.950949S910.298673 727.447673 890.51705 727.447673z" fill="currentColor"></path>
  </svg>
</template>

<script setup lang="ts">
defineProps({	
  openState: Boolean	
})
</script>

<style lang="scss">
@use '@/assets/scss/colors.scss' as *;

.icon-menu {
  path {
    transition: all 0.3s;
  }
  &.open {
    color: $primary-color;
    .line1 {
      transform: rotate(45deg) translate(25%, -25%);
    }
    .line2 {
      opacity: 0;
    }
    .line3 {
      transform: rotate(-45deg) translate(-50%, 0%);
    }
  }
}

</style>