add new sprite to item and shopItem component

website/client/src/components/inventory/item.vue

@@ -21,10 +21,10 @@
         <slot
           name="itemBadge"
           :item="item"
-        ></slot><span
+        ></slot><Sprite
           class="item-content"
-          :class="itemContentClass"
-        ></span>
+          :imageName="itemContentClass"
+         />
       </div><span
         v-if="label"
         class="item-label"
@@ -46,8 +46,12 @@
 
 <script>
 import { v4 as uuid } from 'uuid';
+import Sprite from '@/components/ui/sprite';
 
 export default {
+  components: {
+    Sprite,
+  },
   props: {
     item: {
       type: Object,

website/client/src/components/modifyInventory.vue

@@ -56,11 +56,11 @@
                   class="list-group-item"
                   ng-init="inv.gear[item.key] = user.items.gear.owned[item.key]"
                 >
-                  <div
+                  <Sprite
                     class="pull-left"
-                    :class="'shop_' + item.key"
+                    :imageName="'shop_' + item.key"
                     style="margin-right: 10px"
-                  ></div>
+                  />
                   {{ item.text() }}
                   <div class="clearfix">
                     <label class="radio-inline">

website/client/src/components/settings/subscription.vue

@@ -46,10 +46,10 @@
           </div>
           <div class="row">
             <div class="col-2">
-              <div
-                :class="currentMysterySet"
+              <Sprite
+                :imageName="currentMysterySet"
                 class="mt-n1"
-              ></div>
+              />
             </div>
             <div class="col-10">
               <h3> {{ $t('monthlyMysteryItems') }} </h3>
@@ -628,6 +628,7 @@ import paymentsMixin from '../../mixins/payments';
 import notificationsMixin from '../../mixins/notifications';
 
 import subscriptionOptions from './subscriptionOptions.vue';
+import Sprite from '@/components/ui/sprite';
 
 import amazonPayLogo from '@/assets/svg/amazonpay.svg';
 import applePayLogo from '@/assets/svg/apple-pay-logo.svg';
@@ -648,6 +649,7 @@ import subscriberHourglasses from '@/assets/svg/subscriber-hourglasses.svg';
 export default {
   components: {
     subscriptionOptions,
+    Sprite,
   },
   mixins: [paymentsMixin, notificationsMixin],
   data () {

website/client/src/components/shops/itemWithLabel.vue

@@ -17,10 +17,10 @@
           :emptyItem="emptyItem"
         ></slot>
         <div class="image">
-          <div
+          <Sprite
             v-once
-            :class="item.class"
-          ></div>
+            :imageName="item.class"
+          />
           <slot
             name="itemImage"
             :item="item"
@@ -157,9 +157,11 @@
 
 <script>
 import { v4 as uuid } from 'uuid';
+import Sprite from '@/components/ui/sprite';
 
 export default {
   components: {
+    Sprite,
   },
   props: {
     item: {

website/client/src/components/shops/shopItem.vue

@@ -41,10 +41,10 @@
           class="suggestedDot"
         ></span>
         <div class="image">
-          <div
+          <Sprite
             v-once
-            :class="item.class"
-          ></div>
+            :imageName="item.class"
+          />
           <slot
             name="itemImage"
             :item="item"
@@ -281,11 +281,13 @@ import svgClock from '@/assets/svg/clock.svg';
 import EquipmentAttributesPopover from '@/components/inventory/equipment/attributesPopover';
 
 import QuestInfo from './quests/questInfo.vue';
+import Sprite from '@/components/ui/sprite';
 
 export default {
   components: {
     EquipmentAttributesPopover,
     QuestInfo,
+    Sprite,
   },
   props: {
     item: {

website/client/src/components/ui/sprite.vue

@@ -13,7 +13,14 @@ export default {
   },
   methods: {
     imageUrl () {
-      return `https://habitica-assets.s3.amazonaws.com/mobileApp/images/${this.imageName}.png`;
+      if (!this.imageName) {
+        return '';
+      }
+      let name = this.imageName;
+      if (name.indexOf(' ') !== -1) {
+        name = name.split(' ')[1];
+      }
+      return `https://habitica-assets.s3.amazonaws.com/mobileApp/images/${name}.png`;
     },
   },
 };