icons

src/assets/icons/svgs/pacman.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="currentColor"><path d="M14.064 8a1 1 0 1 0 0-2a1 1 0 0 0 0 2Z"/><path fill-rule="evenodd" d="M13 3c2.152 0 4.128.756 5.677 2.016l1.447 1.447l-1.295 1.295h-.001L14.585 12l3.639 3.638l-.002.002l1.905 1.904l-1.413 1.413l-.002-.002A9 9 0 1 1 13 3Zm-1.243 9l5.532 5.532a7 7 0 1 1 0-11.065L11.757 12Z" clip-rule="evenodd"/></g></svg>

src/components/Icons.vue

@@ -0,0 +1,29 @@
+<template>
+  <div b="1px solid pink" mt-8 text-24 p-8 space-y-8>
+    <!-- https://icon-sets.iconify.design -->
+
+    <div b="1px solid pink" text-24>
+      <div>@iconify-json/carbon/icons.json</div>
+      <div i-carbon-face-cool text-orange />
+    </div>
+
+    <div b="1px solid pink" text-24>
+      <div>Icons({ autoInstall: true })</div>
+      <i-carbon-face-cool class="text-yellow" w-32 h-32 />
+    </div>
+
+    <div b="1px solid pink" text-24>
+      <div>pacman.svg</div>
+      <div class="i-icon:pacman text-(pink)" />
+    </div>
+
+    <div b="1px solid pink" text-24>
+      <div>pacman.svg</div>
+      <i-svg-pacman text-blue w-48 h-48 />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+//
+</script>

src/main.ts

@@ -19,7 +19,7 @@ async function init() {
           transparency: 0.9,
         },
       });
-      eruda.show();
+      // eruda.show();
     });
   }
 

src/pages/index-page.vue

@@ -46,4 +46,5 @@ const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
   <div b="1px solid pink" mt-8>
     <DefineRender />
   </div>
+  <Icons />
 </template>