일러스트레이터에서 만든 SVG 사용하기

일러스트레이터

jakearchibald.github.io/svgomg/

 

위의 사이트에서 추출.

 

코드

<!-- App.vue -->

<template>
  
  <div class="w-40 h-24 grid grid-cols-7 gap-0.5 fill-current text-gray-900">
    
    <!-- c -->
    <svg class="w-full h-full overflow-visible" viewBox="0 0 20 100" preserveAspectRatio="none">

      <path 
      
        d           ="M13 58V0H0v98c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V60h-5c-1.1 0-2-.9-2-2z"
        :class      ="state.className"
        @mousedown  ="mouseDown"
        
      
      />

    </svg>

    <!-- d -->
    <svg class="w-full h-full" viewBox="0 0 20 100" preserveAspectRatio="none">
      <path d="M13 58V0H7v58c0 1.1-.9 2-2 2H0v38c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V60h-5c-1.1 0-2-.9-2-2z"/>
    </svg>

    <!-- e -->
    <svg class="w-full h-full" viewBox="0 0 20 100" preserveAspectRatio="none">
      <path d="M7 0v58c0 1.1-.9 2-2 2H0v38c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V0H7z"/>
    </svg>  

    <!-- f -->
    <svg class="w-full h-full" viewBox="0 0 20 100" preserveAspectRatio="none">
      <path d="M13 58V0H0v98c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V60h-5c-1.1 0-2-.9-2-2z"/>
    </svg>

    <!-- g -->
    <svg class="w-full h-full" viewBox="0 0 20 100" preserveAspectRatio="none">
      <path d="M13 58V0H7v58c0 1.1-.9 2-2 2H0v38c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V60h-5c-1.1 0-2-.9-2-2z"/>
    </svg>
    
    <!-- a -->
    <svg class="w-full h-full" viewBox="0 0 20 100" preserveAspectRatio="none">
      <path d="M13 58V0H7v58c0 1.1-.9 2-2 2H0v38c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V60h-5c-1.1 0-2-.9-2-2z"/>
    </svg>

    <!-- b -->
    <svg class="w-full h-full" viewBox="0 0 20 100" preserveAspectRatio="none">
      <path d="M7 0v58c0 1.1-.9 2-2 2H0v38c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V0H7z"/>
    </svg>  
      
  </div>

</template>

<script>

  import { reactive } from 'vue'
  import 'animate.css'

  export default {

    setup() {

      const state = reactive({ className : ''})

      function mouseDown() { 

        const className = 'animate__animated animate__shakeY'

        state.className = null

        setTimeout(() => state.className = className, 0)
        
      }

      return { state, mouseDown }

    }
    
  }

</script>