Icons ​

<template>
  <div class="flex flex-wrap gap-4 my-10">
    <div v-for="name in iconNames" class="bg-gray-200 dark:bg-gray-700 shadow-sm p-2 flex flex-center flex-col gap-2">
      <ZvIcon :name="name" size="large" />
      <span class="text-xs font-semibold">{{ name }} </span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import ZvIcon from '@zadigetvoltaire/ui/components/ZvIcon'

  const iconNames = [
    'ar',
    'back',
    'burger-menu',
    'cart',
    'chat',
    'check-round',
    'chevron-left',
    'chevron-right',
    'chevron-up-lighter',
    'chevron-up',
    'circle-danger',
    'circle-success',
    'close',
    'cross',
    'danger',
    'eye-close',
    'eye-open',
    'favorite',
    'geolocate',
    'gift',
    'hanger',
    'home',
    'info',
    'lock',
    'logo-small',
    'marker-outline',
    'marker',
    'my-account-wishlist',
    'my-account',
    'payment-3-times',
    'payment-amex',
    'payment-applepay',
    'payment-bancontact',
    'payment-cb',
    'payment-giftcard',
    'payment-ideal',
    'payment-jcb',
    'payment-klarna',
    'payment-mastercard',
    'payment-paypal',
    'payment-sofort',
    'payment-visa',
    'pickup-point',
    'return',
    'search',
    'submit',
    'truck',
    'zv-marker',
    'zv-store',
  ]
</script>