New icon system working with login form and tested in app.vue with hamburger and vertical ellipsis; just need to roll out throughout the app and import each icon individually.

2020-10-05 19:12:10 +00:00
parent 9ba997d104
commit 9da213f478
6 changed files with 101 additions and 21 deletions
--- a/ayanova/package-lock.json
+++ b/ayanova/package-lock.json
@@ -3099,11 +3099,39 @@
        }
      }
    },
-    "@fortawesome/fontawesome-free": {
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.31",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.31.tgz",
+      "integrity": "sha512-xfnPyH6NN5r/h1/qDYoGB0BlHSID902UkQzxR8QsoKDh55KAPr8ruAoie12WQEEQT8lRE2wtV7LoUllJ1HqCag=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.31",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.31.tgz",
+      "integrity": "sha512-lqUWRK+ylHQJG5Kiez4XrAZAfc7snxCc+X59quL3xPfMnxzfyf1lt+/hD7X1ZL4KlzAH2KFzMuEVrolo/rAkog==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.31"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.0.tgz",
-      "integrity": "sha512-wXetjQBNMTP59MAYNR1tdahMDOLx3FYj3PKdso7PLFLDpTvmAIqhSSEqnSTmWKahRjD+Sh5I5635+5qaoib5lw==",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.0.tgz",
+      "integrity": "sha512-kgdP2N5sFjzs5+XFZTsz8KNJjXm/851Gtjh8FcG+gpzN4weN/pd9S1jrf1e+2naWughHUzo7AKAzFB2CodpJ3g==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.31"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.0.tgz",
+      "integrity": "sha512-4dGRsOnGBPM7c0fd3LuiU6LgRSLn01rw1LJ370yC2iFMLUcLCLLynZhQbMhsiJmMwQM/YmPQblAdyHKVCgsIAA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.31"
+      }
+    },
+    "@fortawesome/vue-fontawesome": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.0.tgz",
+      "integrity": "sha512-N3VKw7KzRfOm8hShUVldpinlm13HpvLBQgT63QS+aCrIRLwjoEUXY5Rcmttbfb6HkzZaeqjLqd/aZCQ53UjQpg=="
    },
    "@hapi/address": {
      "version": "2.1.4",
--- a/ayanova/package.json
+++ b/ayanova/package.json
@@ -13,6 +13,10 @@
    "myLint": "npm run lint"
  },
  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.31",
+    "@fortawesome/free-regular-svg-icons": "^5.15.0",
+    "@fortawesome/free-solid-svg-icons": "^5.15.0",
+    "@fortawesome/vue-fontawesome": "^2.0.0",
    "chart.js": "^2.9.3",
    "chartjs-adapter-luxon": "^0.2.2",
    "core-js": "^3.6.5",
@@ -36,7 +40,6 @@
  },
  "devDependencies": {
    "@cypress/webpack-preprocessor": "^4.1.5",
-    "@fortawesome/fontawesome-free": "^5.15.0",
    "@vue/cli-plugin-babel": "^4.5.6",
    "@vue/cli-plugin-e2e-cypress": "^4.5.6",
    "@vue/cli-plugin-eslint": "^4.5.6",
--- a/ayanova/src/App.vue
+++ b/ayanova/src/App.vue
@@ -197,7 +197,7 @@
              v-on="on"
              :data-cy="!!$ay.dev ? 'contextmenu' : false"
            >
-              <v-icon>fa-ellipsis-v</v-icon>
+              <v-icon>$ayiEllipsisV</v-icon>
            </v-btn>
          </template>
          <v-list>
--- a/ayanova/src/main.js
+++ b/ayanova/src/main.js
@@ -1,5 +1,5 @@
 /* Xeslint-disable */
-import "@fortawesome/fontawesome-free/css/all.css";
+// import "@fortawesome/fontawesome-free/css/all.css";
 import "typeface-roboto/index.css";
 import "github-markdown-css";
 import Vue from "vue";
--- a/ayanova/src/plugins/vuetify.js
+++ b/ayanova/src/plugins/vuetify.js
@@ -1,8 +1,62 @@
 /* xeslint-disable */
-// import "@fortawesome/fontawesome-free/css/all.css"; // Ensure you are using css-loader
+
 import Vue from "vue";
 import Vuetify from "vuetify/lib";
-//import myLang from "../api/en";
+
+//---------------------------
+//ICONS
+//tree shaking compatible icon method
+//https://stackoverflow.com/a/58261449/8939
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+Vue.component("font-awesome-icon", FontAwesomeIcon); // Register component globally
+import {
+  faBars,
+  faUser,
+  faEllipsisV,
+  faKey,
+  faQuestionCircle
+} from "@fortawesome/free-solid-svg-icons";
+//import { faUserCircle as farUserCircle } from "@fortawesome/free-regular-svg-icons";
+Vue.component("font-awesome-icon", FontAwesomeIcon);
+
+library.add(faBars, faKey, faQuestionCircle, faUser, faEllipsisV);
+
+const CUSTOM_ICONS = {
+  ayiQuestionCircle: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "question-circle"]
+    }
+  },
+  ayiEllipsisV: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "ellipsis-v"]
+    }
+  },
+  ayiKey: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "key"]
+    }
+  },
+  ayiUser: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "user"]
+    }
+  },
+  menu: {
+    // used for the nav-icon by vuetify
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "bars"]
+    }
+  }
+};
+//-------------

 Vue.use(Vuetify);

@@ -39,13 +93,7 @@ export default new Vuetify({
    }
  },
  icons: {
-    iconfont: "fa"
+    iconfont: "faSvg",
+    values: CUSTOM_ICONS
  }
 });
-
-// export default new Vuetify({
-//   lang: {
-//     locales: { zhHans, pl, sv },
-//     current: 'zhHans',
-//   },
-// })
--- a/ayanova/src/views/login.vue
+++ b/ayanova/src/views/login.vue
@@ -49,7 +49,7 @@
                item-text="name"
                item-value="l"
                label="Trial mode example users"
-                prepend-icon="fa-question-circle"
+                prepend-icon="$ayiQuestionCircle"
                @click:prepend="trialHelpClick"
                @input="trialUserSelected"
                return-object
@@ -57,12 +57,12 @@
              >
              </v-select>
            </v-col>
-            <v-col cols="12" md="7">
+            <v-col cols="12" md="7">           
              <v-text-field
                name="username"
                id="username"
                v-model="input.username"
-                prepend-icon="fa-user"
+                prepend-icon="$ayiUser"
                autofocus
                autocomplete="off"
                autocorrect="off"
@@ -79,7 +79,7 @@
                id="password"
                v-model="input.password"
                :append-outer-icon="reveal ? 'fa-eye' : 'fa-eye-slash'"
-                prepend-icon="fa-key"
+                prepend-icon="$ayiKey"
                :type="reveal ? 'text' : 'password'"
                :error="errorBadCreds"
                v-on:keyup.enter="login"
@@ -273,6 +273,7 @@ export default {
  },
  async created() {
    let vm = this;
+    //debugger;
    vm.smallLogoUrl = window.$gz.api.logoUrl("small");
    vm.mediumLogoUrl = window.$gz.api.logoUrl("medium");
    //------------------