diff --git a/ayanova/package-lock.json b/ayanova/package-lock.json index 77149525..e3cc0d83 100644 --- 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", diff --git a/ayanova/package.json b/ayanova/package.json index af007b81..ec33257b 100644 --- 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", diff --git a/ayanova/src/App.vue b/ayanova/src/App.vue index 8c9fa1c1..ae1735f3 100644 --- a/ayanova/src/App.vue +++ b/ayanova/src/App.vue @@ -197,7 +197,7 @@ v-on="on" :data-cy="!!$ay.dev ? 'contextmenu' : false" > - fa-ellipsis-v + $ayiEllipsisV diff --git a/ayanova/src/main.js b/ayanova/src/main.js index df045ee8..9fb3cea9 100644 --- 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"; diff --git a/ayanova/src/plugins/vuetify.js b/ayanova/src/plugins/vuetify.js index 9b4e7fe5..0f657e20 100644 --- 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', -// }, -// }) diff --git a/ayanova/src/views/login.vue b/ayanova/src/views/login.vue index f6f6ee33..df52454c 100644 --- 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 @@ > - +