use octicons instead of bootstrap's

src/components/Board/AddList.vue

@@ -2,10 +2,11 @@
   <b-button
     v-b-modal="modalId"
     :title="$t('board.addList.title')"
+    size="sm"
     v-b-tooltip.hover.left
     ref="addList"
   >
-    <b-icon-plus />
+    <icon name="plus" white />
 
     <b-modal
       :id="modalId"

src/components/Game/AddRemoveGame.vue

@@ -6,7 +6,7 @@
     v-b-tooltip.hover
     @click="addGame"
   >
-    <b-icon-plus />
+    <icon name="plus" white />
   </b-button>
 
   <b-button
@@ -16,7 +16,7 @@
     :title="$t('board.gameModal.removeFromList')"
     @click="removeGame"
   >
-    <b-icon-trash />
+    <icon name="trash" white />
   </b-button>
 </template>
 

src/components/Game/GameNotes.vue

@@ -5,7 +5,7 @@
     v-b-tooltip.hover
     title="Game notes"
    >
-    <b-icon-file-earmark-text />
+    <icon name="note" white />
 
     <b-modal
       id="notes"

src/components/Game/GameProgress.vue

@@ -5,7 +5,7 @@
     variant="info"
     title="Set game progress"
   >
-    <b-icon-clock-history />
+    <icon name="clock" white />
 
     <b-modal
       id="progress"

src/components/Game/GameTags.vue

@@ -5,7 +5,7 @@
     v-b-tooltip.hover
     title="Apply tags"
    >
-    <b-icon-tag />
+    <icon name="tag" white />
 
     <b-popover
       target="tags-popover"
@@ -46,7 +46,7 @@
             size="sm"
             @click="removeTag(name)"
           >
-            <b-icon-trash />
+            <icon name="dash" />
           </b-button>
 
           <b-button
@@ -55,7 +55,7 @@
             size="sm"
             @click="addTag(name)"
           >
-            <b-icon-plus font-scale="1" />
+            <icon name="plus" />
           </b-button>
 
         </b-list-group-item>

src/components/GameCards/GameCardCompact.vue

@@ -2,10 +2,9 @@
   <b-card no-body class="clickable mb-2" @click="openDetails">
     <b-row no-gutters v-if="game && game.name">
       <b-col cols="3">
-        <b-icon-check-circle
+        <icon name="check-circle"
+          white
           class="position-absolute rounded bg-success p-1 m-1"
-          variant="white"
-          font-scale="1.5"
           v-if="showCompletedBadge"
         />
 
@@ -27,7 +26,7 @@
             {{ game.name }}
 
             <b-badge variant="warning" v-if="gameNotes">
-              <b-icon-file-earmark-text />
+              <icon name="note" />
             </b-badge>
           </b-card-title>
 

src/components/GameCards/GameCardDefault.vue

@@ -5,10 +5,10 @@
       v-if="game && game.name"
     >
       <b-col cols="4">
-        <b-icon-check-circle
+        <icon
+          name="verified"
+          white
           class="position-absolute rounded bg-success p-1 m-1"
-          variant="white"
-          font-scale="1.5"
           v-if="showCompletedBadge"
         />
 
@@ -29,7 +29,7 @@
             {{ game.name }}
 
             <b-badge variant="warning" v-if="gameNotes">
-              <b-icon-file-earmark-text />
+              <icon name="note" />
             </b-badge>
           </b-card-title>
 

src/components/GameCards/GameCardGrid.vue

@@ -8,10 +8,10 @@
   >
     <b-card-body body-class="p-2" v-if="game && game.name">
       <b-card-title class="mb-0" title-tag="h6">
-        <b-icon-check-circle
+        <icon
+          name="verified"
           class="rounded bg-success p-1"
-          variant="white"
+          white
-          font-scale="1.5"
           v-if="showCompletedBadge"
         />
 
@@ -61,7 +61,7 @@
       </template>
 
       <b-badge variant="warning" v-if="gameNotes">
-        <b-icon-file-earmark-text />
+        <icon name="note" />
       </b-badge>
     </b-card-body>
   </b-card>

src/components/GameCards/GameCardText.vue

@@ -3,9 +3,10 @@
     <b-row no-gutters v-if="game && game.name">
         <b-card-body body-class="pt-0 pb-1 px-2">
           <small>
-            <b-icon-check-circle
+            <icon
+              name="verified"
               class="rounded bg-success p-1"
-              variant="white"
+              white
               font-scale="1.5"
               v-if="showCompletedBadge"
             />
@@ -13,7 +14,7 @@
             {{ game.name }}
 
             <b-badge variant="warning" v-if="gameNotes">
-              <b-icon-file-earmark-text />
+              <icon name="note" />
             </b-badge>
           </small>
 

src/components/Icon.vue

@@ -0,0 +1,43 @@
+<template lang="html">
+  <img
+    :src="`static/octicons/${name}.svg`"
+    :class="{ white, animated, small }"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: 'sun',
+    },
+    white: Boolean,
+    animated: Boolean,
+    small: Boolean,
+  },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+@keyframes spin {
+    from { transform:rotate(0deg); }
+    to { transform:rotate(360deg); }
+}
+
+img {
+  &.white {
+    filter: invert(1);
+  }
+
+  &.small {
+    width: 16px;
+    height: 16px;
+  }
+
+  &.animated {
+    animation: spin 500ms linear infinite;
+    transform:rotate(360deg);
+  }
+}
+</style>

src/components/Lists/AddGameModal.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <b-dropdown-item-button @click="$bvModal.show(`game-modal-${list.name}`)">
-    <b-icon-plus class="mr-1" />
+    <icon name="plus" />
     {{ $t('board.addGame.title') }}
 
     <b-modal
@@ -20,8 +20,11 @@
 
           <b-input-group-append>
             <b-button variant="primary" @click="search">
-              <b-spinner v-if="loading" small />
+              <icon
-              <b-icon-search v-else />
+                :name="loading ? 'sync' : 'search'"
+                :animated="loading"
+                white
+              />
             </b-button>
           </b-input-group-append>
         </b-input-group>

src/components/Lists/ChangeListView.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <b-dropdown-item-button v-b-modal="modalId">
-    <b-icon-grid1x2 class="mr-1" />
+    <icon name="versions" />
     {{ $t('board.list.view') }}
 
     <b-modal

src/components/Lists/List.vue

@@ -9,14 +9,14 @@
         :header-bg-variant="showDuplicateWarning ? 'warning' : null"
       >
         <h6 class="m-0" v-b-modal="`rename-list-${listIndex}`">
-          <b-badge v-if="autoSortEnabled">
-            <b-icon-sort-up />
-          </b-badge>
-
           <b-badge v-if="showGameCount">
               {{ list.games.length }}
           </b-badge>
 
+          <b-badge v-if="autoSortEnabled">
+            <icon small white name="list-ordered" />
+          </b-badge>
+
           {{ showDuplicateWarning ? 'Game already in list' : list.name }}
         </h6>
 

src/components/Lists/ListPreferences.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <b-dropdown-item-button v-b-modal="modalId">
-    <b-icon-toggles class="mr-1" />
+    <icon name="tools" />
     {{ $t('board.list.settings') }}
 
     <b-modal

src/components/Lists/ListSettings.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <b-dropdown size="sm" class="m-1" right>
+  <b-dropdown size="sm" class="m-1" right variant="transparent">
     <add-game-modal :list="list" />
     <b-dd-divider />
     <sort-list :list="list" :list-index="listIndex" />
@@ -13,18 +13,20 @@
           v-b-tooltip.hover
           :title="$t('board.list.moveLeft')"
           :disabled="isFirst"
+          variant="light"
           @click="moveList(listIndex, listIndex - 1)"
         >
-          <b-icon-arrow-left-short />
+          <icon name="triangle-left" />
         </b-button>
 
         <b-button
           v-b-tooltip.hover
           :title="$t('board.list.moveRight')"
           :disabled="isLast"
+          variant="light"
           @click="moveList(listIndex, listIndex + 1)"
         >
-          <b-icon-arrow-right-short />
+          <icon name="triangle-right" />
         </b-button>
       </b-button-group>
     </b-dropdown-item>
@@ -34,7 +36,7 @@
       variant="outline-danger"
       @click="promptDeleteList"
     >
-      <b-icon-trash class="mr-1" />
+      <icon name="trash" />
       {{ $t('board.list.delete') }}
     </b-dropdown-item>
   </b-dropdown>

src/components/Lists/RenameList.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <b-dropdown-item-button v-b-modal="modalId">
-    <b-icon-pencil class="mr-1" />
+    <icon name="pencil" />
     {{ $t('board.list.renameList') }}
 
     <b-modal

src/components/Lists/SortList.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <b-dropdown-item-button v-b-modal="modalId">
-    <b-icon-sort-up class="mr-1" />
+    <icon name="list-ordered" />
     {{ $t('board.list.sortList') }}
 
     <b-modal

src/components/PageHeader.vue

@@ -11,10 +11,10 @@
         right
         no-caret
         boundary="viewport"
-        variant="link"
+        variant="transparent"
       >
         <template v-slot:button-content>
-          <b-icon-arrow-left-right />
+          <icon name="arrow-switch" />
         </template>
 
         <b-dropdown-item
@@ -34,37 +34,38 @@
         right
         no-caret
         boundary="viewport"
-        variant="link"
+        variant="transparent"
       >
         <template v-slot:button-content>
-          <b-icon-gear />
+          <icon name="gear" />
         </template>
 
         <b-dropdown-item title="Tags" :to="{ name: 'tags' }">
-          <b-icon-tags />
+          <icon name="tag" />
+
           {{ $t('settings.tags') }}
         </b-dropdown-item>
 
         <b-dropdown-item title="Wallpapers" :to="{ name: 'wallpapers' }">
-          <b-icon-file-richtext />
+          <icon name="image" />
           {{ $t('settings.wallpapers') }}
         </b-dropdown-item>
 
         <b-dropdown-item title="Language" :to="{ name: 'language' }">
-          <b-icon-chat-left-text />
+          <icon name="globe" />
           {{ $t('settings.language') }}
         </b-dropdown-item>
         <b-dropdown-item title="Themes" :to="{ name: 'themes' }">
-          <b-icon-droplet />
+          <icon name="sun" />
           {{ $t('settings.themes') }}
         </b-dropdown-item>
         <b-dropdown-item title="Releases" :to="{ name: 'releases' }">
-          <b-icon-mailbox />
+          <icon name="megaphone" />
           {{ $t('settings.releases') }}
         </b-dropdown-item>
 
         <b-dropdown-item title="About" :to="{ name: 'about' }">
-          <b-icon-question />
+          <icon name="info" />
           {{ $t('settings.about') }}
         </b-dropdown-item>
       </b-dropdown>

src/components/Settings/BoardSettings.vue

@@ -4,9 +4,10 @@
     v-b-tooltip.hover.left
     title="Board settings"
     class="mt-3"
+    size="sm"
     ref="addList"
   >
-    <b-icon-gear-fill />
+    <icon name="gear" white />
 
     <b-modal
       id="board-settings"

src/i18n/en.json

@@ -103,9 +103,9 @@
             "addGames": "Add games to {listName}",
             "view": "List view",
             "moveList": "Move list",
-            "renameList": "Rename list",
+            "renameList": "Rename",
             "renameListPlaceholder": "Enter your name",
-            "sortList": "Auto sort list",
+            "sortList": "Sort",
             "sortWarning": "Auto sorting list will affect how drag and drop works",
             "coversSizeTitle": "Covers across",
             "showReleaseDates": "Show release date for unreleased games",

src/main.js

@@ -1,9 +1,10 @@
 import Vue from 'vue';
-import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
+import { BootstrapVue } from 'bootstrap-vue';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
 import VueAxios from 'vue-axios';
 import VueFire from 'vuefire';
 import VueI18n from 'vue-i18n';
+import Icon from '@/components/Icon';
 import axios from 'axios';
 import VueAnalytics from 'vue-analytics';
 import Raven from 'raven-js';
@@ -25,12 +26,11 @@ Object.defineProperties(Vue.prototype, {
 });
 
 Vue.use(BootstrapVue, bootstrapSettings);
-
-Vue.use(BootstrapVueIcons);
 Vue.use(VueAnalytics, { id: 'UA-120053966-1', router });
 Vue.use(VueAxios, axios);
 Vue.use(VueFire);
 Vue.use(VueI18n);
+Vue.component('icon', Icon);
 
 if (process.env.NODE_ENV !== 'development') {
   Raven
@@ -53,10 +53,6 @@ const vuexStorage = localStorage && localStorage.vuex
   ? JSON.parse(localStorage.vuex)
   : {};
 
-if (vuexStorage.settings && vuexStorage.settings.theme && vuexStorage.settings.theme.cssCdn) {
-  document.querySelector('link[rel="stylesheet"').href = vuexStorage.settings.theme.cssCdn;
-}
-
 if (vuexStorage && vuexStorage.user && window.FS && window.location.origin.indexOf('localhost') === -1) {
   const { displayName, email, dateJoined } = vuexStorage.user;
 

src/pages/Auth.vue

@@ -2,8 +2,8 @@
   <b-overlay show no-center no-wrap>
     <template v-slot:overlay>
       <div class="text-center p-4">
-        <b-icon-arrow-clockwise font-scale="3" animation="spin" />
+        <icon name="sync" animated />
-        <p id="cancel-label">Please wait...</p>
+        <p>Please wait...</p>
       </div>
     </template>
   </b-overlay>

src/pages/Tags.vue

@@ -94,14 +94,14 @@
                   variant="primary"
                   @click="editTag(name)"
                 >
-                  <b-icon-pencil />
+                  <icon name="pencil" white />
                 </b-button>
 
                 <b-button
                   variant="danger"
                   @click="deleteTag(name)"
                 >
-                  <b-icon-trash />
+                  <icon name="trash" white />
                 </b-button>
               </div>
             </b-list-group-item>

src/pages/Wallpapers.vue

@@ -70,7 +70,7 @@
               size="sm"
               @click="confirmDeleteWallpaper(wallpaper)"
             >
-              <b-icon-trash />
+              <icon name="trash" white />
             </b-button>
           </b-card>
         </b-col>