Move over to iconify-icon, wrap around

components/ui/Dialog.vue

@@ -1,76 +0,0 @@
-<script setup>
-const props = defineProps({
-  icon: {
-    type: String,
-    default: '',
-  },
-  alt: {
-    type: String,
-    default: 'Icon',
-  },
-})
-
-const theme = ref(false)
-const animation = ref(true)
-</script>
-
-<template>
-  <p>FALSE</p>
-  <!--  <QDialog ref="dialogRef" @hide="onDialogHide">-->
-  <!--    <QCard class="dialog">-->
-  <!--      <div class="overlay background"></div>-->
-  <!--      <div class="overlay content">-->
-  <!--        <img-->
-  <!--          class="icon-badge user-select-none"-->
-  <!--          draggable="false"-->
-  <!--          :src="props.icon"-->
-  <!--          :alt="props.alt"-->
-  <!--        />-->
-  <!--        <QCardSection>-->
-  <!--          <h3 class="alex text-align-center">Site options</h3>-->
-  <!--          <div class="row">-->
-  <!--            <div class="col-12 col-sm-6">-->
-  <!--              <p>-->
-  <!--                <strong>Theme</strong><br />-->
-  <!--                Available in all flavors, vanilla and chocolate.-->
-  <!--              </p>-->
-  <!--              <QToggle-->
-  <!--                v-model="theme"-->
-  <!--                class="px-5"-->
-  <!--                color="black"-->
-  <!--                dense-->
-  <!--                size="xl"-->
-  <!--                :unchecked-icon="mdiWhiteBalanceSunny"-->
-  <!--                :checked-icon="mdiWeatherNight"-->
-  <!--                icon-color="primary"-->
-  <!--                @change="theme = !theme"-->
-  <!--              />-->
-  <!--              <QCheckbox v-model="theme" />-->
-  <!--            </div>-->
-  <!--            <div class="col-12 col-sm-6">-->
-  <!--              <p>-->
-  <!--                <strong>Animation</strong><br />-->
-  <!--                Some computers may have issues rendering that gorgeous-->
-  <!--                background animation. Enabling it substantially increases power-->
-  <!--                consumption.-->
-  <!--              </p>-->
-  <!--              <QToggle-->
-  <!--                v-model="animation"-->
-  <!--                color="purple"-->
-  <!--                dense-->
-  <!--                size="xl"-->
-  <!--                :unchecked-icon="mdiStop"-->
-  <!--                :checked-icon="mdiPlay"-->
-  <!--                @change="theme = !theme"-->
-  <!--              />-->
-  <!--            </div>-->
-  <!--          </div>-->
-  <!--          Report a bug-->
-  <!--          <QCardActions>-->
-  <!--            <QBtn label="OK" @click="onDialogOK" />-->
-  <!--          </QCardActions>-->
-  <!--        </QCardSection>-->
-  <!--      </div>-->
-  <!--    </QCard>-->
-  <!--  </QDialog>-->
-</template>

components/ui/XIcon.vue

@@ -1,20 +1,52 @@
 <script setup lang="ts">
+import 'iconify-icon'
+import type { IconifyRenderMode } from 'iconify-icon'
+import type { PropType } from 'vue'
+
 const props = defineProps({
   name: {
     type: String,
     required: true,
   },
-  size: {
-    type: String,
-    default: 'md',
+  mode: {
+    type: String as PropType<IconifyRenderMode>,
+    default: 'svg',
   },
-  color: {
+  inline: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
     type: String,
-    default: 'currentColor',
+    default: '1em',
+  },
+  height: {
+    type: String,
+    default: '1em',
+  },
+  flip: {
+    type: String,
+    default: '',
+  },
+  rotate: {
+    type: [String, Number],
+    default: '',
   },
 })
+
+const icon = props.name?.split(':')?.[0] === 'local' ?
 </script>
 
-<template></template>
+<template>
+  <iconify-icon
+    :icon="props.name"
+    :mode="props.mode"
+    :inline="props.inline"
+    :width="props.width"
+    :height="props.height"
+    :flip="props.flip"
+    :rotate="props.rotate"
+  />
+</template>
 
 <style scoped lang="scss"></style>