puffpastry-frontend/src/components/icons/ThumbsUp.vue

<template>
  <div class="h-4 w-4 cursor-pointer mx-2">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="like-button" x="0px" y="0px"
         viewBox="0 0 30 30" style="fill:#ffffff" xml:space="preserve">
              <g id="Thumbs_Up">
                <path d="M30,18.476c0-0.774-0.327-1.493-0.884-1.999c0.613-0.657,0.957-1.626,0.871-2.563C29.842,12.334,28.395,11,26.828,11
                  h-7.957c0.379-1.078,1.042-3.223,1.042-5c0-2.48-2.087-5-3.587-5c-1.295,0-2.143,0.828-2.179,0.863C14.053,1.957,14,2.085,14,2.218
                  v4.478l-3.643,7.938L10,14.815V14.5c0-1.379-1.121-2.5-2.5-2.5h-5C1.121,12,0,13.121,0,14.5v13C0,28.879,1.121,30,2.5,30h4.305
                  c1.316,0,2.438-0.847,2.853-2.023C10.668,28.58,12.159,29,13.108,29h11.453c1.014,0,1.957-0.496,2.463-1.296
                  c0.637-1.008,0.548-2.112,0.1-2.924c0.959-0.425,1.615-1.39,1.615-2.498c0-0.471-0.123-0.931-0.35-1.335
                  C29.347,20.524,30,19.569,30,18.476z"/>
              </g>
            </svg>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
#like-button:hover {
  fill: #f6ed40 !important;
}
</style>