demo(vue): update and fix material icons

Author: farfromrefug

demo-snippets/package.json

@@ -18,6 +18,7 @@
         "postinstall": "node postinstall.js"
     },
     "dependencies": {
+        "@mdi/font": "6.5.95",
         "@nativescript-community/ui-material-activityindicator": "file:../packages/activityindicator",
         "@nativescript-community/ui-material-bottom-navigation": "file:../packages/bottom-navigation",
         "@nativescript-community/ui-material-bottomnavigationbar": "file:../packages/bottomnavigationbar",
@@ -36,12 +37,12 @@
         "@nativescript-community/ui-material-tabs": "file:../packages/tabs",
         "@nativescript-community/ui-material-textfield": "file:../packages/textfield",
         "@nativescript-community/ui-material-textview": "file:../packages/textview",
-        "@mdi/font": "6.5.95",
-        "@nativescript/hook": "~2.0.0"
+        "@nativescript/hook": "~2.0.0",
+        "copy-webpack-plugin": "^10.2.4"
     },
     "devDependencies": {
         "nativescript-vue-template-compiler": "~2.9.0",
         "scss-symbols-parser": "^2.0.1",
         "string-replace-loader": "^3.1.0"
     }
-}
+}

demo-snippets/vue/BottomNavigationBar.vue

@@ -5,33 +5,33 @@
         </ActionBar>
         <GridLayout class="page" backgroundColor="white" rows="*, auto">
             <MDTabs row="0" :selectedIndex="currentTab" swipeEnabled="false">
-            <MDTabContentItem>
-                <GridLayout class="p-20" >
-                    <Label class="h1 text-center" text="First tab" textWrap="true"></Label>
-                    <Button text="select sthird" @tap="selectThird" horizontalAlignment="center" verticalAlignment="bottom" />
-                </GridLayout>
-            </MDTabContentItem>
-            <MDTabContentItem>
-                <GridLayout class="p-20">
-                    <Label class="h1 text-center" text="Third tab" textWrap="true"></Label>
-                </GridLayout>
-            </MDTabContentItem>
+                <MDTabContentItem>
+                    <GridLayout class="p-20">
+                        <Label class="h1 text-center" text="First tab" textWrap="true"></Label>
+                        <Button text="select sthird" @tap="selectThird" horizontalAlignment="center" verticalAlignment="bottom" />
+                    </GridLayout>
+                </MDTabContentItem>
+                <MDTabContentItem>
+                    <GridLayout class="p-20">
+                        <Label class="h1 text-center" text="Third tab" textWrap="true"></Label>
+                    </GridLayout>
+                </MDTabContentItem>
             </MDTabs>
             <MDBottomNavigationBar
                 ref="bottomBar"
                 row="1"
                 activeColor="blue"
                 inactiveColor="green"
                 selectedTabIndex="2"
-                 class="mdi"
+                class="mdi"
                 @loaded="onbottomNavigationBarLoaded"
                 @tabPressed="onBottomNavigationTabPressed"
                 @tabSelected="onBottomNavigationTabSelected"
                 @tabReselected="onBottomNavigationTabReselected"
             >
-                <MDBottomNavigationTab title="First" activeColor="green" />
-                <MDBottomNavigationTab title="Second" icon="font://mdi-account" isSelectable="false" class="mdi" />
-                <MDBottomNavigationTab title="Third" icon="res://ic_menu" inactiveColor="brown" />
+                <MDBottomNavigationTab title="First" activeColor="green" class="mdi" />
+                <MDBottomNavigationTab title="Second" icon="font://mdi-account" class="mdi" />
+                <MDBottomNavigationTab title="Third" icon="res://ic_menu" inactiveColor="brown" isSelectable="false" />
             </MDBottomNavigationBar>
         </GridLayout>
     </Page>
@@ -50,7 +50,7 @@ export default Vue.extend({
     name: 'BottomNavigationBar',
     data() {
         return {
-            title: title,
+            title,
             currentTab: 0
         };
     },

demo-snippets/webpack.config.vue.js

@@ -1,6 +1,6 @@
-// const webpack = require('@nativescript/webpack');
 const NsVueTemplateCompiler = require('nativescript-vue-template-compiler');
 const { readFileSync } = require('fs');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const { resolve } = require('path');
 function fixedFromCharCode(codePt) {
@@ -61,5 +61,15 @@ module.exports = (env, webpack) => {
                 },
                 flags: 'g'
             });
+        config.plugin('material-font').use(CopyWebpackPlugin, [
+            {
+                patterns: [
+                    {
+                        from: resolve(__dirname, 'node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf'),
+                        to: 'fonts'
+                    }
+                ]
+            }
+        ]);
     });
 };