Finished integrating Shadow DOM icons, first steps towards dynamic theme

2024-01-28 21:22:05 +03:00
parent 014e64d174
commit cfbaf56159
15 changed files with 318 additions and 123 deletions
@@ -0,0 +1,67 @@
+import 'iconify-icon'
+import type { IconAliases, IconSet } from 'vuetify'
+
+const aliases = <IconAliases>{
+  /* custom ones */
+  email: 'mdi:email',
+  /* vuetify aliases */
+  collapse: 'mdi:chevron-up',
+  complete: 'mdi:check',
+  cancel: 'mdi:close-circle',
+  close: 'mdi:close',
+  delete: 'mdi:close-circle',
+  // delete (e.g. v-chip close)
+  clear: 'mdi:close-circle',
+  success: 'mdi:check-circle',
+  info: 'mdi:information',
+  warning: 'mdi:alert-circle',
+  error: 'mdi:close-circle',
+  prev: 'mdi:chevron-left',
+  next: 'mdi:chevron-right',
+  checkboxOn: 'mdi:checkbox-marked',
+  checkboxOff: 'mdi:checkbox-blank-outline',
+  checkboxIndeterminate: 'mdi:minus-box',
+  delimiter: 'mdi:circle',
+  // for carousel
+  sortAsc: 'mdi:arrow-up',
+  sortDesc: 'mdi:arrow-down',
+  expand: 'mdi:chevron-down',
+  menu: 'mdi:menu',
+  subgroup: 'mdi:menu-down',
+  dropdown: 'mdi:menu-down',
+  radioOn: 'mdi:radiobox-marked',
+  radioOff: 'mdi:radiobox-blank',
+  edit: 'mdi:pencil',
+  ratingEmpty: 'mdi:star-outline',
+  ratingFull: 'mdi:star',
+  ratingHalf: 'mdi:star-half-full',
+  loading: 'mdi:cached',
+  first: 'mdi:page-first',
+  last: 'mdi:page-last',
+  unfold: 'mdi:unfold-more-horizontal',
+  file: 'mdi:paperclip',
+  plus: 'mdi:plus',
+  minus: 'mdi:minus',
+  calendar: 'mdi:calendar',
+  $checkboxOn: 'mdi:checkbox-marked',
+  $checkboxOff: 'mdi:checkbox-blank-outline',
+}
+
+const iconify = <IconSet>{
+  component: (props: any) => {
+    console.log(props)
+
+    const { icon, tag, ...rest } = props
+    const strIcon = icon as string
+
+    return h(tag, rest, [
+      h('iconify-icon', {
+        key: strIcon,
+        icon: aliases[strIcon] ?? icon,
+        ...rest,
+      }),
+    ])
+  },
+}
+
+export { aliases, iconify }