switch bootstrap icons with mdijs

.vscode/settings.json

@@ -29,6 +29,7 @@
     "insta",
     "letterboxed",
     "manjaro",
+    "mdijs",
     "minification",
     "mitigations",
     "nogrow",

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@mdi/js": "^6.3.95",
     "@types/chrome": "0.0.129",
     "@types/core-js": "^2.5.3",
     "@types/es6-promise": "^3.3.0",
@@ -32,13 +33,12 @@
     "@vue/cli": "^4.5.9",
     "@vue/cli-plugin-typescript": "^4.5.11",
     "bootstrap": "^4.5.3",
-    "bootstrap-icons": "^1.1.0",
-    "bootstrap-icons-vue": "^0.3.0",
     "bootstrap-vue": "^2.20.1",
     "concurrently": "^5.2.0",
     "fs-extra": "^7.0.1",
     "json-cyclic": "0.0.3",
     "lodash": "^4.17.21",
+    "mdi-vue": "^3.0.8",
     "typescript": "^4.2.3",
     "vue": "^3.0.0-beta.1",
     "vuex": "^4.0.0-alpha.1",

src/csui/LoggerUi.vue

@@ -37,7 +37,7 @@
             Default config
           </div>
           <div v-if="!showTextMode" class="button" @click="showTextMode = true">
-            <Icon icon="clipboard-plus" style="font-size: 2em"></Icon>&nbsp; Paste config ...
+            <!-- <Icon icon="clipboard-plus" style="font-size: 2em"></Icon>&nbsp; Paste config ... -->
           </div>
           <div v-else class="button" @click="showTextMode = false">
             Back
@@ -172,12 +172,12 @@ import Logger, { baseLoggingOptions } from '../ext/lib/Logger';
 import Comms from '../ext/lib/comms/Comms';
 import IO from '../common/js/IO';
 import JsonObject from '../common/components/JsonEditor/JsonObject';
-import Icon from '../common/components/Icon';
+// import Icon from '../common/components/Icon';
 
 export default {
   components: {
     JsonObject,
-    Icon,
+    // Icon,
   },
   data() {
     return {

src/csui/NotificationUi.vue

@@ -24,7 +24,8 @@
             :key="action"
             @click="action.command"
           >
-            <Icon v-if="action.icon" :icon="action.icon"></Icon>{{action.label}}
+            <!-- <Icon v-if="action.icon" :icon="action.icon"></Icon> -->
+            {{action.label}}
           </div>
         </div>
         <div
@@ -52,11 +53,11 @@
         class="notification-icon action-button"
           @click="closeNotification()"
       >
-        <Icon
+        <!-- <Icon
           class="flex-nogrow flex-noshrink"
           icon="x"
         >
-        </Icon>
+        </Icon> -->
       </div>
     </div>
   </div>
@@ -64,11 +65,11 @@
 
 <script>
 import { mapState } from 'vuex';
-import Icon from '../common/components/Icon';
+// import Icon from '../common/components/Icon';
 
 export default {
   components: {
-    Icon,
+    // Icon,
   },
   data() {
     return {

src/csui/PlayerUiComponent.vue

@@ -34,7 +34,7 @@
 <script>
 import VideoSettings from './PlayerUiPanels/VideoSettings.vue'
 import { mapState } from 'vuex';
-import Icon from '../common/components/Icon';
+// import Icon from '../common/components/Icon';
 import ResizerDebugPanel from './PlayerUiPanels/ResizerDebugPanelComponent';
 import BrowserDetect from '../ext/conf/BrowserDetect';
 import ExecAction from './ui-libs/ExecAction';
@@ -43,7 +43,7 @@ import Settings from '../ext/lib/Settings';
 
 export default {
   components: {
-    Icon,
+    // Icon,
     ResizerDebugPanel, VideoSettings
   },
   data() {

src/csui/PlayerUiPanels/ResizerDebugPanelComponent.vue

@@ -11,7 +11,9 @@
             <small>(Inner size)</small>
           </div>
           <div class="data">{{windowWidth}} x {{windowHeight}}</div>
-          <div class="button" @click="refreshWindowSize()"><Icon icon="arrow-clockwise"></Icon> Refresh</div>
+          <div class="button" @click="refreshWindowSize()">
+            <!-- <Icon icon="arrow-clockwise"></Icon> -->
+            Refresh</div>
         </div>
         <div class="data-item">
           <div class="data-title">Player dimensions:</div>
@@ -94,11 +96,11 @@
 </template>
 
 <script>
-import Icon from '../../common/components/Icon';
+// import Icon from '../../common/components/Icon';
 
 export default {
   components: {
-    Icon,
+    // Icon,
   },
   props: {
     debugData: Object

src/ext/lib/uwui/UI.js

@@ -1,5 +1,7 @@
 import { createApp } from 'vue';
 import { createStore } from 'vuex';
+import mdiVue from 'mdi-vue/v3';
+import * as mdijs from '@mdi/js';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading: UI");
@@ -56,7 +58,7 @@ class UI {
 
     this.element = rootDiv;
 
-    const app = createApp(this.uiConfig.component);
+    const app = createApp(this.uiConfig.component).use(mdiVue, {icons: mdijs});
     if (this.vuexStore) {
       app.use(this.vuexStore);
     }

src/ext/uw-ui.js

@@ -9,6 +9,8 @@ import Logger from './lib/Logger';
 import Settings from './lib/Settings';
 import CommsClient from './lib/comms/CommsClient';
 import Comms from './lib/comms/Comms';
+import mdiVue from 'mdi-vue/v3';
+import * as mdijs from '@mdi/js';
 
 class UwUi {
 
@@ -189,6 +191,7 @@ class UwUi {
     try {
       createApp(LoggerUi)
         .use(this.vuexStore)
+        .use(mdiVue, {icons: mdijs})
         .mount(`#${uwid}`);
 
       // new Vue({

src/options/options.js

@@ -1,4 +1,6 @@
 import { createApp } from 'vue';
 import App from './App';
+import mdiVue from 'mdi-vue/v3';
+import * as mdijs from '@mdi/js';
 
-createApp(App).mount('#app');
+createApp(App).mount('#app').use(mdiVue, {icons: mdijs});

src/popup/App.vue

@@ -25,8 +25,8 @@
       class="w100 show-more flex flex-row flex-center flex-cross-center menu-button"
       @click="toggleSideMenu()"
     >
-      <Icon v-if="!sideMenuVisible" icon="list" />
+      <!-- <Icon v-if="!sideMenuVisible" icon="list" /> -->
-      <Icon v-else icon="x" />
+      <!-- <Icon v-else icon="x" /> -->
       <div>Menu</div>
     </div>
     <div class="flex flex-row body no-overflow flex-grow">
@@ -195,7 +195,6 @@
 </template>
 
 <script>
-import Icon from '../common/components/Icon.vue'
 import WhatsNewPanel from './panels/WhatsNewPanel.vue';
 import SiteDetailsPanel from './panels/SiteDetailsPanel.vue';
 import Donate from '../common/misc/Donate.vue';

src/popup/popup.js

@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
 import App from './App';
+import mdiVue from 'mdi-vue/v3';
+import * as mdijs from '@mdi/js';
 
-createApp(App).mount('#app');
+createApp(App).mount('#app').use(mdiVue, {icons: mdijs});

webpack.config.js

@@ -93,9 +93,6 @@ const config = {
       // we need to get webextension-polyfill and put it in common/lib
       { from: '../node_modules/webextension-polyfill/dist/browser-polyfill.js', to: 'common/lib/browser-polyfill.js'},
 
-      // This is a hack to get bootstrap icons svg file in /res/icons
-      { from: '../node_modules/bootstrap-icons/bootstrap-icons.svg', to: 'res/icons/bootstrap-icons.svg'},
-
       // This is extension icon, as used on extension lists and/or extension's action button
       // This folder does not contain any GUI icons — these are in /res/icons.
       // (TODO: check if this copy is even necessary — /icons has same content as /res/icons)