Merge pull request #707 from Adamant-im/feat/svg-mdi

Feat/svg mdi

Author: bludnic

package-lock.json

@@ -42,7 +42,7 @@
     "@klayr/cryptography": "^4.1.1",
     "@klayr/transactions": "^6.1.1",
     "@klayr/validator": "^0.9.1",
-    "@mdi/font": "^7.4.47",
+    "@mdi/js": "^7.4.47",
     "@stablelib/utf8": "^2.0.0",
     "@tanstack/vue-query": "^5.52.2",
     "@vueuse/core": "^11.1.0",

package.json

@@ -1,7 +1,5 @@
 @import './settings/_colors.scss';
 
-@import '@mdi/font/css/materialdesignicons.css';
-
 @import './generic/_variables.scss';
 @import './generic/_vuetify.scss';
 @import './generic/_layout.scss';

src/assets/styles/app.scss

@@ -6,7 +6,7 @@
           <div :class="classes.error">
             <v-tooltip location="bottom">
               <template #activator="{ props }">
-                <v-icon v-bind="props" :class="classes.errorIcon" icon="mdi-image-off" />
+                <v-icon v-bind="props" :class="classes.errorIcon" :icon="mdiImageOff" />
               </template>
 
               <span>{{ t('chats.file_loading_error') }}</span>
@@ -66,6 +66,8 @@ import { LocalFile, isLocalFile, formatBytes } from '@/lib/files'
 import { FileAsset } from '@/lib/adamant-api/asset'
 import IconFile from '@/components/icons/common/IconFile.vue'
 import { AChatFileLoader } from './AChatFileLoader.tsx'
+import { mdiImageOff } from '@mdi/js'
+
 
 const className = 'a-chat-file'
 const classes = {
@@ -127,6 +129,7 @@ export default defineComponent({
       fileName,
       fileExtension,
       fileSize,
+      mdiImageOff,
       formatBytes,
       iconSize
     }

src/components/AChat/AChatAttachment/AChatFile.vue

@@ -5,7 +5,7 @@
         <div :class="classes.error">
           <v-tooltip location="bottom">
             <template #activator="{ props }">
-              <v-icon v-bind="props" :class="classes.errorIcon" icon="mdi-image-off" />
+              <v-icon v-bind="props" :class="classes.errorIcon" :icon="mdiImageOff" />
             </template>
 
             <span>{{ t('chats.image_loading_error') }}</span>
@@ -47,6 +47,8 @@ import { AChatFileLoader } from './AChatFileLoader.tsx'
 import { NormalizedChatMessageTransaction } from '@/lib/chat/helpers'
 import { LocalFile } from '@/lib/files'
 import { FileAsset } from '@/lib/adamant-api/asset'
+import { mdiImageOff } from '@mdi/js'
+
 
 const className = 'a-chat-image'
 const classes = {
@@ -80,7 +82,8 @@ export default defineComponent({
 
     return {
       t,
-      classes
+      classes,
+      mdiImageOff
     }
   }
 })

src/components/AChat/AChatAttachment/AChatImage.vue

@@ -2,12 +2,12 @@
   <v-dialog v-model="show" fullscreen :class="classes.root" @keydown="handleKeydown">
     <v-card :class="classes.container">
       <v-toolbar color="transparent">
-        <v-btn icon="mdi-close" @click="closeModal" />
+        <v-btn :icon="mdiClose" @click="closeModal" />
 
         <div :class="classes.imageCounter">{{ slide + 1 }} of {{ files.length }}</div>
 
         <v-btn
-          icon="mdi-arrow-collapse-down"
+          :icon="mdiArrowCollapseDown"
           :class="classes.saveButton"
           @click="downloadFile"
           :loading="downloading"
@@ -40,12 +40,12 @@
 
         <template #prev>
           <v-btn icon variant="plain" @click="prevSlide">
-            <v-icon icon="mdi-chevron-left" size="x-large" />
+            <v-icon :icon="mdiChevronLeft" size="x-large" />
           </v-btn>
         </template>
         <template #next>
           <v-btn icon variant="plain" @click="nextSlide">
-            <v-icon icon="mdi-chevron-right" size="x-large" />
+            <v-icon :icon="mdiChevronRight" size="x-large" />
           </v-btn>
         </template>
       </v-carousel>
@@ -63,6 +63,8 @@ import AChatImageModalItem from './AChatImageModalItem.vue'
 import AChatModalFile from './AChatModalFile.vue'
 import { NormalizedChatMessageTransaction } from '@/lib/chat/helpers'
 import { FileAsset } from '@/lib/adamant-api/asset'
+import { mdiArrowCollapseDown,  mdiChevronLeft, mdiChevronRight, mdiClose } from '@mdi/js'
+
 
 function delay(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms))
@@ -218,6 +220,10 @@ export default {
       slide,
       show,
       showArrows,
+      mdiArrowCollapseDown,
+      mdiChevronLeft,
+      mdiChevronRight,
+      mdiClose,
       closeModal,
       prevSlide,
       nextSlide,

src/components/AChat/AChatAttachment/AChatImageModal.vue

@@ -34,7 +34,7 @@
       </template>
       <template v-if="showSendButton" #append-inner>
         <slot name="append" />
-        <v-icon class="a-chat__send-icon" icon="mdi-send" size="28" />
+        <v-icon class="a-chat__send-icon" :icon="mdiSend" size="28" />
       </template>
     </v-textarea>
 
@@ -46,6 +46,7 @@
 import { nextTick } from 'vue'
 import ChatEmojis from '@/components/Chat/ChatEmojis.vue'
 import { isMobile } from '@/lib/display-mobile'
+import { mdiSend } from '@mdi/js'
 
 export default {
   components: { ChatEmojis },
@@ -83,6 +84,12 @@ export default {
     }
   },
   emits: ['message', 'esc', 'error'],
+  setup() {
+
+    return {
+      mdiSend
+    }
+  },
   data: () => ({
     message: '',
     emojiPickerOpen: false,

src/components/AChat/AChatForm.vue

@@ -16,7 +16,7 @@
         class="a-chat__message-actions-icon"
         @click="toggleMenu(true)"
       >
-        <v-icon icon="mdi-chevron-down" :size="24" />
+        <v-icon :icon="mdiChevronDown" :size="24" />
       </v-btn>
     </template>
 
@@ -33,6 +33,8 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { mdiChevronDown } from '@mdi/js'
+
 
 import { NormalizedChatMessageTransaction } from '@/lib/chat/helpers'
 
@@ -60,7 +62,7 @@ export default defineComponent({
       emit('open:change', state, props.transaction)
     }
 
-    return { t, classes, toggleMenu, emit }
+    return { t, classes, mdiChevronDown, toggleMenu }
   }
 })
 </script>

src/components/AChat/AChatMessageActionsDropdown.vue

@@ -4,7 +4,7 @@
       <v-list-item-title>{{ t('chats.chat_actions.reply') }}</v-list-item-title>
 
       <template #append>
-        <v-icon icon="mdi-reply" />
+        <v-icon :icon="mdiReply" />
       </template>
     </v-list-item>
 
@@ -14,7 +14,7 @@
       <v-list-item-title>{{ t('chats.chat_actions.copy') }}</v-list-item-title>
 
       <template #append>
-        <v-icon icon="mdi-content-copy" />
+        <v-icon :icon="mdiContentCopy" />
       </template>
     </v-list-item>
   </v-list>
@@ -23,6 +23,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { mdiContentCopy,  mdiReply } from '@mdi/js'
+
 
 const className = 'message-actions-list'
 const classes = {
@@ -37,7 +39,9 @@ export default defineComponent({
     return {
       classes,
       t,
-      emit
+      emit,
+      mdiContentCopy,
+      mdiReply
     }
   }
 })

src/components/AChat/AChatMessageActionsList.vue

@@ -4,7 +4,7 @@
       <v-list-item-title>{{ t('chats.chat_actions.reply') }}</v-list-item-title>
 
       <template #append>
-        <v-icon icon="mdi-reply" />
+        <v-icon :icon="mdiReply" />
       </template>
     </v-list-item>
 
@@ -14,7 +14,7 @@
       <v-list-item-title>{{ t('chats.chat_actions.copy') }}</v-list-item-title>
 
       <template #append>
-        <v-icon icon="mdi-content-copy" />
+        <v-icon :icon="mdiContentCopy" />
       </template>
     </v-list-item>
   </v-list>
@@ -23,6 +23,7 @@
 <script>
 import { defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { mdiContentCopy, mdiReply } from '@mdi/js'
 
 const className = 'message-actions-menu'
 const classes = {
@@ -45,7 +46,9 @@ export default defineComponent({
       classes,
       t,
       onClickReply,
-      onClickCopy
+      onClickCopy,
+      mdiContentCopy,
+      mdiReply
     }
   }
 })