Support sprite version of armoire icon (#15354)

* Use sprite component for armoire sprite

* use gif version of armoire sprite

* fix(import): sprite component path

---------

Co-authored-by: Kalista Payne <sabrecat@gmail.com>

website/client/src/components/achievements/armoireEmpty.vue

@@ -8,7 +8,7 @@
     <div class="modal-body">
       <div class="row">
         <div class="col-6 offset-3">
-          <div class="shop_armoire"></div>
+          <Sprite image-name="shop_armoire" />
           <p>{{ $t('armoireLastItem') }}</p>
           <p>{{ $t('armoireNotesEmpty') }}</p>
         </div>
@@ -34,7 +34,12 @@
 </style>
 
 <script>
+import Sprite from '@/components/ui/sprite';
+
 export default {
+  components: {
+    Sprite,
+  },
   methods: {
     close () {
       this.$root.$emit('bv::hide::modal', 'armoire-empty');

website/client/src/components/achievements/ultimateGear.vue

@@ -55,7 +55,7 @@
           <p v-html="$t('moreGearAchievements')"></p>
           <br>
         </div>
-        <div class="shop_armoire"></div>
+        <Sprite image-name="shop_armoire" />
         <p v-html="$t('armoireUnlocked')"></p>
         <br>
         <button
@@ -87,11 +87,13 @@
 import achievementFooter from './achievementFooter';
 import achievementAvatar from './achievementAvatar';
 import { mapState } from '@/libs/store';
+import Sprite from '@/components/ui/sprite.vue';
 
 export default {
   components: {
     achievementFooter,
     achievementAvatar,
+    Sprite,
   },
   computed: {
     ...mapState({ user: 'user.data' }),

website/common/script/content/constants/gifSprites.js

@@ -37,4 +37,5 @@ export default [
   'stable_Pet-Gryphatrice-Jubilant',
   'back_special_heroicAureole',
   'Pet-HatchingPotion-Funghi',
+  'shop_armoire',
 ];