remove vuetifycss and materialicon -> use threeshake

@nuxt/vuetify etc...

assets/variables.scss

@@ -0,0 +1,142 @@
+// assets/variables.scss
+
+// Variables you want to modify
+// $btn-border-radius: 0px;
+
+// If you need to extend Vuetify SASS lists
+// $material-light: ( cards: blue );
+
+@import '~vuetify/src/styles/styles.sass';
+
+html, body {
+  scrollbar-width: thin;
+  overflow: auto !important;
+  scrollbar-color: #FF4511 #111;
+  font-family: sans-serif;
+}
+
+li {
+  margin-left: 10px;
+}
+
+.v-dialog .theme--dark.v-card {
+  background-color: #434343;
+}
+
+.v-application .p-description.text-body-1 {
+  letter-spacing: normal !important;
+}
+
+#home {
+  max-width: 1400px;
+  padding: 0px;
+  overflow: hidden;
+}
+
+#events {
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+#calh {
+  height: 292px;
+}
+
+.container {
+  max-width: 1400px;
+}
+
+.v-dialog {
+  width: 600px;
+  max-width: 800px;
+  &.v-dialog--fullscreen {
+    max-width: 100%;
+  }
+}
+
+.theme--dark.v-list {
+  background-color: #333;
+}
+
+.v-autocomplete__content.v-menu__content {
+  scrollbar-width: thin;
+  scrollbar-color: #FF4511 #111;
+}
+
+// EVENT
+.event {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  width: 330px;
+  max-width: 500px !important;
+  flex-grow: 1;
+  margin-top: .4em;
+  margin-right: .4em;
+  transition: all .5s;
+  overflow: hidden;
+
+  .title {
+    display: -webkit-box;
+    overflow: hidden;
+    margin: 0.5rem 1rem 0.5rem 1rem;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    font-size: 1.1em !important;
+    line-height: 1.2em !important;
+  }
+
+  .body {
+    flex: 1 1 auto;
+  }
+
+  .img {
+    width: 100%;
+    max-height: 250px;
+    min-height: 160px;
+    object-fit: cover;
+    object-position: top;
+    aspect-ratio: 1.7778;
+  }
+
+  .place {
+    max-width: 100%;
+    span {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  a {
+    text-decoration: none;
+  }
+}
+
+.vc-past {
+  opacity: 0.4;
+}
+
+#event {
+  max-width: 1200px;
+}
+
+.tags .v-chip .v-chip__content {
+  max-width: 120px;
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+}
+
+
+.cursorPointer {
+  cursor: pointer;
+}
+
+pre {
+  white-space: break-spaces;
+  font-size: 13px;
+}

components/Announcement.vue

@@ -1,15 +1,16 @@
 <template lang="pug">
   nuxt-link(:to='`/announcement/${announcement.id}`')
-    v-alert.mb-1(border='left' type='info' color="primary" show-icon) {{announcement.title}}
+    v-alert.mb-1(border='left' type='info' color="primary" :icon='mdiInformation') {{announcement.title}}
 
 </template>
 <script>
-import { mapState } from 'vuex'
+import { mdiInformation } from '@mdi/js'
-
 export default {
+  data () {
+    return { mdiInformation }
+  },
   props: {
     announcement: { type: Object, default: () => ({}) }
-  },
+  }
-  computed: mapState(['announcements'])
 }
 </script>

components/Editor.vue

@@ -7,56 +7,56 @@
         v-btn(icon text tabindex='-1'
           :class="{ primary: isActive.bold() }"
           @click="commands.bold")
-          v-icon mdi-format-bold
+          v-icon(v-text='mdiFormatBold')
 
         v-btn(icon text tabindex='-1'
           :class="{ primary: isActive.underline() }"
           @click="commands.underline")
-          v-icon mdi-format-underline
+          v-icon(v-text='mdiFormatUnderline')
 
         v-btn(icon text tabindex='-1'
           :class="{ primary: isActive.strike() }"
           @click="commands.strike")
-          v-icon mdi-format-strikethrough-variant
+          v-icon(v-text='mdiFormatStrikethroughVariant')
 
         v-btn(icon text tabindex='-1'
           :class="{ primary: isActive.italic() }"
           @click="commands.italic")
-          v-icon mdi-format-italic
+          v-icon(v-text='mdiFormatItalic')
 
         v-btn(icon text tabindex='-1'
           :class="{ primary: isActive.heading({level: 1}) }"
           @click="commands.heading({level: 1})")
-          v-icon mdi-format-header-1
+          v-icon(v-text='mdiFormatHeader1')
 
         v-btn(icon text tabindex='-1'
           :class="{ primary: isActive.heading({level: 2}) }"
           @click="commands.heading({level: 2})")
-          v-icon mdi-format-header-2
+          v-icon(v-text='mdiFormatHeader2')
 
         v-btn(icon text tabindex='-1'
           :class="{ primary: isActive.heading({level: 3}) }"
           @click="commands.heading({level: 3})")
-          v-icon mdi-format-header-3
+          v-icon(v-text='mdiFormatHeader3')
 
         v-btn(icon text tabindex='-1'
           :class="{ primary: isActive.code() }"
           @click="commands.code")
-          v-icon mdi-code-tags
+          v-icon(v-text='mdiCodeTags')
 
         v-btn(icon text tabindex='-1'
           :class="{ primary: isActive.blockquote() }"
           @click="commands.blockquote")
-          v-icon mdi-format-quote-open
+          v-icon(v-text='mdiFormatQuoteOpen')
 
         v-btn(icon text tabindex='-1'
           :class="{ primary: isActive.bullet_list() }"
           @click="commands.bullet_list")
-          v-icon mdi-format-list-bulleted
+          v-icon(v-text='mdiFormatListBulleted')
 
         v-btn(icon text tabindex='-1' :class='{ primary: isActive.link() }'
           @click='commands.link({href: getMarkAttrs("link") && getMarkAttrs("link").href ? "" : "https://"}); $refs.link.focus();')
-            v-icon mdi-link
+            v-icon(v-text='mdiLink')
         v-text-field.pt-0.ml-1(v-show='isActive.link()' ref='link' @focus='focus' @blur='blur' hide-details
             :value='isActive.link() && getMarkAttrs("link") && getMarkAttrs("link").href || ""'
             @keypress.enter='commands.link({ href: $event.target.value}); editor.focus()')
@@ -65,6 +65,9 @@
 </template>
 <script>
 import debounce from 'lodash/debounce'
+import { mdiLink, mdiFormatListBulleted, mdiFormatQuoteOpen, mdiCodeTags,
+  mdiFormatHeader1, mdiFormatHeader2, mdiFormatHeader3, mdiFormatItalic,
+  mdiFormatStrikethroughVariant, mdiFormatBold, mdiFormatUnderline } from '@mdi/js'
 import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble } from 'tiptap'
 import {
   Blockquote,
@@ -97,6 +100,9 @@ export default {
   },
   data () {
     return {
+      mdiLink, mdiFormatListBulleted, mdiFormatQuoteOpen, mdiCodeTags,
+      mdiFormatHeader1, mdiFormatHeader2, mdiFormatHeader3, mdiFormatItalic,
+      mdiFormatStrikethroughVariant, mdiFormatBold, mdiFormatUnderline,      
       options: [],
       linkActive: false,
       editor: null,

components/Event.vue

@@ -2,7 +2,7 @@
   v-card.h-event.event.d-flex(itemscope itemtype="https://schema.org/Event")
     nuxt-link(:to='`/event/${event.slug || event.id}`' itemprop="url")
       img.img.u-featured(:src='thumbnail' :alt='alt' :loading='this.lazy?"lazy":"eager"' itemprop="image" :style="{ 'object-position': thumbnailPosition }")
-      v-icon.float-right.mr-1(v-if='event.parentId' color='success') mdi-repeat
+      v-icon.float-right.mr-1(v-if='event.parentId' color='success' v-text='mdiRepeat')
       .title.p-name(itemprop="name") {{event.title}}
 
     v-card-text.body.pt-0.pb-0
@@ -19,35 +19,39 @@
       v-menu(offset-y)
         template(v-slot:activator="{on}")
           v-btn.align-self-end(icon v-on='on' color='primary' alt='more')
-            v-icon mdi-dots-vertical
+            v-icon(v-text='mdiDotsVertical')
         v-list(dense)
           v-list-item-group
             v-list-item(@click='clipboard(`${settings.baseurl}/event/${event.slug || event.id}`)')
               v-list-item-icon
-                v-icon mdi-content-copy
+                v-icon(v-text='mdiContentCopy')
               v-list-item-content
                 v-list-item-title {{$t('common.copy_link')}}
             v-list-item(:href='`/api/event/${event.slug || event.id}.ics`')
               v-list-item-icon
-                v-icon mdi-calendar-export
+                v-icon(v-text='mdiCalendarExport')
               v-list-item-content
                 v-list-item-title {{$t('common.add_to_calendar')}}
             v-list-item(v-if='is_mine' :to='`/add/${event.id}`')
               v-list-item-icon
-                v-icon mdi-pencil
+                v-icon(v-text='mdiPencil')
               v-list-item-content
                 v-list-item-title {{$t('common.edit')}}
             v-list-item(v-if='is_mine' @click='remove(false)')
               v-list-item-icon
-                v-icon(color='error') mdi-delete-forever
+                v-icon(color='error' v-text='mdiDeleteForever')
               v-list-item-content
                 v-list-item-title {{$t('common.remove')}}
 </template>
 <script>
 import { mapState } from 'vuex'
 import clipboard from '../assets/clipboard'
+import { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy, mdiCalendarExport, mdiDeleteForever } from '@mdi/js'
 
 export default {
+  data () {
+    return { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy, mdiCalendarExport, mdiDeleteForever }
+  },
   props: {
     event: { type: Object, default: () => ({}) },
     lazy: Boolean

components/List.vue

@@ -9,14 +9,18 @@ div#list
       v-for='event in computedEvents'
       :key='`${event.id}_${event.start_datetime}`' small)
       v-list-item-content
-        v-list-item-subtitle <v-icon small color='success' v-if='event.parentId'>mdi-repeat</v-icon> {{event|when}}
+        v-list-item-subtitle <v-icon small color='success' v-if='event.parentId' v-text='mdiRepeat'></v-icon> {{event|when}}
           span.primary--text.ml-1 @{{event.place.name}}
         v-list-item-title(v-text='event.title')
 </template>
 <script>
+import { mdiRepeat } from '@mdi/js'
 
 export default {
   name: 'List',
+  data () {
+    return { mdiRepeat }
+  },
   props: {
     title: {
       type: String,

components/Nav.vue

@@ -12,52 +12,57 @@
 
     v-spacer
     v-btn(v-if='$auth.loggedIn || settings.allow_anon_event' icon nuxt to='/add' :aria-label='$t("common.add_event")')
-      v-icon(large color='primary') mdi-plus
+      v-icon(large color='primary' v-text='mdiPlus')
 
     v-btn(icon nuxt to='/export' :aria-label='$t("common.share")')
-      v-icon mdi-share-variant
+      v-icon(v-text='mdiShareVariant')
 
     v-btn(v-if='!$auth.loggedIn' icon nuxt to='/login' :aria-label='$t("common.login")')
-      v-icon mdi-login
+      v-icon(v-text='mdiLogin')
 
     client-only
       v-menu(v-if='$auth.loggedIn' offset-y)
         template(v-slot:activator="{ on, attrs }")
           v-btn(icon v-bind='attrs' v-on='on' aria-label='Menu')
-            v-icon mdi-dots-vertical
+            v-icon(v-text='mdiDotsVertical')
         v-list
           v-list-item(nuxt to='/settings')
             v-list-item-icon
-              v-icon mdi-cog
+              v-icon(v-text='mdiCog')
             v-list-item-content
               v-list-item-title {{$t('common.settings')}}
 
           v-list-item(v-if='$auth.user.is_admin' nuxt to='/admin')
             v-list-item-icon
-              v-icon mdi-account
+              v-icon(v-text='mdiAccount')
             v-list-item-content
               v-list-item-title {{$t('common.admin')}}
 
           v-list-item(@click='logout')
             v-list-item-icon
-              v-icon mdi-logout
+              v-icon(v-text='mdiLogout')
             v-list-item-content
               v-list-item-title {{$t('common.logout')}}
       template(#placeholder)
-        v-btn(icon aria-label='Menu')
+        v-btn(v-if='$auth.loggedIn' icon aria-label='Menu')
-          v-icon mdi-dots-vertical
+          v-icon(v-text='mdiDotsVertical')
 
 
     v-btn(icon @click='clipboard(feedLink, "common.feed_url_copied")' aria-label='RSS')
-      v-icon(color='orange') mdi-rss
+      v-icon(color='orange' v-text='mdiRss')
 
 </template>
 <script>
 import { mapState } from 'vuex'
 import clipboard from '../assets/clipboard'
+import { mdiPlus, mdiShareVariant, mdiLogin, mdiDotsVertical, mdiLogout, mdiAccount, mdiCog, mdiRss } from '@mdi/js'
+
 
 export default {
   name: 'Nav',
+  data () {
+    return { mdiPlus, mdiShareVariant, mdiLogout, mdiLogin, mdiDotsVertical, mdiAccount, mdiCog, mdiRss }
+  },
   mixins: [clipboard],
   computed: {
     ...mapState(['filters', 'settings']),
@@ -77,32 +82,11 @@ export default {
 
       return `${this.settings.baseurl}/feed/rss${query}`
     },
-    could_add () {
-      return (this.$auth.loggedIn || this.settings.allow_anon_event)
-    }
   },
   methods: {
     logout () {
       this.$root.$message('common.logout_ok')
       this.$auth.logout()
-    },
-    async createTrustedInstance () {
-      let url = this.instance_url
-      if (!url.match(/^https?:\/\//)) {
-        url = `https://${url}`
-      }
-      try {
-        const instance = await this.$axios.$get(`${url}/.well-known/nodeinfo/2.0`)
-        const trusted_instance = {
-          url,
-          name: instance.metadata.nodeName,
-          description: instance.metadata.nodeDescription,
-          place: instance.metadata.placeDescription
-        }
-        this.setSetting({ key: 'trusted_instances', value: this.settings.trusted_instances.concat(trusted_instance) })
-      } catch (e) {
-        this.$root.$message(e, { color: 'error' })
-      }
     }
   }
 }

components/Search.vue

@@ -24,17 +24,18 @@
           @click:close='remove(data.item)'
           :input-value="data.selected")
           v-avatar(left)
-            v-icon {{data.item.type === 'place' ? 'mdi-map-marker' : 'mdi-tag' }}
+            v-icon(v-text="data.item.type === 'place' ? mdiMapMarker : mdiTag")
           span {{ data.item.label }}
       template(v-slot:item='{ item }')
           v-list-item-avatar
-            v-icon {{item.type === 'place' ? 'mdi-map-marker' : 'mdi-tag' }}
+            v-icon(v-text="item.type === 'place' ? mdiMapMarker : mdiTag")
           v-list-item-content
             v-list-item-title(v-text='item.label')
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import { mdiMapMarker, mdiTag } from '@mdi/js'
 export default {
   name: 'Search',
   props: {
@@ -43,6 +44,7 @@ export default {
   },
   data () {
     return {
+      mdiTag, mdiMapMarker,
       tmpfilter: null,
       search: ''
     }

components/Snackbar.vue

@@ -7,17 +7,20 @@
     :left="left"
     :right="right"
     :timeout="timeout")
-    v-icon.mr-3(color="white") {{icon}}
+    v-icon.mr-3(color="white" v-text='icon')
     span {{ message }}
     template(v-slot:action="{ }")
-      v-icon(size="16" @click="active = false") mdi-close-circle
+      v-icon(size="16" @click="active = false" v-text='mdiCloseCircle')
 </template>
 
 <script>
+import { mdiAlert, mdiCloseCircle } from '@mdi/js'
+
 export default {
   data () {
     return {
-      icon: 'md-alert',
+      mdiAlert, mdiCloseCircle,
+      icon: mdiAlert,
       color: 'secondary',
       bottom: true,
       top: false,
@@ -33,7 +36,7 @@ export default {
       this.active = true
       this.message = this.$t(message, opts)
       this.color = opts.color || 'secondary'
-      this.icon = opts.icon || 'md-alert'
+      this.icon = opts.icon || mdiAlert
     }
   }
 }

components/admin/Announcement.vue

@@ -17,7 +17,7 @@
           v-btn(@click='dialog=false' color='error') {{$t('common.cancel')}}
           v-btn(@click='save' color='primary' :disabled='!valid || loading' :loading='loading') {{$t(`common.${editing?'save':'send'}`)}}
 
-    v-btn(@click='openDialog' text color='primary') <v-icon>mdi-plus</v-icon> {{$t('common.add')}}
+    v-btn(@click='openDialog' text color='primary') <v-icon v-text='mdiPlus'></v-icon> {{$t('common.add')}}
     v-card-text
       v-data-table(
           v-if='announcements.length'
@@ -36,11 +36,13 @@ import { mapActions } from 'vuex'
 import cloneDeep from 'lodash/cloneDeep'
 import Editor from '../Editor'
 import Announcement from '../Announcement'
+import { mdiPlus } from '@mdi/js'
 
 export default {
   components: { Editor, Announcement },
   data () {
     return {
+      mdiPlus,
       valid: false,
       dialog: false,
       editing: false,

components/admin/Federation.vue

@@ -56,7 +56,7 @@
               v-btn(color='error' @click='dialogAddInstance=false') {{$t('common.cancel')}}
               v-btn(color='primary' :disabled='!valid || loading' :loading='loading' @click='createTrustedInstance') {{$t('common.ok')}}
 
-        v-btn.mt-4(@click='dialogAddInstance = true' color='primary' text) <v-icon>mdi-plus</v-icon> {{$t('admin.add_instance')}}
+        v-btn.mt-4(@click='dialogAddInstance = true' color='primary' text) <v-icon v-text='mdiPlus'></v-icon> {{$t('admin.add_instance')}}
         v-data-table(
           v-if='settings.trusted_instances.length'
           :hide-default-footer='settings.trusted_instances.length<10'
@@ -64,17 +64,19 @@
           :items='settings.trusted_instances')
           template(v-slot:item.actions="{item}")
             v-btn(icon @click='deleteInstance(item)' color='error')
-              v-icon mdi-delete-forever
+              v-icon(v-text='mdiDeleteForever')
 
 </template>
 <script>
 import { mapActions, mapState } from 'vuex'
 import axios from 'axios'
+import { mdiDeleteForever, mdiPlus } from '@mdi/js'
 
 export default {
   name: 'Federation',
   data ({ $store, $options }) {
     return {
+      mdiDeleteForever, mdiPlus,
       instance_url: '',
       instance_name: $store.state.settings.instance_name,
       instance_place: $store.state.settings.instance_place,

components/admin/Moderation.vue

@@ -13,7 +13,7 @@
             dense :headers='instancesHeader'
             @click:row='instanceSelected')
             template(v-slot:item.blocked="{ item }")
-              v-icon(@click='toggleBlock(item)') {{item.blocked ? 'mdi-checkbox-intermediate' : 'mdi-checkbox-blank-outline'}}
+              v-icon(@click='toggleBlock(item)' v-text='item.blocked ? mdiCheckboxIntermediate : mdiCheckboxBlankOutline')
 
         v-col(:span='11')
           span {{$t('common.users')}}
@@ -24,7 +24,7 @@
             :hide-default-footer='users.length<5'
             dense :headers='usersHeader')
             template(v-slot:item.blocked="{ item }")
-              v-icon(@click='toggleUserBlock(item)') {{item.blocked?'mdi-checkbox-intermediate':'mdi-checkbox-blank-outline'}}
+              v-icon(@click='toggleUserBlock(item)' v-text='item.blocked ? mdiCheckboxIntermediate : mdiCheckboxBlankOutline')
 
       div
         v-card-title {{$t('common.resources')}}
@@ -42,25 +42,27 @@
             v-menu(offset-y)
               template(v-slot:activator="{ on }")
                 v-btn.mr-2(v-on='on' color='primary' small icon)
-                  v-icon mdi-dots-vertical
+                  v-icon(v-text='mdiDotsVertical')
               v-list
                 v-list-item(v-if='!item.hidden' @click='hideResource(item, true)')
-                  v-list-item-title <v-icon left>mdi-eye-off</v-icon> {{$t('admin.hide_resource')}}
+                  v-list-item-title <v-icon left v-text='mdiEyeOff'></v-icon> {{$t('admin.hide_resource')}}
                 v-list-item(v-else @click='hideResource(item, false)')
-                  v-list-item-title <v-icon left>mdi-eye</v-icon> {{$t('admin.show_resource')}}
+                  v-list-item-title <v-icon left v-text='mdiEye'></v-icon> {{$t('admin.show_resource')}}
                 v-list-item(@click='deleteResource(item)')
-                  v-list-item-title <v-icon left>mdi-delete</v-icon> {{$t('admin.delete_resource')}}
+                  v-list-item-title <v-icon left v-text='mdiDelete'></v-icon> {{$t('admin.delete_resource')}}
                 //- v-list-item(@click='toggleUserBlock(item.ap_user)')
                 //-   v-list-item-title <v-icon left>mdi-lock</v-icon> {{$t('admin.block_user')}}
 </template>
 <script>
 import { mapState, mapActions } from 'vuex'
 import get from 'lodash/get'
+import { mdiDelete, mdiEye, mdiEyeOff, mdiDotsVertical, mdiCheckboxIntermediate, mdiCheckboxBlankOutline } from '@mdi/js'
 
 export default {
   name: 'Moderation',
   data () {
     return {
+      mdiDelete, mdiEye, mdiEyeOff, mdiDotsVertical, mdiCheckboxIntermediate, mdiCheckboxBlankOutline,
       instances: [],
       resources: [],
       users: [],

components/admin/Places.vue

@@ -32,13 +32,16 @@
         :items='places')
         template(v-slot:item.actions='{item}')
           v-btn(@click='editPlace(item)' color='primary' icon)
-            v-icon mdi-pencil
+            v-icon(v-text='mdiPencil')
 </template>
 <script>
 import { mapState, mapActions } from 'vuex'
+import { mdiPencil } from '@mdi/js'
+
 export default {
   data () {
     return {
+      mdiPencil,
       loading: false,
       dialog: false,
       valid: false,

components/admin/Settings.vue

@@ -53,9 +53,9 @@
 
     v-card-actions
       v-btn(text @click='showSMTP=true')
-        <v-icon v-if='showSMTPAlert' color='error'>mdi-alert</v-icon> {{$t('admin.show_smtp_setup')}}
+        <v-icon v-if='showSMTPAlert' color='error' v-text='mdiAlert'></v-icon> {{$t('admin.show_smtp_setup')}}
       v-btn(text @click='$emit("complete")' color='primary' v-if='setup') {{$t('common.next')}}
-        v-icon mdi-arrow-right
+        v-icon(v-text='mdiArrowRight')
 
 
 </template>
@@ -65,6 +65,7 @@ import { mapActions, mapState } from 'vuex'
 import moment from 'dayjs'
 import tzNames from './tz.json'
 import locales from '../../locales/esm'
+import { mdiAlert, mdiArrowRight } from '@mdi/js'
 
 export default {
   props: {
@@ -74,6 +75,7 @@ export default {
   name: 'Settings',
   data ({ $store }) {
     return {
+      mdiAlert, mdiArrowRight,
       title: $store.state.settings.title,
       description: $store.state.settings.description,
       locales: Object.keys(locales).map(locale => ({ value: locale, text: locales[locale] })),

components/admin/Theme.vue

@@ -8,7 +8,7 @@
         @change='uploadLogo'
         accept='image/*')
         template(slot='append-outer')
-          v-btn(color='warning' text @click='resetLogo') <v-icon>mdi-restore</v-icon> {{$t('common.reset')}}
+          v-btn(color='warning' text @click='resetLogo') <v-icon v-text='mdiRestore'></v-icon> {{$t('common.reset')}}
           v-img(:src='`${settings.baseurl}/logo.png?${logoKey}`'
             max-width="60px" max-height="60px" contain)
 
@@ -50,8 +50,8 @@
 
     v-card-title {{$t('admin.footer_links')}}
     v-card-text
-      v-btn(color='primary' text @click='openLinkModal') <v-icon>mdi-plus</v-icon> {{$t('admin.add_link')}}
+      v-btn(color='primary' text @click='openLinkModal') <v-icon v-text='mdiPlus'></v-icon> {{$t('admin.add_link')}}
-      v-btn(color='warning' text @click='reset') <v-icon>mdi-restore</v-icon> {{$t('common.reset')}}
+      v-btn(color='warning' text @click='reset') <v-icon v-text='mdiRestore'></v-icon> {{$t('common.reset')}}
       v-card
         v-list.mt-1(two-line subheader)
           v-list-item(v-for='link in settings.footerLinks'
@@ -61,16 +61,18 @@
               v-list-item-subtitle {{link.href}}
             v-list-item-action
               v-btn(icon color='error' @click.stop='removeFooterLink(link)')
-                v-icon mdi-delete-forever
+                v-icon(v-text='mdiDeleteForever')
 
 </template>
 <script>
 import { mapActions, mapState } from 'vuex'
+import { mdiDeleteForever, mdiRestore, mdiPlus } from '@mdi/js'
 
 export default {
   name: 'Theme',
   data () {
     return {
+      mdiDeleteForever, mdiRestore, mdiPlus,
       valid: false,
       logoKey: 0,
       link: { href: '', label: '' },

components/admin/Users.vue

@@ -3,11 +3,11 @@
     v-card-title {{$t('common.users')}}
       v-spacer
       v-text-field(v-model='search'
-        append-icon='mdi-magnify' outlined rounded
+        :append-icon='mdiMagnify' outlined rounded
         label='Search'
         single-line hide-details)
 
-    v-btn(color='primary' text @click='newUserDialog = true') <v-icon>mdi-plus</v-icon> {{$t('common.new_user')}}
+    v-btn(color='primary' text @click='newUserDialog = true') <v-icon v-text='mdiPlus'></v-icon> {{$t('common.new_user')}}
 
     //- ADD NEW USER
     v-dialog(v-model='newUserDialog' :fullscreen='$vuetify.breakpoint.xsOnly')
@@ -20,7 +20,7 @@
               :label="$t('common.email')"
               :rules="$validators.email")
             v-switch(v-model='new_user.is_admin' :label="$t('common.admin')" inset)
-          v-alert(type='info' :closable='false') {{$t('admin.user_add_help')}}
+          v-alert(type='info' :closable='false' :icon='mdiInformation') {{$t('admin.user_add_help')}}
           v-card-actions
             v-spacer
             v-btn(@click='newUserDialog=false' color='error') {{$t('common.cancel')}}
@@ -34,8 +34,8 @@
         :hide-default-footer='users.length<5'
         :search='search')
         template(v-slot:item.is_active='{item}')
-          v-icon(v-if='item.is_active' color='success') mdi-check
+          v-icon(v-if='item.is_active' color='success' v-text='mdiCheck')
-          v-icon(v-else color='warning') mdi-close
+          v-icon(v-else color='warning' v-text='mdiClose')
         template(v-slot:item.actions='{item}')
           v-btn(v-if='item.recover_code' text small :to='`/user_confirm/${item.recover_code}`') {{$t('common.confirm')}}
           v-btn(text small @click='toggle(item)'
@@ -49,6 +49,7 @@
 <script>
 import { mapState } from 'vuex'
 import get from 'lodash/get'
+import { mdiClose, mdiMagnify, mdiCheck, mdiPlus, mdiInformation } from '@mdi/js'
 
 export default {
   name: 'Users',
@@ -57,6 +58,7 @@ export default {
   },
   data () {
     return {
+      mdiClose, mdiMagnify, mdiCheck, mdiPlus, mdiInformation,
       newUserDialog: false,
       valid: false,
       new_user: {

layouts/error.vue

@@ -1,16 +1,19 @@
 <template lang='pug'>
   v-container.p-4.text-center
-    v-alert(v-if="error.statusCode === 404") ¯\_(ツ)_/¯ {{error.message}}
+    v-alert(v-if="error.statusCode === 404" type='error' :icon='mdiAlert') ¯\_(ツ)_/¯ {{error.message}}
-    v-alert(v-else type='error') <v-icon>mdi-warning</v-icon> An error occurred: {{error.message}}
+    v-alert(v-else type='error' :icon='mdiAlert') An error occurred: {{error.message}}
     nuxt-link(to='/')
       v-btn Back to home
 </template>
 
 <script>
 import { mapState } from 'vuex'
-
+import { mdiAlert } from '@mdi/js'
 export default {
   props: { error: { type: Object, default: () => ({ }) } },
+  data () {
+    return { mdiAlert }
+  },
   head () {
     return { title: `${this.settings.title} - Error` }
   },

nuxt.config.js

@@ -1,4 +1,5 @@
 const config = require('./server/config.js')
+const minifyTheme = require('minify-css-string').default
 
 module.exports = {
   telemetry: false,
@@ -27,14 +28,6 @@ module.exports = {
    ** Customize the progress-bar component
    */
   loading: '~/components/Loading.vue',
-  /*
-   ** Global CSS
-   */
-  css: [
-    'vuetify/dist/vuetify.min.css',
-    '@mdi/font/css/materialdesignicons.css',
-    '@/assets/style.less'
-  ],
 
   /*
    ** Plugins to load before mounting the App
@@ -42,7 +35,6 @@ module.exports = {
   plugins: [
     '@/plugins/i18n.js',
     '@/plugins/filters', // text filters, datetime filters, generic transformation helpers etc.
-    '@/plugins/vuetify', // vuetify
     '@/plugins/axios', // axios baseurl configuration
     '@/plugins/validators', // inject validators
     '@/plugins/api', // api helpers
@@ -94,6 +86,30 @@ module.exports = {
       }
     }
   },
+  buildModules: ['@nuxtjs/vuetify'],
+  vuetify: {
+    customVariables: ['~/assets/variables.scss'],
+    treeShake: true,
+    theme: {
+      options: {
+        customProperties: false,
+        variations: false, 
+        minifyTheme,
+      },
+      dark: true,
+      themes: {
+        dark: {
+          primary: '#FF6E40'
+        },
+        light: {
+          primary: '#FF4500'
+        }
+      }      
+    },
+    defaultAssets: {
+      icons: false
+    }    
+  },
   build: {
     corejs: 3,
     cache: true,

pages/add/MediaInput.vue

@@ -41,13 +41,14 @@
       v-else
       :label="$t('common.media')"
       :hint="$t('event.media_description')"
-      prepend-icon="mdi-camera"
+      :prepend-icon="mdiCamera"
       :value='value.image'
       @change="selectMedia"
       persistent-hint
       accept='image/*')
 </template>
 <script>
+import { mdiCamera } from '@mdi/js'
 export default {
   name: 'MediaInput',
   props: {
@@ -56,6 +57,7 @@ export default {
   },
   data () {
     return {
+      mdiCamera,
       openMediaDetails: false,
       name: this.value.name || '',
       focalpoint: this.value.focalpoint || [0, 0],

pages/add/WhereInput.vue

@@ -6,7 +6,7 @@
         :label="$t('common.where')"
         :hint="$t('event.where_description')"
         :search-input.sync="placeName"
-        prepend-icon='mdi-map-marker'
+        :prepend-icon='mdiMapMarker'
         persistent-hint
         :value="value.name"
         :items="filteredPlaces"
@@ -15,14 +15,14 @@
         @change='selectPlace')
         template(v-slot:item="{ item }")
           v-list-item-content(two-line v-if='item.create')
-            v-list-item-title <v-icon color='primary'>mdi-plus</v-icon> {{item.name}}
+            v-list-item-title <v-icon color='primary' v-text='mdiPlus'></v-icon> {{item.name}}
           v-list-item-content(two-line v-else)
             v-list-item-title {{item.name}}
             v-list-item-subtitle {{item.address}}
 
     v-col(cols=12 md=6)
       v-text-field(ref='address'
-        prepend-icon='mdi-map'
+        :prepend-icon='mdiMap'
         :disabled='disableAddress'
         :rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
         :label="$t('common.address')"
@@ -32,6 +32,7 @@
 </template>
 <script>
 import { mapState } from 'vuex'
+import { mdiMap, mdiMapMarker, mdiPlus } from '@mdi/js'
 
 export default {
   name: 'WhereInput',
@@ -40,6 +41,7 @@ export default {
   },
   data () {
     return {
+      mdiMap, mdiMapMarker, mdiPlus,
       place: { },
       placeName: '',
       disableAddress: true

pages/add/_edit.vue

@@ -5,7 +5,7 @@
         h4 {{edit?$t('common.edit_event'):$t('common.add_event')}}
         v-spacer
         v-btn(link text color='primary' @click='openImportDialog=true')
-          <v-icon>mdi-file-import</v-icon> {{$t('common.import')}}
+          <v-icon v-text='mdiFileImport'></v-icon> {{$t('common.import')}}
       v-dialog(v-model='openImportDialog' :fullscreen='$vuetify.breakpoint.xsOnly')
         ImportDialog(@close='openImportDialog=false' @imported='eventImported')
 
@@ -23,7 +23,7 @@
                   @change='v => event.title = v'
                   :value = 'event.title'
                   :rules="[$validators.required('common.title')]"
-                  prepend-icon='mdi-format-title'
+                  :prepend-icon='mdiFormatTitle'
                   :label="$t('common.title')"
                   autofocus
                   ref='title')
@@ -49,7 +49,7 @@
               //- tags
               v-col(cols=12 md=6)
                 v-combobox(v-model='event.tags'
-                  prepend-icon="mdi-tag-multiple"
+                  :prepend-icon="mdiTagMultiple"
                   chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
                   :delimiters="[',', ' ']"
                   :items="tags.map(t => t.tag)"
@@ -64,12 +64,8 @@
 <script>
 import { mapActions, mapState } from 'vuex'
 import dayjs from 'dayjs'
-import Editor from '@/components/Editor'
+
-import List from '@/components/List'
+import { mdiFileImport, mdiFormatTitle, mdiTagMultiple } from '@mdi/js'
-import ImportDialog from './ImportDialog'
-import DateInput from './DateInput'
-import WhereInput from './WhereInput'
-import MediaInput from './MediaInput'
 
 export default {
   name: 'NewEvent',
@@ -114,6 +110,7 @@ export default {
     const month = dayjs().month() + 1
     const year = dayjs().year()
     return {
+      mdiFileImport, mdiFormatTitle, mdiTagMultiple,
       valid: false,
       openImportDialog: false,
       event: {

pages/event/_slug.vue

@@ -23,19 +23,19 @@ v-container#event.pa-0.pa-sm-2
         v-col.col-12.col-lg-4
           v-card
             v-card-text
-              v-icon.float-right(v-if='event.parentId' color='success') mdi-repeat
+              v-icon.float-right(v-if='event.parentId' color='success' v-text='mdiRepeat')
               .title.text-h5
                 b.p-name(itemprop="name") {{event.title}}
 
               time.dt-start.text-h6(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")' itemprop="startDate" :content="event.start_datetime|unixFormat('YYYY-MM-DDTHH:mm')")
-                v-icon mdi-calendar
+                v-icon(v-text='mdiCalendar')
                 b.ml-2 {{event|when}}
                 .d-none.dt-end(itemprop="endDate" :content="event.end_datetime|unixFormat('YYYY-MM-DDTHH:mm')") {{event.end_datetime|unixFormat('YYYY-MM-DD HH:mm')}}
               div.text-subtitle-1 {{event.start_datetime|from}}
                 small(v-if='event.parentId')  ({{event|recurrentDetail}})
 
               .text-h6.p-location(itemprop="location" itemscope itemtype="https://schema.org/Place")
-                v-icon mdi-map-marker
+                v-icon(v-text='mdiMapMarker')
                 b.vcard.ml-2(itemprop="name") {{event.place && event.place.name}}
                 .text-subtitle-1.adr(itemprop='address') {{event.place && event.place.address}}
 
@@ -50,16 +50,16 @@ v-container#event.pa-0.pa-sm-2
               v-tooltip(bottom) {{$t('common.copy_link')}}
                 template(v-slot:activator="{on, attrs} ")
                   v-btn.ml-2(large icon v-on='on' color='primary' @click='clipboard(`${settings.baseurl}/event/${event.slug || event.id}`)')
-                    v-icon mdi-content-copy
+                    v-icon(v-text='mdiContentCopy')
               v-tooltip(bottom) {{$t('common.embed')}}
                 template(v-slot:activator="{on, attrs} ")
                   v-btn.ml-2(large icon v-on='on' @click='showEmbed=true' color='primary')
-                    v-icon mdi-code-tags
+                    v-icon(v-text='mdiCodeTags')
               v-tooltip(bottom) {{$t('common.add_to_calendar')}}
                 template(v-slot:activator="{on, attrs} ")
                   v-btn.ml-2(large icon v-on='on' color='primary'
                     :href='`/api/event/${event.slug || event.id}.ics`')
-                    v-icon mdi-calendar-export
+                    v-icon(v-text='mdiCalendarExport')
 
       .p-description.text-body-1.pa-3.rounded(v-if='hasMedia && event.description' itemprop='description' v-html='event.description')
 
@@ -76,7 +76,7 @@ v-container#event.pa-0.pa-sm-2
           transition='dialog-bottom-transition')
           v-card
             v-btn.ma-2(icon dark @click='showResources = false')
-              v-icon mdi-close
+              v-icon(v-text='mdiClose')
             v-carousel.pa-5(:interval='10000' ref='carousel' hide-delimiters v-model='currentAttachment'
               height='100%' show-arrows-on-over)
               v-carousel-item(v-for='attachment in selectedResource.data.attachment'
@@ -92,16 +92,16 @@ v-container#event.pa-0.pa-sm-2
               v-menu(v-if='$auth.user && $auth.user.is_admin' offset-y)
                 template(v-slot:activator="{ on }")
                   v-btn.mr-2(v-on='on' color='primary' small icon)
-                    v-icon mdi-dots-vertical
+                    v-icon(v-text='mdiDotsVertical')
                 v-list
                   v-list-item(v-if='!resource.hidden' @click='hideResource(resource, true)')
-                    v-list-item-title <v-icon left>mdi-eye-off</v-icon> {{$t('admin.hide_resource')}}
+                    v-list-item-title <v-icon left v-text='mdiEyeOff'></v-icon> {{$t('admin.hide_resource')}}
                   v-list-item(v-else @click='hideResource(resource, false)')
-                    v-list-item-title <v-icon left>mdi-eye</v-icon> {{$t('admin.show_resource')}}
+                    v-list-item-title <v-icon left v-text='mdiEye'></v-icon> {{$t('admin.show_resource')}}
                   v-list-item(@click='deleteResource(resource)')
-                    v-list-item-title <v-icon left>mdi-delete</v-icon> {{$t('admin.delete_resource')}}
+                    v-list-item-title <v-icon left v-text='mdiDelete'></v-icon> {{$t('admin.delete_resource')}}
                   v-list-item(@click='blockUser(resource)')
-                    v-list-item-title <v-icon left>mdi-lock</v-icon> {{$t('admin.block_user')}}
+                    v-list-item-title <v-icon left v-text='mdiLock'></v-icon> {{$t('admin.block_user')}}
 
               a(:href='resource.data.url || resource.data.context')
                 small {{resource.data.published|dateFormat('ddd, D MMMM HH:mm')}}
@@ -121,10 +121,10 @@ v-container#event.pa-0.pa-sm-2
       .text-center.mt-5.mb-5
         v-btn.mr-2(nuxt icon outlined color='primary'
           :to='`/event/${event.prev}`' :disabled='!event.prev')
-          v-icon mdi-arrow-left
+          v-icon(v-text='mdiArrowLeft')
         v-btn(nuxt bottom right outlined icon color='primary'
           :to='`/event/${event.next}`' :disabled='!event.next')
-          v-icon mdi-arrow-right
+          v-icon(v-text='mdiArrowRight')
 
       v-dialog(v-model='showEmbed' width='700px' :fullscreen='$vuetify.breakpoint.xsOnly')
         EmbedEvent(:event='event' @close='showEmbed=false')
@@ -133,13 +133,15 @@ v-container#event.pa-0.pa-sm-2
 <script>
 import { mapState } from 'vuex'
 import EventAdmin from './eventAdmin'
-import EmbedEvent from './embedEvent'
 import get from 'lodash/get'
 import moment from 'dayjs'
 import clipboard from '../../assets/clipboard'
-
 const htmlToText = require('html-to-text')
 
+import { mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiClose,
+  mdiEye, mdiEyeOff, mdiDelete,
+  mdiCalendarExport, mdiCalendar, mdiContentCopy, mdiMapMarker } from '@mdi/js'
+
 export default {
   name: 'Event',
   mixins: [clipboard],
@@ -154,6 +156,8 @@ export default {
   },
   data () {
     return {
+      mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiCalendarExport, mdiCalendar,
+      mdiMapMarker, mdiContentCopy, mdiClose, mdiDelete, mdiEye, mdiEyeOff,
       currentAttachment: 0,
       event: {},
       showEmbed: false,

pages/event/embedEvent.vue

@@ -2,10 +2,10 @@
 v-card
   v-card-title(v-text="$t('common.embed_title')")
   v-card-text
-        v-alert.mb-3.mt-1(type='info' show-icon) {{$t('common.embed_help')}}
+        v-alert.mb-3.mt-1(type='info' show-icon :icon='mdiInformation') {{$t('common.embed_help')}}
         v-alert.pa-5.my-4.blue-grey.darken-4.text-body-1.lime--text.text--lighten-3 <pre>{{code}}</pre>
           v-btn.float-end(text  color='primary' @click='clipboard(code)') {{$t("common.copy")}}
-            v-icon.ml-1 mdi-content-copy
+            v-icon.ml-1(v-text='mdiContentCopy')
         p.mx-auto
           .mx-auto
             gancio-event(:id='event.id' :baseurl='settings.baseurl')
@@ -17,9 +17,13 @@ v-card
 <script>
 import { mapState } from 'vuex'
 import clipboard from '../../assets/clipboard'
+import { mdiContentCopy, mdiInformation } from '@mdi/js'
 
 export default {
   name: 'EmbedEvent',
+  data() {
+    return { mdiContentCopy, mdiInformation }
+  },
   mixins: [clipboard],
   props: {
     event: { type: Object, default: () => ({}) }

pages/event/eventAdmin.vue

@@ -1,22 +1,25 @@
 <template lang='pug'>
 div
   v-btn(text color='primary' v-if='event.is_visible' @click='toggle(false)') {{$t(`common.${event.parentId?'skip':'hide'}`)}}
-  v-btn(text color='success' v-else @click='toggle(false)') <v-icon color='yellow'>mdi-alert</v-icon> {{$t('common.confirm')}}
+  v-btn(text color='success' v-else @click='toggle(false)') <v-icon color='yellow' v-text='mdiAlert'></v-icon> {{$t('common.confirm')}}
   v-btn(text color='primary' @click='$router.push(`/add/${event.id}`)') {{$t('common.edit')}}
   v-btn(text color='primary' v-if='!event.parentId' @click='remove(false)') {{$t('common.remove')}}
 
   template(v-if='event.parentId')
     v-divider
-    span.mr-1 <v-icon>mdi-repeat</v-icon> {{$t('event.edit_recurrent')}}
+    span.mr-1 <v-icon v-text='mdiRepeat'></v-icon> {{$t('event.edit_recurrent')}}
     v-btn(text color='primary' v-if='event.parent.is_visible' @click='toggle(true)') {{$t('common.pause')}}
     v-btn(text color='primary' v-else @click='toggle(true)') {{$t('common.start')}}
     v-btn(text color='primary' @click='$router.push(`/add/${event.parentId}`)') {{$t('common.edit')}}
     v-btn(text color='primary' @click='remove(true)') {{$t('common.remove')}}
 </template>
 <script>
-
+import { mdiAlert, mdiRepeat } from '@mdi/js'
 export default {
   name: 'EventAdmin',
+  data () {
+    return { mdiAlert, mdiRepeat }
+  },
   props: {
     event: {
       type: Object,

pages/export.vue

@@ -31,7 +31,7 @@
               p(v-html='$t(`export.feed_description`)')
               v-text-field(v-model='link' readonly)
                 v-btn(slot='prepend' text color='primary' @click='clipboard(link)') {{$t("common.copy")}}
-                  v-icon.ml-1 mdi-content-copy
+                  v-icon.ml-1(v-text='mdiContentCopy')
 
         v-tab ics/ical
         v-tab-item
@@ -40,7 +40,7 @@
               p(v-html='$t(`export.ical_description`)')
               v-text-field(v-model='link')
                 v-btn(slot='prepend' text color='primary' @click='clipboard(link)') {{$t("common.copy")}}
-                  v-icon.ml-1 mdi-content-copy
+                  v-icon.ml-1(v-text='mdiContentCopy')
 
         v-tab List
         v-tab-item
@@ -65,7 +65,7 @@
                     :sidebar="list.sidebar")
               v-alert.pa-5.my-4.blue-grey.darken-4.text-body-1.lime--text.text--lighten-3 <pre>{{code}}</pre>
                 v-btn.float-end(text color='primary' @click='clipboard(code)') {{$t("common.copy")}}
-                  v-icon.ml-1 mdi-content-copy
+                  v-icon.ml-1(v-text='mdiContentCopy')
 
         v-tab(v-if='settings.enable_federation') {{$t('common.fediverse')}}
         v-tab-item(v-if='settings.enable_federation')
@@ -83,14 +83,17 @@
 <script>
 import dayjs from 'dayjs'
 import { mapState } from 'vuex'
-import List from '@/components/List'
 import FollowMe from '../components/FollowMe'
 import Search from '@/components/Search'
 import clipboard from '../assets/clipboard'
+import { mdiContentCopy } from '@mdi/js'
 
 export default {
   name: 'Exports',
-  components: { List, FollowMe, Search },
+  components: {
+    FollowMe,
+    Search
+  },
   mixins: [clipboard],
   async asyncData ({ $axios, params, store, $api }) {
     const events = await $api.getEvents({
@@ -101,6 +104,7 @@ export default {
   },
   data ({ $store }) {
     return {
+      mdiContentCopy,
       type: 'rss',
       notification: { email: '' },
       list: {

pages/setup/Completed.vue

@@ -4,13 +4,15 @@
     v-card-text(v-html="$t('setup.completed_description', user)")
     v-card-actions
       v-btn(text @click='next' color='primary' :loading='loading' :disabled='loading') {{$t('setup.start')}}
-        v-icon mdi-arrow-right
+        v-icon(v-text='mdiArrowRight')
 </template>
 <script>
+import { mdiArrowRight } from '@mdi/js'
 
 export default {
   data () {
     return {
+      mdiArrowRight,
       loading: false,
       user: {
         email: 'admin',

pages/setup/DbStep.vue

@@ -17,12 +17,15 @@
 
     v-card-actions
       v-btn(text @click='checkDb' color='primary' :loading='loading' :disabled='loading') {{$t('common.next')}}
-        v-icon mdi-arrow-right
+        v-icon(v-text='mdiArrowRight')
 </template>
 <script>
+import { mdiArrowRight } from '@mdi/js'
+
 export default {
   data () {
     return {
+      mdiArrowRight,
       db: {
         dialect: 'sqlite',
         storage: './gancio.sqlite',

plugins/vuetify.js

@@ -1,34 +0,0 @@
-import Vue from 'vue'
-import Vuetify from 'vuetify'
-
-// import it from 'vuetify/lib/locale/it.js'
-// import en from 'vuetify/lib/locale/en.js'
-// import es from 'vuetify/lib/locale/es'
-// import no from 'vuetify/lib/locale/no'
-// import fr from 'vuetify/lib/locale/fr'
-// import ca from 'vuetify/lib/locale/ca'
-
-
-export default ({ app }) => {
-  Vue.use(Vuetify)
-  app.vuetify = new Vuetify({
-    // lang: {
-      // locales: { en, it }, //, es, fr, no, ca },
-      // current: 'en'
-    // },
-    icons: {
-      iconfont: 'mdi'
-    },
-    theme: {
-      dark: true,
-      themes: {
-        dark: {
-          primary: '#FF6E40'
-        },
-        light: {
-          primary: '#FF4500'
-        }
-      }      
-    }
-  })
-}