From 355496f070abccdc4bf72dc85836460d9381bb82 Mon Sep 17 00:00:00 2001 From: Rakantor Date: Tue, 18 Apr 2023 11:18:09 +0200 Subject: [PATCH] Add custom iconset and SVGs --- components/svg/apple.vue | 6 ++++++ components/svg/heroku.vue | 6 ++++++ iconsets/brands.ts | 15 +++++++++++++++ plugins/vuetify.ts | 12 ++++++++++++ 4 files changed, 39 insertions(+) create mode 100644 components/svg/apple.vue create mode 100644 components/svg/heroku.vue create mode 100644 iconsets/brands.ts diff --git a/components/svg/apple.vue b/components/svg/apple.vue new file mode 100644 index 0000000..4b59d7a --- /dev/null +++ b/components/svg/apple.vue @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/components/svg/heroku.vue b/components/svg/heroku.vue new file mode 100644 index 0000000..dab2ca5 --- /dev/null +++ b/components/svg/heroku.vue @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/iconsets/brands.ts b/iconsets/brands.ts new file mode 100644 index 0000000..fd278a8 --- /dev/null +++ b/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 } \ No newline at end of file diff --git a/plugins/vuetify.ts b/plugins/vuetify.ts index 287c24b..108fc01 100644 --- a/plugins/vuetify.ts +++ b/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') }) \ No newline at end of file