new svg rank and map icons 🌠

src/views/Match.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="pt-3">
-
-    <div v-if="data.matchDetails" class="head row m-auto mb-3 text-center">
+    <div v-if="data.matchDetails.map" class="head row m-auto mb-3 text-center">
       <div class="m-auto">
         <img :alt="data.matchDetails.map"
-             :src="mapImg.includes(data.matchDetails.map) ? require('@/images/maps/' + data.matchDetails.map + '.png') : require('@/images/maps/not_found.png')"
+             :src="require('@/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
              :title="data.matchDetails.map" class="map-icon">
       </div>
     </div>
-    <p class="text-center fs-6">Average Rank: <img :src="require('@/images/ranks/' + data.avgRank + '.png')"
+    <p class="text-center fs-6">Average Rank: <img :src="require('@/images/rank_icons/skillgroup' + data.avgRank + '.svg')"
                                                    alt="Rank icon"
                                                    class="rank-icon mx-2"/></p>
   </div>
@@ -41,9 +40,6 @@ export default {
   props: ['match_id'],
   components: {ScoreTeam},
   setup(props) {
-    // Vars
-    const mapImg = ['de_inferno', 'de_mirage', 'de_overpass']
-
     // Refs
     const data = reactive({
       playerName: '',
@@ -96,15 +92,21 @@ export default {
     })
 
     return {
-      GetMatch, GetAvgRank, data, mapImg, GoToPlayer, GetHLTV_1
+      GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.head {
+  img {
+    width: auto;
+    height: 100px;
+  }
+}
 .rank-icon {
-  max-width: 50px;
+  width: 60px;
 }
 .nav {
   width: 100vw;