Move more sprites out of css

gulp/gulp-sprites.js

@@ -43,7 +43,28 @@ function cssVarMap (sprite) {
 }
 
 function filterFile (file) {
-  return file.relative.indexOf('Mount_Icon_') === -1;
+  if (file.relative.indexOf('Mount_Icon_') !== -1) {
+    return false;
+  }
+  if (file.path.indexOf('shop/') !== -1) {
+    return false;
+  }
+  if (file.path.indexOf('stable/eggs') !== -1) {
+    return false;
+  }
+  if (file.path.indexOf('stable/food') !== -1) {
+    return false;
+  }
+  if (file.path.indexOf('stable/potions') !== -1) {
+    return false;
+  }
+  if (file.relative.indexOf('shop_') === 0) {
+    return false;
+  }
+  if (file.relative.indexOf('icon_background') === 0) {
+    return false;
+  }
+  return true;
 }
 
 async function createSpritesStream (name, src) {

website/client/src/components/inventory/stable/foodItem.vue

@@ -13,13 +13,13 @@
           :show="true"
           :count="itemCount"
         />
-        <span
+        <Sprite
           v-drag.food="item.key"
           class="item-content"
-          :class="`Pet_Food_${item.key}`"
+          :imageName="`Pet_Food_${item.key}`"
           @itemDragEnd="dragend($event)"
           @itemDragStart="dragstart($event)"
-        ></span>
+         />
       </div>
     </div>
     <b-popover
@@ -41,12 +41,14 @@
 <script>
 import { v4 as uuid } from 'uuid';
 import DragDropDirective from '@/directives/dragdrop.directive';
+import Sprite from '@/components/ui/sprite';
 
 import CountBadge from '@/components/ui/countBadge';
 
 export default {
   components: {
     CountBadge,
+    Sprite,
   },
   directives: {
     drag: DragDropDirective,

website/client/src/components/inventory/stable/hatchedPetDialog.vue

@@ -20,7 +20,7 @@
       </div>
       <div class="inner-content">
         <div class="pet-background d-flex align-items-center">
-          <div :class="pet.class"></div>
+          <Sprite :imageName="pet.class" />
         </div>
         <h4 class="title">
           {{ pet.name }}
@@ -103,8 +103,12 @@
 <script>
 import markdownDirective from '@/directives/markdown';
 import svgClose from '@/assets/svg/close.svg';
+import Sprite from '@/components/ui/sprite';
 
 export default {
+  components: {
+    Sprite,
+  },
   directives: {
     markdown: markdownDirective,
   },

website/client/src/components/inventory/stable/hatchingModal.vue

@@ -6,10 +6,10 @@
     >
       <div class="potionEggGroup">
         <div class="potionEggBackground">
-          <div :class="`Pet_HatchingPotion_${hatchablePet.potionKey}`"></div>
+          <Sprite :imageName="`Pet_HatchingPotion_${hatchablePet.potionKey}`" />
         </div>
         <div class="potionEggBackground">
-          <div :class="`Pet_Egg_${hatchablePet.eggKey}`"></div>
+          <Sprite :class="`Pet_Egg_${hatchablePet.eggKey}`" />
         </div>
       </div>
       <h4 class="title">
@@ -116,8 +116,12 @@
 import svgClose from '@/assets/svg/close.svg';
 
 import petMixin from '@/mixins/petMixin';
+import Sprite from '@/components/ui/sprite';
 
 export default {
+  components: {
+    Sprite,
+  },
   mixins: [petMixin],
   props: ['hatchablePet'],
   data () {

website/client/src/components/inventory/stable/index.vue

@@ -270,10 +270,10 @@
       class="foodInfo"
     >
       <div v-if="currentDraggingFood != null">
-        <div
+        <Sprite
           class="food-icon"
-          :class="`Pet_Food_${currentDraggingFood.key}`"
-        ></div>
+          :imageName="`Pet_Food_${currentDraggingFood.key}`"
+        />
         <div class="popover">
           <div
             class="popover-content"
@@ -289,10 +289,10 @@
       class="foodInfo mouse"
     >
       <div v-if="currentDraggingFood != null">
-        <div
+        <Sprite
           class="food-icon"
-          :class="`Pet_Food_${currentDraggingFood.key}`"
-        ></div>
+          :imageName="`Pet_Food_${currentDraggingFood.key}`"
+         />
         <div class="popover">
           <div
             class="popover-content"
@@ -450,6 +450,7 @@ import notifications from '@/mixins/notifications';
 import openedItemRowsMixin from '@/mixins/openedItemRows';
 import petMixin from '@/mixins/petMixin';
 import seasonalNPC from '@/mixins/seasonalNPC';
+import Sprite from '@/components/ui/sprite';
 
 import { CONSTANTS, setLocalSetting, getLocalSetting } from '@/libs/userlocalManager';
 import { isOwned } from '../../../libs/createAnimal';
@@ -482,6 +483,7 @@ export default {
     WelcomeModal,
     HatchingModal,
     InventoryDrawer,
+    Sprite,
   },
   directives: {
     resize: ResizeDirective,

website/client/src/components/userMenu/profileStats.vue

@@ -75,7 +75,7 @@
               :class="{white: user.preferences.background}"
               style="overflow:hidden"
             >
-              <div :class="'icon_background_' + user.preferences.background"></div>
+              <Sprite :imageName="'icon_background_' + user.preferences.background" />
             </div>
             <b-popover
               v-if="label !== 'skip'