📌Svg Icons

Icon-ებთან დაკავშირებით გვაქვს შემდეგი კონვენციები

• svg icon-ები უნდა იყოს vue-ს კომპონენტების სახით.

• უნდა იყოს მოთავსებული src/components/icons დირექტორიაში (შიგნით სურვილის შემთხვევაში შეგვიძლია ფოლდერებშიც დავაჯგუფოთ)

• სახელის უნდა ჰქონდეს Icon პრექფიქსი. სწორი სახელია IconPhone, IconLocation და ა.შ

კომპონენტის მაგალითი:

// src/components/icons/IconPhone.vue

<template>
  <svg
    width="24px"
    height="24px"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    fill="black"
  >
    <rect x="0" fill="none" width="24" height="24" />
    <g>
      <path
        d="M16 2H8c-1.104 0-2 .896-2 2v16c0 1.104.896 2 2 2h8c1.104 0 2-.896 2-2V4c0-1.104-.896-2-2-2zm-3 19h-2v-1h2v1zm3-2H8V5h8v14z"
      />
    </g>
  </svg>
</template>

გამოყენება:

// src/components/some-component.vue

<template>
  <div class="flex max-w-md flex-col">
    <icon-phone class="h-6 w-6"/>
    <span>[phone]</span>
  </div>
</template>

<script lang="ts" setup>
import IconPhone from "@/components/icons/IconPhone.vue";
</script>