feat(mdi-icon): Migrate icons to use @mdi/font

Author: jourdain

package-lock.json

@@ -47,12 +47,12 @@
   },
   "author": "Kitware",
   "dependencies": {
+    "@mdi/font": "3.6.95",
     "babel-plugin-syntax-dynamic-import": "6.18.0",
     "handlebars": "4.0.11",
     "handlebars-loader": "1.7.0",
     "jszip": "3.1.5",
     "kw-web-suite": "8.0.0",
-    "material-design-icons-iconfont": "3.0.3",
     "mousetrap": "1.6.2",
     "open": "0.0.5",
     "serve-handler": "3.6.1",

package.json

@@ -6,7 +6,7 @@ import Vuetify from 'vuetify';
 /* eslint-disable-next-line import/extensions */
 import 'typeface-roboto';
 import 'vuetify/dist/vuetify.min.css';
-import 'material-design-icons-iconfont/dist/material-design-icons.css';
+import '@mdi/font/css/materialdesignicons.css';
 
 // global symbol expose/export
 import 'simput/src/expose';
@@ -21,7 +21,25 @@ import registerDefaultProperties from 'simput/src/components/properties/register
 import HookManager from 'simput/src/core/HookManager';
 import ReaderFactory from 'simput/src/io/ReaderFactory';
 
-Vue.use(Vuetify);
+Vue.use(Vuetify, {
+  icons: {
+    simput: {
+      add: 'mdi-plus',
+      warning: 'mdi-alert-outline',
+      contentCopy: 'mdi-content-copy',
+      delete: 'mdi-delete-outline',
+      folder_open: 'mdi-folder-outline',
+      close: 'mdi-close',
+      error: 'mdi-bug',
+      folder: 'mdi-folder',
+      download: 'mdi-cloud-download',
+      publish: 'mdi-publish',
+      ok: 'mdi-check-circle-outline',
+      check: 'mdi-check',
+    },
+  },
+  iconfont: 'mdi',
+});
 
 export const { applyHook, registerHook } = HookManager;
 

src/app.js

@@ -7,7 +7,7 @@
       icon
       v-on:click="$emit('close')"
     >
-      <v-icon>close</v-icon>
+      <v-icon>{{ $vuetify.icons.simput.close }}</v-icon>
     </v-btn>
   </v-card-title>
   <hr>

src/components/core/AboutBox/template.html

@@ -49,7 +49,7 @@
         color="error"
         v-on:click="errorDialog = true"
       >
-        <v-icon>error</v-icon>
+        <v-icon>{{ $vuetify.icons.simput.error }}</v-icon>
         <span>{{ errors.length }}</span>
         <span v-show="!smallScreen">error(s)</span>
       </v-btn>
@@ -58,7 +58,7 @@
         flat
         v-on:click="promptUserFiles"
       >
-        <v-icon>folder</v-icon>
+        <v-icon>{{ $vuetify.icons.simput.folder }}</v-icon>
         <span v-show="!smallScreen">Open</span>
       </v-btn>
       <v-btn
@@ -67,7 +67,7 @@
         flat
         v-on:click="save"
       >
-        <v-icon>cloud_download</v-icon>
+        <v-icon>{{ $vuetify.icons.simput.download }}</v-icon>
         <span v-show="!smallScreen">Save</span>
       </v-btn>
       <v-btn
@@ -110,7 +110,7 @@
           class="display-4"
           :class="$style.noTransition"
         >
-          publish
+          {{ $vuetify.icons.simput.publish }}
         </v-icon>
       </div>
     </div>

src/components/core/App/template.html

@@ -36,7 +36,7 @@
                 v-show="file.isRaw"
                 :class="$style.icon"
               >
-                error
+                {{ $vuetify.icons.simput.error }}
               </v-icon>
             </div>
             <template v-if="file.isRaw">
@@ -63,8 +63,8 @@
           >
             <div slot="header" class="body-2">
               {{ file.name }}
-              <v-icon v-show="!!file.error" color="red">error</v-icon>
-              <v-icon v-show="!file.error" color="green">check_circle</v-icon>
+              <v-icon v-show="!!file.error" color="red">{{ $vuetify.icons.simput.error }}</v-icon>
+              <v-icon v-show="!file.error" color="green">{{ $vuetify.icons.simput.ok }}</v-icon>
             </div>
             <v-card v-if="file.error">
               <v-card-text>

src/components/core/FileLoader/template.html

@@ -93,7 +93,9 @@
   padding-top: 50px;
 }
 
-.iconContainer :global(.material-icons) {
+.iconContainer :global(.v-icon) {
   font-size: 200px;
   color: #333;
+  position: relative;
+  top: -25px;
 }

src/components/core/Landing/style.css

@@ -45,7 +45,7 @@
                 >
                   <span v-if="dragHover" :class="$style.buttonText">drop your file</span>
                   <span v-else :class="$style.buttonText">open an existing model</span>
-                  <v-icon>folder_open</v-icon>
+                  <v-icon>{{ $vuetify.icons.simput.folder_open }}</v-icon>
                 </v-btn>
                 <div :class="$style.noSelect">
                   or drop one anywhere in this box to begin.

src/components/core/Landing/template.html

@@ -39,7 +39,7 @@
                 :class="$style.listButton"
                 v-on:click.stop="dataModel.addView(node.id)"
               >
-                <v-icon small>add</v-icon>
+                <v-icon small>{{ $vuetify.icons.simput.add }}</v-icon>
               </v-btn>
             </v-list-tile-title>
           </v-list-tile-content>
@@ -68,7 +68,7 @@
                   small
                   :title="child.invalid"
                 >
-                  warning
+                  {{ $vuetify.icons.simput.warning }}
                 </v-icon>
                 <v-btn
                   v-if="child.clonable"
@@ -79,7 +79,7 @@
                   :class="$style.listButton"
                   v-on:click.stop="dataModel.cloneView(child.id, child.index)"
                 >
-                  <v-icon small>content_copy</v-icon>
+                  <v-icon small>{{ $vuetify.icons.simput.contentCopy }}</v-icon>
                 </v-btn>
                 <v-btn
                   v-if="!child.noDelete"
@@ -89,7 +89,7 @@
                   :class="$style.listButton"
                   v-on:click.stop="dataModel.deleteView(child.id, child.index)"
                 >
-                  <v-icon small>delete</v-icon>
+                  <v-icon small>{{ $vuetify.icons.simput.delete }}</v-icon>
                 </v-btn>
               </v-list-tile-title>
             </v-list-tile-content>

src/components/core/WorkflowMenu/template.html

@@ -19,7 +19,7 @@
         small
         @click="addValue"
       >
-        <v-icon small>add</v-icon>
+        <v-icon small>{{ $vuetify.icons.simput.add }}</v-icon>
       </v-btn>
     </v-flex>
   </v-layout>
@@ -48,7 +48,7 @@
           small
           @click="onChange(null, i-1)"
         >
-          <v-icon small>delete</v-icon>
+          <v-icon small>{{ $vuetify.icons.simput.delete }}</v-icon>
         </v-btn>
       </v-flex>
     </template>