Icon component #

<template>
  <div class="flex justify-between">
    <HcIcon name="settings" />

    <HcIcon name="plus" />

    <HcIcon name="refresh" />

    <HcIcon name="share" />

    <HcIcon name="snack-bucket" />

    <HcIcon name="tag-plus" />

    <HcIcon
      name="calendar"
      class="text-overline"
      clickable
    />
  </div>
</template>

<script lang="ts" setup>
import { HcIcon } from '@deeepvision/hope-component-kit';
</script>

<template>
  <div class="pb-5 w-full">
    <div
      v-if="uikitIcons"
      class="grid auto-cols-auto grid-cols-4 gap-4"
    >
      <div
        v-for="[key] in Object.entries(uikitIcons)"
        :key="key"
        :title="key"
        class="rounded-md border border-gray flex flex-col items-center"
      >
        <div class="w-full h-20 flex items-center justify-center transparent-bg">
          <HcIcon
            :name="key"
            class="!w-10 !h-10 text-black"
          />
        </div>
        <div class="px-2 py-6 text-center text-body-3 my-0 mx-auto">
          {{ key }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { HcIcon } from '@deeepvision/hope-component-kit';
import uikitIcons from '@deeepvision/hope-component-kit/dist/assets/icons.json';

</script>