Add custom iconset and SVGs

components/svg/apple.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <title>Apple</title>
+    <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/>
+  </svg>
+</template>

components/svg/heroku.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <title>Heroku</title>
+    <path d="M20.61 0H3.39C2.189 0 1.23.96 1.23 2.16v19.681c0 1.198.959 2.159 2.16 2.159h17.22c1.2 0 2.159-.961 2.159-2.159V2.16C22.77.96 21.811 0 20.61 0zm.96 21.841c0 .539-.421.96-.96.96H3.39c-.54 0-.96-.421-.96-.96V2.16c0-.54.42-.961.96-.961h17.22c.539 0 .96.421.96.961v19.681zM6.63 20.399L9.33 18l-2.7-2.4v4.799zm9.72-9.719c-.479-.48-1.379-1.08-2.879-1.08-1.621 0-3.301.421-4.5.84V3.6h-2.4v10.38l1.68-.78s2.76-1.26 5.16-1.26c1.2 0 1.5.66 1.5 1.26v7.2h2.4v-7.2c.059-.179.059-1.501-.961-2.52zM13.17 7.5h2.4c1.08-1.26 1.62-2.521 1.8-3.9h-2.399c-.241 1.379-.841 2.64-1.801 3.9z"/>
+  </svg>
+</template>

iconsets/brands.ts

@@ -0,0 +1,15 @@
+import { h } from 'vue'
+import type { IconSet, IconProps } from 'vuetify'
+import apple from '~/components/svg/apple.vue'
+import heroku from '~/components/svg/heroku.vue'
+
+const customSvgNameToComponent: any = {
+  apple,
+  heroku,
+}
+
+const brands: IconSet = {
+  component: (props: IconProps) => h(customSvgNameToComponent[props.icon], { class: 'v-icon__svg' }),
+}
+
+export { brands }

plugins/vuetify.ts

@@ -2,6 +2,8 @@ import { createVuetify, ThemeDefinition  } from 'vuetify'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import '@mdi/font/css/materialdesignicons.css'
+import { mdi } from 'vuetify/iconsets/mdi'
+import { brands } from '~/iconsets/brands'
 // @ts-expect-error Missing type definitions
 import colors from 'vuetify/lib/util/colors'
 
@@ -51,8 +53,18 @@ export default defineNuxtPlugin(nuxtApp => {
       themes: {
         myCustomDarkTheme,
       }
+    },
+    icons: {
+      defaultSet: 'mdi',
+      sets: {
+        mdi,
+        brands
+      }
     }
   })
 
   nuxtApp.vueApp.use(vuetify)
+
+  // Define global variables
+  nuxtApp.provide('myName', 'Manuel Veigel')
 })