<script lang="ts">
// https://icon-sets.iconify.design
</script>

<template>
  <div b="1px solid pink" mt-8 text-16 p-8 space-y-8>
    <!-- <div b="1px solid pink">
      <div>@iconify-json/carbon/icons.json</div>
      <div i-carbon-face-cool text-orange />
    </div> -->

    <div b="1px solid pink">
      <div>Icons({ autoInstall: true })</div>
      <icon-carbon-face-cool class="text-yellow" w-32 h-32 />
    </div>

    <!-- <div b="1px solid pink">
      <div>pacman.svg</div>
      <div class="icon:pacman text-(pink)" />
    </div> -->

    <div b="1px solid pink">
      <div>pacman.svg</div>
      <icon-svg:pacman text-blue w-48 h-48 />
      <some-icon text-cyan w-48 h-48 />
    </div>
  </div>
</template>

<script setup lang="ts">
import SomeIcon from '~icons/svg/pacman';
</script>
