Use ocelot icons as custom set

frontend/renderer/plugins/vuetify.ts

@@ -1,20 +1,11 @@
 // eslint-disable-next-line import/no-unassigned-import
-import '@mdi/font/css/materialdesignicons.css'
-// eslint-disable-next-line import/no-unassigned-import
 import 'vuetify/styles'
 import { I18n, useI18n } from 'vue-i18n'
-import { createVuetify, IconAliases } from 'vuetify'
-import { aliases } from 'vuetify/iconsets/mdi-svg'
+import { createVuetify } from 'vuetify'
+import { mdi } from 'vuetify/iconsets/mdi-svg'
 import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
 
-import CustomIcons from '#assets/icons'
-
-const aliasesCustom: IconAliases = {
-  ...aliases,
-}
-Object.entries(CustomIcons).forEach(([key, value]) => {
-  Object.assign(aliasesCustom, { [key]: value.default as never })
-})
+import { aliases, set } from '#assets/icons'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default (i18n: I18n<any, NonNullable<unknown>, NonNullable<unknown>, string, false>) =>
@@ -24,6 +15,11 @@ export default (i18n: I18n<any, NonNullable<unknown>, NonNullable<unknown>, stri
     },
     ssr: true,
     icons: {
-      aliases: aliasesCustom,
+      aliases,
+      defaultSet: 'ocelot',
+      sets: {
+        ocelot: set,
+        mdi,
+      },
     },
   })

frontend/src/assets/icons/index.ts

@@ -1,20 +1,35 @@
-// see https://vitejs.dev/guide/features.html#glob-import
-const iconsModule = import.meta.glob('./svgComponents/' + '*.vue', {
-  eager: true,
-})
+import { h } from 'vue'
+import { IconProps } from 'vuetify'
+
+import type { IconSet, IconAliases } from 'vuetify'
 
 type Module = {
   default: object
 }
+
+// see https://vitejs.dev/guide/features.html#glob-import
+const iconModules: Record<string, Module> = import.meta.glob('./svgComponents/' + '*.vue', {
+  eager: true,
+})
+
 const icons: Record<string, Module> = {}
 const iconNames: string[] = []
 
-Object.entries(iconsModule).forEach(([key, module]) => {
+Object.entries(iconModules).forEach(([key, module]) => {
   const iconName: string = key.split('/').slice(-1)[0].replace('.vue', '')
   // eslint-disable-next-line security/detect-object-injection
-  icons[iconName] = module as Module
+  icons[iconName] = module
   iconNames.push('$' + iconName) // because it's used this way
 })
 
-export default icons
-export { iconNames }
+const aliases: IconAliases = {} as IconAliases
+Object.entries(icons).forEach(([key, value]) => {
+  Object.assign(aliases, { [key]: value.default })
+})
+
+const set: IconSet = {
+  component: (props: IconProps) =>
+    h(props.tag, [h(icons[props.icon as string], { class: 'v-icon__svg' })]),
+}
+
+export { iconNames, aliases, set }