Use vue-svg-loader and upgrade Vue CLI

jest.config.js

@@ -7,9 +7,10 @@ module.exports = {
     // process `*.vue` files with `vue3-jest`
     ".*\\.(vue)$": "@vue/vue3-jest"
   },
-  // Ignore CSS files since Jest doesn't know what to do with them and doesn't need them.
+  // Ignore CSS and SVG files since Jest doesn't know what to do with them and doesn't need them.
   moduleNameMapper: {
-    "\\.(css|scss)$": "<rootDir>/tests/mocks/styleMock.ts"
+    "\\.(css|scss)$": "<rootDir>/tests/mocks/styleMock.ts",
+    '^.+\\.svg$': "<rootDir>/tests/mocks/styleMock.ts"
   },
   collectCoverage: true,
   collectCoverageFrom: [

package.json

@@ -20,6 +20,7 @@
     "vue": "^3.2.33",
     "vue-router": "^4.0.15",
     "vue-select-connorshea": "3.12.1",
+    "vue-svg-loader": "^0.17.0-beta.2",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
@@ -36,19 +37,18 @@
     "@types/vue-select": "^3.11.1",
     "@typescript-eslint/eslint-plugin": "^4.25.0",
     "@typescript-eslint/parser": "^4.25.0",
-    "@vue/cli-plugin-babel": "5.0.0-beta.6",
-    "@vue/cli-plugin-eslint": "5.0.0-beta.6",
-    "@vue/cli-plugin-router": "5.0.0-beta.6",
-    "@vue/cli-plugin-typescript": "5.0.0-beta.6",
-    "@vue/cli-plugin-unit-jest": "5.0.0-beta.6",
-    "@vue/cli-plugin-vuex": "5.0.0-beta.6",
-    "@vue/cli-service": "5.0.0-beta.6",
+    "@vue/cli-plugin-babel": "5.0.4",
+    "@vue/cli-plugin-eslint": "5.0.4",
+    "@vue/cli-plugin-router": "5.0.4",
+    "@vue/cli-plugin-typescript": "5.0.4",
+    "@vue/cli-plugin-unit-jest": "5.0.4",
+    "@vue/cli-plugin-vuex": "5.0.4",
+    "@vue/cli-service": "5.0.4",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^2.0.0-rc.21",
     "@vue/vue3-jest": "^27.0.0",
     "eslint": "^7.27.0",
     "eslint-plugin-vue": "^7.10.0",
-    "html-loader": "^1.3.2",
     "msw": "^0.30.0",
     "node-fetch": "^2.6.1",
     "sass": "^1.51.0",

src/components/AddGameToLibrary.vue

@@ -5,23 +5,29 @@
       @click="editGameInLibrary()"
       class="button is-fullwidth is-primary mr-5 mr-0-mobile"
     >
-      <svg-icon :name="'pencil'" :classes="['icon']" :fill="'white'" :size="15"/>
+      <svg-icon :name="'pencil'" :classes="['icon']" :fill="'white'" :size="15">
+        <pencil-icon/>
+      </svg-icon>
       <span>Edit game in library</span>
     </button>
     <button
       v-show="isInLibrary"
       @click="removeGameFromLibrary()"
       class="button is-fullwidth is-danger mr-5 mr-0-mobile"
     >
-      <svg-icon :name="'remove'" :classes="['icon']" :fill="'white'" :size="15"/>
+      <svg-icon :name="'remove'" :classes="['icon']" :fill="'white'" :size="15">
+        <remove-icon/>
+      </svg-icon>
       <span>Remove from library</span>
     </button>
     <button
       v-show="!isInLibrary"
       @click="addGameToLibrary()"
       class="button is-fullwidth is-primary mr-5 mr-0-mobile"
     >
-      <svg-icon :name="'plus'" :classes="['icon']" :fill="'white'"/>
+      <svg-icon :name="'plus'" :classes="['icon']" :fill="'white'">
+        <plus-icon/>
+      </svg-icon>
       <span>Add to library</span>
     </button>
 
@@ -41,13 +47,19 @@
 import { computed, defineComponent, PropType, ref } from 'vue';
 import GameModal from '@/components/GameModal.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
+import PlusIcon from '@/assets/icons/plus.svg';
+import PencilIcon from '@/assets/icons/pencil.svg';
+import RemoveIcon from '@/assets/icons/remove.svg';
 import { Game, GamePurchaseDocument, RemoveGameFromLibraryDocument } from '@/generated/graphql';
 import { useMutation, useQuery } from 'villus';
 
 export default defineComponent({
   name: 'AddGameToLibrary',
   components: {
     SvgIcon,
+    PencilIcon,
+    PlusIcon,
+    RemoveIcon,
     GameModal
   },
   props: {

src/components/EventCard.vue

@@ -63,7 +63,9 @@
                           :svg-classes="['has-fill-danger-hoverable']"
                           :css-style="'vertical-align: text-top;'"
                           :size="20"
-                />
+                >
+                  <trash-icon/>
+                </svg-icon>
               </a>
             </template>
           </p>
@@ -79,13 +81,15 @@ import { computed, defineComponent, PropType } from 'vue';
 import { format } from 'timeago.js';
 import { useMutation } from 'villus';
 import SvgIcon from '@/components/SvgIcon.vue';
+import TrashIcon from '@/assets/icons/trash.svg';
 import { useStore } from 'vuex';
 import { State } from '@/store';
 
 export default defineComponent({
   name: 'EventCard',
   components: {
-    SvgIcon
+    SvgIcon,
+    TrashIcon
   },
   props: {
     event: {

src/components/GameCard.vue

@@ -22,7 +22,9 @@
     <div class="dropdown dropdown-dynamic game-card-dropdown is-right" :class="{ 'is-active': isActive }" v-if="userSignedIn">
       <div class="dropdown-trigger">
         <button class="button is-borderless is-shadowless" aria-haspopup="true" aria-controls="dropdown-menu" @click="toggleActive">
-          <svg-icon :name="'chevron-down'" :classes="['icon']" :size="15" />
+          <svg-icon :name="'chevron-down'" :classes="['icon']" :size="15">
+            <chevron-down-icon/>
+          </svg-icon>
         </button>
       </div>
       <div class="dropdown-menu" id="dropdown-menu" role="menu">
@@ -39,14 +41,16 @@
 import { FavoriteGameDocument, Game, UnfavoriteGameDocument } from '@/generated/graphql';
 import { computed, defineComponent, PropType, ref } from 'vue';
 import SvgIcon from '@/components/SvgIcon.vue';
+import ChevronDownIcon from '@/assets/icons/chevron-down.svg';
 import { useMutation } from 'villus';
 import { useStore } from 'vuex';
 import { State } from '@/store';
 
 export default defineComponent({
   name: 'GameCard',
   components: {
-    SvgIcon
+    SvgIcon,
+    ChevronDownIcon
   },
   props: {
     game: {

src/components/NavBar.vue

@@ -2,7 +2,7 @@
   <nav class="navbar" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <router-link :to="{ name: 'Home' }" class="navbar-item has-text-weight-semibold" title="vglist Home">
-        <img src="@/assets/images/vglist-logo.svg" class="mt-5 navbar-logo" aria-hidden="true" alt="vglist logo">
+        <img :src="vglistLogoPath" class="mt-5 navbar-logo" aria-hidden="true" alt="vglist logo">
       </router-link>
       <!-- Hamburger menu for mobile -->
       <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
@@ -276,7 +276,8 @@ export default defineComponent({
       showAuthenticate,
       userSignedIn,
       currentUser,
-      navBarItems
+      navBarItems,
+      vglistLogoPath: `${process.env.BASE_URL}vglist-logo.svg`
     }
   },
   methods: {

src/components/Search.vue

@@ -14,7 +14,9 @@
           type="search"
           placeholder="Search"
         >
-        <svg-icon :name="'search'" :classes="['icon', 'is-small', 'is-left']"/>
+        <svg-icon :name="'search'" :classes="['icon', 'is-small', 'is-left']">
+          <search-icon/>
+        </svg-icon>
       </p>
     </div>
 
@@ -82,6 +84,7 @@
 import { cloneDeep, debounce } from 'lodash';
 import { computed, defineComponent, Ref, ref } from 'vue';
 import SvgIcon from '@/components/SvgIcon.vue';
+import SearchIcon from '@/assets/icons/search.svg';
 import { CompanySearchResult, EngineSearchResult, GameSearchResult, GenreSearchResult, GlobalSearchDocument, PlatformSearchResult, SearchResultUnion, SeriesSearchResult, UserSearchResult } from '@/generated/graphql';
 import { useQuery } from 'villus';
 import { useRouter } from 'vue-router';
@@ -111,7 +114,8 @@ const EMPTY_SEARCH_RESULTS: SearchResults = {
 export default defineComponent({
   name: 'Search',
   components: {
-    SvgIcon
+    SvgIcon,
+    SearchIcon
   },
   setup() {
     const query = ref('');

src/components/SortDropdown.vue

@@ -5,7 +5,9 @@
         <span data-test-id="active-sort-option">
           {{ sortText }}
         </span>
-        <svg-icon :name="'chevron-down'" :size="15" :classes="['icon']"/>
+        <svg-icon :name="'chevron-down'" :size="15" :classes="['icon']">
+          <chevron-down-icon/>
+        </svg-icon>
       </button>
     </div>
 
@@ -27,11 +29,13 @@
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
 import SvgIcon from '@/components/SvgIcon.vue';
+import ChevronDownIcon from '@/assets/icons/chevron-down.svg';
 
 export default defineComponent({
   name: 'SortDropdown',
   components: {
-    SvgIcon
+    SvgIcon,
+    ChevronDownIcon
   },
   props: {
     sortOptions: {

src/components/SvgIcon.vue

@@ -2,9 +2,11 @@
   <!-- This is a bit of a hack to load it with the HTML Loader.
        https://stackoverflow.com/questions/50834598/inline-svg-in-vuejs-component
   -->
-  <span ref="icon" :class="classes"
-        v-html="require(`!html-loader!@/assets/icons/${name}.svg`)"
-  ></span>
+  <span ref="icon" :class="classes">
+    <slot>
+      FOO
+    </slot>
+  </span>
 </template>
 
 <script lang="ts">

src/svg.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  import Vue, {VueConstructor} from 'vue';
+  const content: VueConstructor<Vue>;
+  export default content;
+}

src/views/Home.vue

@@ -3,7 +3,7 @@
     <div class="section home-section">
       <div class="container is-fluid">
         <div class="content is-size-5 has-text-centered column is-two-thirds m-auto">
-          <img src="@/assets/images/vglist-logo.svg" width="250px" class="home-logo" alt="vglist logo">
+          <img :src="vglistLogoPath" width="250px" class="home-logo" alt="vglist logo">
           <h4 class="subtitle has-text-weight-normal">Track your entire video game library across every store and platform.</h4>
         </div>
       </div>
@@ -87,7 +87,8 @@ export default defineComponent({
 
     return {
       gamesData,
-      statsData
+      statsData,
+      vglistLogoPath: `${process.env.BASE_URL}vglist-logo.svg`
     };
   }
 });

src/views/games/Game.vue

@@ -8,13 +8,21 @@
 
       <div v-if="userSignedIn" class="field buttons buttons-vertical">
         <a v-show="data.game.isFavorited" class="button is-fullwidth toggle-icon-on-hover" @click="unfavoriteGame">
-          <svg-icon :name="'heart-full'" :classes="['is-inline-flex']" :svg-classes="['icon-1']" :fill="'red'"/>
-          <svg-icon :name="'heart-broken'" :classes="['is-inline-flex']" :svg-classes="['icon-2']" :fill="'red'"/>
+          <svg-icon :name="'heart-full'" :classes="['is-inline-flex']" :svg-classes="['icon-1']" :fill="'red'">
+            <heart-full-icon/>
+          </svg-icon>
+          <svg-icon :name="'heart-broken'" :classes="['is-inline-flex']" :svg-classes="['icon-2']" :fill="'red'">
+            <heart-broken-icon/>
+          </svg-icon>
           <span class="ml-5">Unfavorite</span>
         </a>
         <a v-show="!data.game.isFavorited" class="button is-fullwidth toggle-icon-on-hover" @click="favoriteGame">
-          <svg-icon :name="'heart'" :classes="['is-inline-flex']" :svg-classes="['icon-1']" :fill="'red'"/>
-          <svg-icon :name="'heart-full'" :classes="['is-inline-flex']" :svg-classes="['icon-2']" :fill="'red'"/>
+          <svg-icon :name="'heart'" :classes="['is-inline-flex']" :svg-classes="['icon-1']" :fill="'red'">
+            <heart-icon/>
+          </svg-icon>
+          <svg-icon :name="'heart-full'" :classes="['is-inline-flex']" :svg-classes="['icon-2']" :fill="'red'">
+            <heart-full-icon/>
+          </svg-icon>
           <span class="ml-5">Favorite</span>
         </a>
         <add-game-to-library :is-in-library="data.game.isInLibrary" :game="data.game" @refresh="refreshGame"/>
@@ -24,7 +32,9 @@
           <div class="dropdown-trigger is-fullwidth" @click="toggleActionsDropdown">
             <button class="button is-fullwidth" aria-haspopup="true" aria-controls="dropdown-menu">
               <span>Actions</span>
-              <svg-icon :name="'chevron-down'" :size="15" :classes="['icon']"/>
+              <svg-icon :name="'chevron-down'" :size="15" :classes="['icon']">
+                <chevron-down-icon/>
+              </svg-icon>
             </button>
           </div>
 
@@ -125,6 +135,10 @@ import { useMutation, useQuery } from 'villus';
 import GameInfobox from '@/components/GameInfobox.vue';
 import AddGameToLibrary from '@/components/AddGameToLibrary.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
+import ChevronDownIcon from '@/assets/icons/chevron-down.svg';
+import HeartIcon from '@/assets/icons/heart.svg';
+import HeartFullIcon from '@/assets/icons/heart-full.svg';
+import HeartBrokenIcon from '@/assets/icons/heart-broken.svg';
 import MergeGamesButton from '@/components/MergeGamesButton.vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
@@ -136,6 +150,10 @@ export default defineComponent({
     GameInfobox,
     AddGameToLibrary,
     SvgIcon,
+    ChevronDownIcon,
+    HeartIcon,
+    HeartFullIcon,
+    HeartBrokenIcon,
     MergeGamesButton
   },
   props: {

src/views/users/UserProfile.vue

@@ -12,7 +12,9 @@
           class="button is-primary is-fullwidth-mobile mr-5 mr-0-mobile mt-10"
         >
           <span class="icon pl-5 mr-5">
-            <svg-icon :name="'user-plus'" :classes="['icon']" :fill="'white'" :size="15"/>
+            <svg-icon :name="'user-plus'" :classes="['icon']" :fill="'white'" :size="15">
+              <user-plus-icon/>
+            </svg-icon>
           </span>
           <span>Follow</span>
         </button>
@@ -22,7 +24,9 @@
           class="button is-danger is-fullwidth-mobile mr-5 mr-0-mobile mt-10"
         >
           <span class="icon pl-5 mr-5">
-            <svg-icon :name="'user-minus'" :classes="['icon']" :fill="'white'" :size="15"/>
+            <svg-icon :name="'user-minus'" :classes="['icon']" :fill="'white'" :size="15">
+              <user-minus-icon/>
+            </svg-icon>
           </span>
           <span>Unfollow</span>
         </button>
@@ -33,7 +37,9 @@
         <div class="dropdown-trigger is-fullwidth" @click="toggleActionsDropdown">
           <button class="button is-fullwidth" aria-haspopup="true" aria-controls="dropdown-menu">
             <span>Actions</span>
-            <svg-icon :name="'chevron-down'" :size="15" :classes="['icon']"/>
+            <svg-icon :name="'chevron-down'" :size="15" :classes="['icon']">
+              <chevron-down-icon/>
+            </svg-icon>
           </button>
         </div>
 
@@ -66,13 +72,19 @@ import { computed, defineComponent, ref } from 'vue';
 import { useMutation } from 'villus';
 import { FollowUserDocument, UnfollowUserDocument, BanUserDocument, UnbanUserDocument, RemoveUserAvatarDocument, UpdateUserRoleDocument, UserRole } from '@/generated/graphql';
 import SvgIcon from '@/components/SvgIcon.vue';
+import UserPlusIcon from '@/assets/icons/user-plus.svg';
+import UserMinusIcon from '@/assets/icons/user-minus.svg';
+import ChevronDownIcon from '@/assets/icons/chevron-down.svg';
 import { useStore } from 'vuex';
 import { State } from '@/store';
 
 export default defineComponent({
   name: 'UserProfile',
   components: {
-    SvgIcon
+    SvgIcon,
+    UserPlusIcon,
+    UserMinusIcon,
+    ChevronDownIcon
   },
   props: {
     user: {