feat: use nuxt-icon instead of own implementation

client/nuxt.config.ts

@@ -8,7 +8,8 @@ export default defineNuxtConfig({
   ssr: false,
   telemetry: false,
   modules: [
-    '@pinia/nuxt'
+    '@pinia/nuxt',
+    'nuxt-icons',
   ],
   runtimeConfig: {
     serverBaseUrl: '/',

client/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@pinia/nuxt": "^0.4.4",
     "build-url": "^6.0.1",
+    "nuxt-icons": "^3.0.0",
     "typescript": "^4.9.3",
     "vue-contenteditable": "^4.1.0"
   }

client/src/components/Icon.vue

@@ -1,21 +0,0 @@
-<template>
-  <img v-if="name === 'add'" class="icon" src="/assets/icons/add.svg" />
-  <img v-if="name === 'crown'" class="icon" src="/assets/icons/crown.svg" />
-  <img v-if="name === 'edit-white'" class="icon" src="/assets/icons/edit-white.svg" />
-  <img v-if="name === 'edit'" class="icon" src="/assets/icons/edit.svg" />
-  <img v-if="name === 'reload'" class="icon" src="/assets/icons/reload.svg" />
-  <img v-if="name === 'trash'" class="icon" src="/assets/icons/trash.svg" />
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  name: string,
-}>()
-</script>
-
-<style lang="scss">
-.icon {
-  width: 100%;
-  height: 100%;
-}
-</style>

client/src/components/admin/GameInfoTile.vue

@@ -6,7 +6,7 @@
         <td>{{ gameinfo.name }}</td>
         <td>
           <div class="gameinfo-tile__edit" @click="editName">
-            <Icon name="edit-white" />
+            <nuxt-icon name="edit-white" filled />
           </div>
         </td>
       </tr>
@@ -15,7 +15,7 @@
         <td v-if="!editLangShowDropdown">{{ gameinfo.lang }}</td>
         <td v-if="!editLangShowDropdown">
           <div class="gameinfo-tile__edit" @click="editLang">
-            <Icon name="edit-white" />
+            <nuxt-icon name="edit-white" filled />
           </div>
         </td>
         <td v-if="editLangShowDropdown" colspan="2">

client/src/components/admin/InfoTile.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="admin-tile__container">
     <div class="admin-tile__title">{{ title }}</div>
-    <div v-if="iconTop" class="admin-tile__icon-top" @click="emit('icon-top-click')"><Icon :name="iconTop" /></div>
+    <div v-if="iconTop" class="admin-tile__icon-top" @click="emit('icon-top-click')"><nuxt-icon :name="iconTop" filled /></div>
     <div class="admin-tile__body">
       <slot />
     </div>
     <div v-if="iconBottom" class="admin-tile__icon-bottom-container">
       <div class="admin-tile__icon-bottom" @click="emit('icon-bottom-click')">
-        <Icon :name="iconBottom" />
+        <nuxt-icon :name="iconBottom" filled />
       </div>
     </div>
   </div>
@@ -56,7 +56,7 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
     display: flex;
     position: absolute;
     left: 0;
-    bottom: -24px;
+    bottom: -28px;
     width: 100%;
   }
 
@@ -76,8 +76,6 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
   }
 
   &__icon-bottom {
-    width: 12px;
-    height: 12px;
     margin: 0 auto;
     padding: 20px;
     background-color: $admin-tile-bottom-icon-background-color;

client/src/components/admin/PlayersTile.vue

@@ -12,7 +12,7 @@
           <td class="players-tile__cell">
             {{ player.name }}
             <div v-if="player.role === 'gamemaster'" class="players-tile__is-gamemaster">
-              <Icon name="crown" />
+              <nuxt-icon name="crown" filled />
             </div>
           </td>
           <td class="players-tile__cell">{{ player.numQuotes }}</td>

client/yarn.lock

@@ -2937,6 +2937,13 @@ nuxi@3.0.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+nuxt-icons@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/nuxt-icons/-/nuxt-icons-3.0.0.tgz#82e8902917b2c0e94cb4d2355dc882045bef0ee7"
+  integrity sha512-7F9/uug7T23d2IGsmz0Jyi4gw86HRZeuzfxC1+e5vsAfQ4MhUMRaANki+uDgiUWub1y5TsclxptG06EH1e3bRQ==
+  dependencies:
+    "@nuxt/kit" "^3.0.0"
+
 nuxt@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-3.0.0.tgz#0909e6566d79805f3a4ed6229573817cbde12e89"