Finished integrating Shadow DOM icons, first steps towards dynamic theme

components/ui/Icon.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import 'iconify-icon'
 import type { IconifyRenderMode } from 'iconify-icon'
 import type { PropType } from 'vue'
 
@@ -8,6 +7,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  color: {
+    type: String,
+    default: 'white',
+  },
   mode: {
     type: String as PropType<IconifyRenderMode>,
     default: 'svg',
@@ -33,12 +36,11 @@ const props = defineProps({
     default: '',
   },
 })
-
-const icon = props.name?.split(':')?.[0] === 'local' ?
 </script>
 
 <template>
   <iconify-icon
+    class="icon"
     :icon="props.name"
     :mode="props.mode"
     :inline="props.inline"
@@ -49,4 +51,8 @@ const icon = props.name?.split(':')?.[0] === 'local' ?
   />
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.icon {
+  color: v-bind(color);
+}
+</style>