Squashed commit of the following:

commit 8ed95731cb Author: Phillip Thelen <phillip@habitica.com> Date: Tue Jul 23 17:59:56 2024 +0200 fix hatched dialog commit 53242ad96c Author: Phillip Thelen <phillip@habitica.com> Date: Tue Jul 23 17:38:13 2024 +0200 fix popover not showing commit ce4bfd25bd Author: Phillip Thelen <phillip@habitica.com> Date: Wed Jul 3 17:28:30 2024 +0200 move item popover to own component commit 2e6a300c46 Author: Phillip Thelen <phillip@habitica.com> Date: Mon Jul 1 18:48:24 2024 +0200 make scaled sprites look nice commit a3cbadb8c2 Author: Phillip Thelen <phillip@habitica.com> Date: Mon Jul 1 18:48:17 2024 +0200 fix hatching dialog commit 0e5126df5e Author: Phillip Thelen <phillip@habitica.com> Date: Mon Jul 1 18:48:12 2024 +0200 fix popover alignment commit 7362af9236 Author: Phillip Thelen <phillip@habitica.com> Date: Fri Jun 28 17:07:03 2024 +0200 fix item display commit cf353efdb7 Author: Phillip Thelen <phillip@habitica.com> Date: Fri Jun 28 16:59:13 2024 +0200 fix pet display commit caf0cba9f2 Author: Phillip Thelen <phillip@habitica.com> Date: Fri Jun 28 15:24:39 2024 +0200 fix background icon display commit 3b06febc01 Author: Phillip Thelen <phillip@habitica.com> Date: Wed Jun 26 12:30:04 2024 +0200 fix sprites for notifications commit 160b2debdc Author: Phillip Thelen <phillip@habitica.com> Date: Wed Jun 26 10:35:13 2024 +0200 fix gear display in profile commit b200a2f17d Author: Phillip Thelen <phillip@habitica.com> Date: Wed Jun 26 10:28:11 2024 +0200 fix sprites for keys to the kennel commit 3614e7a8fb Author: Phillip Thelen <phillip@habitica.com> Date: Wed Jun 26 10:28:00 2024 +0200 fix sprites on avatar customization commit 35f993d055 Author: Phillip Thelen <phillip@habitica.com> Date: Wed Jun 26 09:18:41 2024 +0200 fix hover icons commit 28fc80115e Author: Phillip Thelen <phillip@habitica.com> Date: Tue Jun 11 16:50:37 2024 +0200 remove console commit b041c67679 Author: Phillip Thelen <phillip@habitica.com> Date: Tue Jun 11 15:18:44 2024 +0200 more lint fixes commit f4261d0440 Author: Phillip Thelen <phillip@habitica.com> Date: Tue Jun 11 15:18:16 2024 +0200 fix lint commit 878ee8f77b Author: Phillip Thelen <phillip@habitica.com> Date: Tue Jun 11 13:23:08 2024 +0200 support gifs commit aac24715aa Author: Phillip Thelen <phillip@habitica.com> Date: Tue Jun 11 13:15:52 2024 +0200 move avatar customization to sprites commit f4d3663130 Author: Phillip Thelen <phillip@habitica.com> Date: Fri Jun 7 17:25:19 2024 +0200 Move more sprites out of css commit 6e6b4c981a Author: Phillip Thelen <phillip@habitica.com> Date: Fri Jun 7 16:59:30 2024 +0200 add new sprite to item and shopItem component commit 8712413f5d Author: Phillip Thelen <phillip@habitica.com> Date: Fri Jun 7 16:37:24 2024 +0200 use new sprites for pets list commit 1172893826 Author: Phillip Thelen <phillip@habitica.com> Date: Wed Jun 5 09:43:51 2024 +0200 Begin building new system for loading sprites
2025-12-16 22:27:26 +01:00 · 2024-07-29 14:10:27 -05:00
parent e801547580
commit 271f40e355
34 changed files with 544 additions and 17431 deletions
--- a/gulp/gulp-sprites.js
+++ b/gulp/gulp-sprites.js
@@ -42,10 +42,41 @@ function cssVarMap (sprite) {
  }
 }

-function createSpritesStream (name, src) {
+function filterFile (file) {
+  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) {
  const stream = mergeStream();
+  // need to import this way bc of weird dependency things
+  // eslint-disable-next-line global-require
+  const filter = require('gulp-filter');
+
+  const f = filter(filterFile);

  const spriteData = gulp.src(src)
+    .pipe(f)
    .pipe(spritesmith({
      imgName: `spritesmith-${name}.png`,
      cssName: `spritesmith-${name}.css`,
@@ -63,7 +94,7 @@ function createSpritesStream (name, src) {
  return stream;
 }

-gulp.task('sprites:main', () => {
+gulp.task('sprites:main', async () => {
  const mainSrc = sync('habitica-images/**/*.png');
  return createSpritesStream('main', mainSrc);
 });
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
        "got": "^11.8.6",
        "gulp": "^4.0.0",
        "gulp-babel": "^8.0.0",
+        "gulp-filter": "^7.0.0",
        "gulp-imagemin": "^7.1.0",
        "gulp-nodemon": "^2.5.0",
        "gulp.spritesmith": "^6.13.0",
@@ -4360,6 +4361,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/array-differ": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
+      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/array-each": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
@@ -11493,6 +11502,31 @@
        "@babel/core": "^7.0.0"
      }
    },
+    "node_modules/gulp-filter": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/gulp-filter/-/gulp-filter-7.0.0.tgz",
+      "integrity": "sha512-ZGWtJo0j1mHfP77tVuhyqem4MRA5NfNRjoVe6VAkLGeQQ/QGo2VsFwp7zfPTGDsd1rwzBmoDHhxpE6f5B3Zuaw==",
+      "dependencies": {
+        "multimatch": "^5.0.0",
+        "plugin-error": "^1.0.1",
+        "streamfilter": "^3.0.0",
+        "to-absolute-glob": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      },
+      "peerDependencies": {
+        "gulp": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "gulp": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/gulp-imagemin": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/gulp-imagemin/-/gulp-imagemin-7.1.0.tgz",
@@ -15043,6 +15077,29 @@
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
    },
+    "node_modules/multimatch": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
+      "integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
+      "dependencies": {
+        "@types/minimatch": "^3.0.3",
+        "array-differ": "^3.0.0",
+        "array-union": "^2.1.0",
+        "arrify": "^2.0.1",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/multimatch/node_modules/@types/minimatch": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
+    },
    "node_modules/mute-stdout": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/mute-stdout/-/mute-stdout-1.0.1.tgz",
@@ -19468,6 +19525,17 @@
      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz",
      "integrity": "sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ=="
    },
+    "node_modules/streamfilter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/streamfilter/-/streamfilter-3.0.0.tgz",
+      "integrity": "sha512-kvKNfXCmUyC8lAXSSHCIXBUlo/lhsLcCU/OmzACZYpRUdtKIH68xYhm/+HI15jFJYtNJGYtCgn2wmIiExY1VwA==",
+      "dependencies": {
+        "readable-stream": "^3.0.6"
+      },
+      "engines": {
+        "node": ">=8.12.0"
+      }
+    },
    "node_modules/strict-uri-encode": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
    "got": "^11.8.6",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
+    "gulp-filter": "^7.0.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-nodemon": "^2.5.0",
    "gulp.spritesmith": "^6.13.0",
--- a/website/client/src/assets/css/sprites/spritesmith-main.css
+++ b/website/client/src/assets/css/sprites/spritesmith-main.css
--- a/website/client/src/components/achievements/firstDrops.vue
+++ b/website/client/src/components/achievements/firstDrops.vue
@@ -23,16 +23,14 @@
        {{ $t('foundNewItems') }}
      </h2>
      <div class="d-flex justify-content-center">
-        <div
+        <Sprite
          class="item-box ml-auto mr-3"
-          :class="eggClass"
-        >
-        </div>
-        <div
+          :image-name="eggClass"
+        />
+        <Sprite
          class="item-box mr-auto"
-          :class="potionClass"
-        >
-        </div>
+          :image-name="potionClass"
+        />
      </div>
      <p
        v-once
@@ -103,8 +101,12 @@

 <script>
 import closeIcon from '@/assets/svg/close.svg';
+import Sprite from '@/components/ui/sprite.vue';

 export default {
+  components: {
+    Sprite,
+  },
  data () {
    return {
      icons: Object.freeze({
--- a/website/client/src/components/achievements/genericAchievement.vue
+++ b/website/client/src/components/achievements/genericAchievement.vue
@@ -19,10 +19,10 @@
      </div>
      <div class="inner-content">
        <div class="achievement-background d-flex align-items-center">
-          <div
+          <Sprite
            class="icon"
-            :class="achievementClass"
-          ></div>
+            :image-name="achievementClass"
+          />
        </div>
        <h4
          class="title"
@@ -99,8 +99,12 @@
 import achievements from '@/../../common/script/content/achievements';
 import { mapState } from '@/libs/store';
 import svgClose from '@/assets/svg/close.svg';
+import Sprite from '@/components/ui/sprite.vue';

 export default {
+  components: {
+    Sprite,
+  },
  props: ['data'],
  data () {
    return {
--- a/website/client/src/components/avatarModal/customize-options.vue
+++ b/website/client/src/components/avatarModal/customize-options.vue
@@ -24,12 +24,15 @@
        <strong> {{ option.text }} </strong>
      </b-popover>
      <div class="option">
+        <Sprite
+          v-if="!option.none"
+          class="sprite"
+          :prefix="option.isGear ? 'shop' : 'icon'"
+          :imageName="option.imageName"
+          :image-name="option.imageName"
+        />
          <div
-          class="sprite customize-option"
-          :class="option.class"
-        >
-          <div
-            v-if="option.none"
+            v-else
            class="redline-outer"
          >
            <div class="redline"></div>
@@ -37,15 +40,18 @@
      </div>
    </div>
  </div>
-  </div>
 </template>

 <script>
 import gem from '@/assets/svg/gem.svg';
 import gold from '@/assets/svg/gold.svg';
 import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
+import Sprite from '@/components/ui/sprite.vue';

 export default {
+  components: {
+    Sprite,
+  },
  mixins: [
    avatarEditorUtilities,
  ],
@@ -84,7 +90,7 @@ export default {
    cursor: pointer;

    &.premium {
-      height: 112px;
+      height: 120px;
      width: 96px;
      margin-left: 8px;
      margin-right: 8px;
@@ -101,21 +107,9 @@ export default {
      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
      background-color: $white;

-      .sprite.customize-option.shirt {
-        margin-left: -3px !important;
-        // otherwise its overriden by the .outer-option-background:not(.none) { rules
-      }
-
-      .sprite.customize-option.skin {
-        margin-left: -8px !important;
-        // otherwise its overriden by the .outer-option-background:not(.none) { rules
-      }
-
      .option {
        border: none;
        border-radius: 2px;
-        padding-left: 6px;
-        padding-top: 4px;
      }

      &:hover {
@@ -141,14 +135,14 @@ export default {
      }

      .redline-outer {
-        height: 60px;
-        width: 60px;
+        height: 68px;
+        width: 68px;
        position: absolute;
        bottom: 0;
        margin: 0 auto 0 0;

        .redline {
-          width: 60px;
+          width: 68px;
          height: 4px;
          display: block;
          background: red;
@@ -157,7 +151,6 @@ export default {
          top: 0;
          margin-top: 30px;
          margin-bottom: 20px;
-          margin-left: -1px;
        }
      }
    }
@@ -173,10 +166,9 @@ export default {
  }
  .option {
    vertical-align: bottom;
-    height: 64px;
-    width: 64px;
+    height: 76px;
+    width: 76px;

-    margin: 12px 8px;
    border: 4px solid transparent;
    border-radius: 10px;
    position: relative;
@@ -191,44 +183,6 @@ export default {
    .sprite.customize-option {
      margin-top: 0;
      margin-left: 0;
-
-      &.skin {
-        margin-top: -4px;
-        margin-left: -4px;
-      }
-      &.chair {
-        margin-left: -1px;
-        margin-top: -1px;
-
-        &.button_chair_black {
-          // different sprite margin?
-          margin-top: -3px;
-        }
-
-        &.handleless {
-          margin-left: -5px;
-          margin-top: -5px;
-        }
-      }
-      &.color, &.bangs, &.beard, &.flower, &.mustache {
-        background-position-x: -6px;
-        background-position-y: -12px;
-      }
-
-      &.hair.base {
-        background-position-x: -6px;
-        background-position-y: -4px;
-      }
-
-      &.headAccessory {
-        margin-top: 0;
-        margin-left: -4px;
-      }
-
-      &.headband {
-        margin-top: -6px;
-        margin-left: -27px;
-      }
    }
  }
 </style>
--- a/website/client/src/components/avatarModal/extra-settings.vue
+++ b/website/client/src/components/avatarModal/extra-settings.vue
@@ -166,7 +166,8 @@ export default {
        option.active = this.user.preferences.costume
          ? this.user.items.gear.costume.eyewear === newKey
          : this.user.items.gear.equipped.eyewear === newKey;
-        option.class = `eyewear_special_${key}`;
+        option.imageName = `eyewear_special_${key}`;
+        option.isGear = true;
        option.click = () => {
          const type = this.user.preferences.costume ? 'costume' : 'equipped';

@@ -180,7 +181,7 @@ export default {
    },
    headbands () {
      const keys = ['blackHeadband', 'blueHeadband', 'greenHeadband', 'pinkHeadband', 'redHeadband', 'whiteHeadband', 'yellowHeadband'];
-      const noneOption = this.createGearItem(0, 'headAccessory', 'base', 'headband');
+      const noneOption = this.createGearItem(0, 'headAccessory', 'base');
      noneOption.none = true;
      noneOption.text = this.$t('none');
      const options = [
@@ -188,7 +189,7 @@ export default {
      ];

      for (const key of keys) {
-        const option = this.createGearItem(key, 'headAccessory', 'special', 'headband');
+        const option = this.createGearItem(key, 'headAccessory', 'special');
        const newKey = `headAccessory_special_${key}`;
        option.click = () => {
          const type = this.user.preferences.costume ? 'costume' : 'equipped';
@@ -208,7 +209,7 @@ export default {
          option.none = true;
        }
        option.active = this.user.preferences.chair === key;
-        option.class = `button_chair_${key} chair ${key.includes('handleless_') ? 'handleless' : ''}`;
+        option.imageName = `chair_${key}`;
        option.click = () => this.set({ 'preferences.chair': key });
        option.text = appearance.chair[key].text();
        return option;
@@ -224,7 +225,9 @@ export default {
          option.none = true;
        }
        option.active = this.user.preferences.hair.flower === key;
-        option.class = `icon_hair_flower_${key} flower`;
+        if (key !== 0) {
+          option.imageName = `hair_flower_${key}`;
+        }
        option.click = () => this.set({ 'preferences.hair.flower': key });
        option.text = appearance.hair.flower[key].text();
        return option;
@@ -271,11 +274,12 @@ export default {

          if (category === 'back') {
            option.text = this.$t(`back${upperFirst(key)}Text`);
-            option.class = `icon_back_special_${option.key} back`;
+            option.imageName = `back_special_${option.key}`;
          } else {
            option.text = this.$t(`headAccessory${upperFirst(key)}Text`);
-            option.class = `headAccessory_special_${option.key} ${category}`;
+            option.imageName = `headAccessory_special_${option.key}`;
          }
+          option.isGear = true;
          option.click = () => {
            const type = this.user.preferences.costume ? 'costume' : 'equipped';
            return this.equip(newKey, type);
@@ -291,7 +295,7 @@ export default {

      return keys.join(',');
    },
-    createGearItem (key, gearType, subGearType, additionalClass) {
+    createGearItem (key, gearType, subGearType) {
      const newKey = `${gearType}_${subGearType ? `${subGearType}_` : ''}${key}`;
      const option = {};
      option.key = key;
@@ -299,6 +303,7 @@ export default {
      const currentlyEquippedValue = this.user.items.gear[visibleGearType][gearType];

      option.active = currentlyEquippedValue === newKey;
+      option.isGear = true;

      if (key === 0) {
        // if key is the "none" option check if a property
@@ -306,7 +311,7 @@ export default {
        option.active = option.active || !currentlyEquippedValue;
      }

-      option.class = `${newKey} ${additionalClass}`;
+      option.imageName = `${newKey}`;
      option.click = () => {
        const type = this.user.preferences.costume ? 'costume' : 'equipped';
        const currentlyEquipped = this.user.items.gear[type][gearType];
--- a/website/client/src/components/creatorIntro.vue
+++ b/website/client/src/components/creatorIntro.vue
@@ -220,10 +220,10 @@
              :class="{selected: bg.key === user.preferences.background}"
              @click="unlock('background.' + bg.key)"
            >
-              <div
+              <Sprite
                class="background"
-                :class="`icon_background_${bg.key}`"
-              ></div>
+                :image-name="`icon_background_${bg.key}`"
+              />
              <b-popover
                :target="bg.key"
                triggers="hover focus"
@@ -254,10 +254,10 @@
              :class="{selected: bg.key === user.preferences.background}"
              @click="unlock('background.' + bg.key)"
            >
-              <div
+              <Sprite
                class="background"
-                :class="`icon_background_${bg.key}`"
-              ></div>
+                :image-name="`icon_background_${bg.key}`"
+              />
              <b-popover
                :target="bg.key"
                triggers="hover focus"
@@ -286,10 +286,10 @@
              :class="{selected: bg.key === user.preferences.background}"
              @click="unlock('background.' + bg.key)"
            >
-              <div
+              <Sprite
                class="background"
-                :class="`icon_background_${bg.key}`"
-              ></div>
+                :image-name="`icon_background_${bg.key}`"
+              />
              <b-popover
                :target="bg.key"
                triggers="hover focus"
@@ -818,9 +818,10 @@

        .background {
          border-radius: 4px;
+          object-position: -4px -4px;
+          object-fit: none;
          width: 60px;
          height: 60px;
-          background-position: -4px -4px;
        }

        .deselect {
@@ -1013,6 +1014,7 @@ import arrowRight from '@/assets/svg/arrow_right.svg';
 import arrowLeft from '@/assets/svg/arrow_left.svg';
 import svgClose from '@/assets/svg/close.svg';
 import { avatarEditorUtilities } from '../mixins/avatarEditUtilities';
+import Sprite from './ui/sprite';

 export default {
  components: {
@@ -1024,6 +1026,7 @@ export default {
    hairSettings,
    skinSettings,
    usernameForm,
+    Sprite,
  },
  mixins: [guide, notifications, avatarEditorUtilities],
  data () {
--- a/website/client/src/components/inventory/item.vue
+++ b/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>
+          :image-name="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,
--- a/website/client/src/components/inventory/itemPopover.vue
+++ b/website/client/src/components/inventory/itemPopover.vue
@@ -0,0 +1,113 @@
+<template>
+  <div
+    ref="root"
+    v-if="draggedItem"
+    class="draggedItemInfo mouse"
+    v-mousePosition="30"
+    @mouseMoved="mouseMoved($event)">
+      <Sprite
+        class="dragging-icon"
+        :image-name="imageName()"
+      />
+      <div class="popover">
+        <div
+          class="popover-content"
+        >
+          {{ $t(popoverTextKey, { [translationKey]: itemText() }) }}
+        </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .draggedItemInfo {
+    position: absolute;
+    left: -500px;
+
+    z-index: 1080;
+
+    &.mouse {
+      position: fixed;
+      pointer-events: none
+    }
+
+    .dragging-icon {
+      width: 68px;
+      margin: 0 auto 8px;
+      display: block;
+      transform: scale(1.5);
+    }
+
+    .popover {
+      position: static;
+      width: 180px;
+    }
+
+    .popover-content {
+      color: white;
+      margin: 15px;
+      text-align: center;
+    }
+  }
+</style>
+
+<script>
+import Sprite from '@/components/ui/sprite';
+import MouseMoveDirective from '@/directives/mouseposition.directive';
+
+export default {
+  name: 'ItemPopover',
+  components: {
+    Sprite,
+  },
+  directives: {
+    mousePosition: MouseMoveDirective,
+  },
+  props: {
+    draggedItem: {
+      type: Object,
+      default: null,
+    },
+    popoverTextKey: {
+      type: String,
+      default: '',
+    },
+    translationKey: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    imageName () {
+      if (this.draggedItem) {
+        if (this.draggedItem.class) {
+          return this.draggedItem.class;
+        }
+        if (this.draggedItem.target) {
+          return `Pet_Food_${this.draggedItem.key}`;
+        }
+      }
+      return '';
+    },
+    mouseMoved ($event) {
+      if (this.$refs.root) {
+        this.$refs.root.style.left = `${$event.x - 60}px`;
+        this.$refs.root.style.top = `${$event.y + 10}px`;
+      }
+    },
+    itemText () {
+      if (this.draggedItem) {
+        if (this.draggedItem.text) {
+          if (typeof this.draggedItem.text === 'function') {
+            return this.draggedItem.text();
+          }
+          return this.draggedItem.text;
+        }
+        return this.draggedItem.class;
+      }
+      return '';
+    },
+  },
+};
+
+</script>
--- a/website/client/src/components/inventory/items/index.vue
+++ b/website/client/src/components/inventory/items/index.vue
@@ -1,8 +1,6 @@
 <template>
  <div
-    v-mousePosition="30"
    class="row"
-    @mouseMoved="mouseMoved($event)"
  >
    <div class="standard-sidebar d-none d-sm-block">
      <filter-sidebar>
@@ -99,7 +97,7 @@
                  {{ context.item.text }}
                </h4>
                <div
-                  v-if="currentDraggingPotion == null"
+                  v-if="!currentDraggingPotion"
                  class="popover-content-text"
                >
                  {{ context.item.notes }}
@@ -148,7 +146,7 @@
                <h4 class="popover-content-title">
                  {{ context.item.text }}
                </h4>
-                <div class="popover-content-text">
+                <div class="popover-content-text" v-if="!currentDraggingEgg">
                  {{ context.item.notes }}
                </div>
              </template>
@@ -224,120 +222,24 @@
      </div>
    </div>
    <hatchedPetDialog />
-    <div
-      ref="draggingEggInfo"
-      class="eggInfo"
-    >
-      <div v-if="currentDraggingEgg != null">
-        <div
-          class="potion-icon"
-          :class="`Pet_Egg_${currentDraggingEgg.key}`"
-        ></div>
-        <div class="popover">
-          <div class="popover-content">
-            {{ $t('dragThisEgg', {eggName: currentDraggingEgg.text }) }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="eggClickMode"
-      ref="clickEggInfo"
-      class="eggInfo mouse"
-    >
-      <div v-if="currentDraggingEgg != null">
-        <div
-          class="potion-icon"
-          :class="`Pet_Egg_${currentDraggingEgg.key}`"
-        ></div>
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('clickOnPotionToHatch', {eggName: currentDraggingEgg.text }) }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      ref="draggingPotionInfo"
-      class="hatchingPotionInfo"
-    >
-      <div v-if="currentDraggingPotion != null">
-        <div
-          class="potion-icon"
-          :class="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
-        ></div>
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('dragThisPotion', {potionName: currentDraggingPotion.text }) }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="potionClickMode"
-      ref="clickPotionInfo"
-      class="hatchingPotionInfo mouse"
-    >
-      <div v-if="currentDraggingPotion != null">
-        <div
-          class="potion-icon"
-          :class="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
-        ></div>
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('clickOnEggToHatch', {potionName: currentDraggingPotion.text }) }}
-          </div>
-        </div>
-      </div>
-    </div>
+    <ItemPopover
+      :dragged-item="currentDraggingEgg"
+      popoverTextKey="clickOnPotionToHatch"
+      translationKey="eggName" />
+    <ItemPopover
+      :dragged-item="currentDraggingPotion"
+      popoverTextKey="clickOnEggToHatch"
+      translationKey="potionName" />
    <questDetailModal :group="user.party" />
    <cards-modal :card-options="cardOptions" />
  </div>
 </template>

-<style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-
-  .eggInfo, .hatchingPotionInfo {
-    position: absolute;
-    left: -500px;
-
-    z-index: 1080;
-
-    &.mouse {
-      position: fixed;
-      pointer-events: none
-    }
-
-    .potion-icon {
-      margin: 0 auto 8px;
-      transform: scale(1.5);
-    }
-
-    .popover {
-      position: inherit;
-      width: 180px;
-    }
-
-    .popover-content {
-      color: white;
-      margin: 15px;
-      text-align: center;
-    }
-  }
-
-</style>
-
 <script>
 import each from 'lodash/each';
 import throttle from 'lodash/throttle';
 import moment from 'moment';
+import ItemPopover from '@/components/inventory/itemPopover';
 import Item from '@/components/inventory/item';
 import ItemRows from '@/components/ui/itemRows';
 import CountBadge from '@/components/ui/countBadge';
@@ -354,7 +256,6 @@ import { createAnimal } from '@/libs/createAnimal';

 import notifications from '@/mixins/notifications';
 import DragDropDirective from '@/directives/dragdrop.directive';
-import MouseMoveDirective from '@/directives/mouseposition.directive';
 import FilterGroup from '@/components/ui/filterGroup';
 import Checkbox from '@/components/ui/checkbox';
 import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
@@ -375,8 +276,6 @@ const groups = [
  allowedItems,
 }));

-let lastMouseMoveEvent = {};
-
 export default {
  name: 'Items',
  components: {
@@ -391,10 +290,10 @@ export default {
    cardsModal,
    QuestInfo,
    FilterSidebar,
+    ItemPopover,
  },
  directives: {
    drag: DragDropDirective,
-    mousePosition: MouseMoveDirective,
  },
  mixins: [notifications],
  data () {
@@ -405,9 +304,7 @@ export default {
      sortBy: 'quantity', // or 'AZ'

      currentDraggingEgg: null,
-      eggClickMode: false,
      currentDraggingPotion: null,
-      potionClickMode: false,
      cardOptions: {
        cardType: '',
        messageOptions: 0,
@@ -567,22 +464,13 @@ export default {
        }

        this.currentDraggingPotion = null;
-        this.potionClickMode = false;
        return;
      }

      if (this.currentDraggingEgg === null || this.currentDraggingEgg !== egg) {
        this.currentDraggingEgg = egg;
-        this.eggClickMode = true;
-
-        // Wait for the div.eggInfo.mouse node to be added to the DOM before
-        // changing its position.
-        this.$nextTick(() => {
-          this.mouseMoved(lastMouseMoveEvent);
-        });
      } else {
        this.currentDraggingEgg = null;
-        this.eggClickMode = false;
      }
    },
    onPotionClicked ($event, potion) {
@@ -592,21 +480,12 @@ export default {
        }

        this.currentDraggingEgg = null;
-        this.eggClickMode = false;
        return;
      }
      if (this.currentDraggingPotion === null || this.currentDraggingPotion !== potion) {
        this.currentDraggingPotion = potion;
-        this.potionClickMode = true;
-
-        // Wait for the div.hatchingPotionInfo.mouse node to be added to the
-        // DOM before changing its position.
-        this.$nextTick(() => {
-          this.mouseMoved(lastMouseMoveEvent);
-        });
      } else {
        this.currentDraggingPotion = null;
-        this.potionClickMode = false;
      }
    },

@@ -640,23 +519,6 @@ export default {
        });
      }
    },
-
-    mouseMoved ($event) {
-      // Keep track of the last mouse position even in click mode so that we
-      // know where to position the dragged potion/egg info on item click.
-      lastMouseMoveEvent = $event;
-
-      // Update the potion/egg popover if we are already dragging it.
-      if (this.potionClickMode) {
-        // dragging potioninfo is 180px wide (90 would be centered)
-        this.$refs.clickPotionInfo.style.left = `${$event.x - 60}px`;
-        this.$refs.clickPotionInfo.style.top = `${$event.y + 10}px`;
-      } else if (this.eggClickMode) {
-        // dragging eggInfo is 180px wide (90 would be centered)
-        this.$refs.clickEggInfo.style.left = `${$event.x - 60}px`;
-        this.$refs.clickEggInfo.style.top = `${$event.y + 10}px`;
-      }
-    },
  },
 };
 </script>
--- a/website/client/src/components/inventory/stable/foodItem.vue
+++ b/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}`"
+          :image-name="`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,
--- a/website/client/src/components/inventory/stable/hatchedPetDialog.vue
+++ b/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 :image-name="pet.imageName" />
        </div>
        <h4 class="title">
          {{ pet.name }}
@@ -76,11 +76,12 @@
      height: 112px;
      border-radius: 4px;
      background-color: $gray-700;
-    }

-    .Pet {
+      img {
+        transform: scale(1.5);
        margin: auto;
      }
+    }

    .dialog-header {
      color: $purple-200;
@@ -103,8 +104,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,
  },
@@ -130,6 +135,7 @@ export default {
  methods: {
    openDialog (item) {
      this.pet = item;
+      console.log(this.pet);
      this.$root.$emit('bv::show::modal', 'hatchedPet-modal');
    },
    close () {
--- a/website/client/src/components/inventory/stable/hatchingModal.vue
+++ b/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 :image-name="`Pet_HatchingPotion_${hatchablePet.potionKey}`" />
        </div>
        <div class="potionEggBackground">
-          <div :class="`Pet_Egg_${hatchablePet.eggKey}`"></div>
+          <Sprite :image-name="`Pet_Egg_${hatchablePet.eggKey}`" />
        </div>
      </div>
      <h4 class="title">
@@ -105,7 +105,7 @@
        margin-right: 24px;
      }

-      div {
+      img {
        margin: 0 auto;
      }
    }
@@ -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 () {
--- a/website/client/src/components/inventory/stable/index.vue
+++ b/website/client/src/components/inventory/stable/index.vue
@@ -1,8 +1,6 @@
 <template>
  <div
-    v-mousePosition="30"
    class="row stable"
-    @mouseMoved="mouseMoved($event)"
  >
    <div class="standard-sidebar d-none d-sm-block">
      <filter-sidebar>
@@ -265,43 +263,10 @@
      </inventoryDrawer>
    </div>
    <hatchedPetDialog :hide-text="true" />
-    <div
-      ref="dragginFoodInfo"
-      class="foodInfo"
-    >
-      <div v-if="currentDraggingFood != null">
-        <div
-          class="food-icon"
-          :class="`Pet_Food_${currentDraggingFood.key}`"
-        ></div>
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('dragThisFood', {foodName: currentDraggingFood.text() }) }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="foodClickMode"
-      ref="clickFoodInfo"
-      class="foodInfo mouse"
-    >
-      <div v-if="currentDraggingFood != null">
-        <div
-          class="food-icon"
-          :class="`Pet_Food_${currentDraggingFood.key}`"
-        ></div>
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
-          </div>
-        </div>
-      </div>
-    </div>
+    <ItemPopover
+      :dragged-item="currentDraggingFood"
+      popoverTextKey="clickOnPetToFeed"
+      translationKey="foodName" />
    <mount-raised-modal />
    <welcome-modal />
    <hatching-modal :hatchable-pet.sync="hatchablePet" />
@@ -364,34 +329,6 @@
    margin-bottom: 0;
  }

-  .foodInfo {
-    position: absolute;
-    left: -500px;
-
-    z-index: 1080;
-
-    &.mouse {
-      position: fixed;
-      pointer-events: none
-    }
-
-    .food-icon {
-      margin: 0 auto 8px;
-      transform: scale(1.5);
-    }
-
-    .popover {
-      position: inherit;
-      width: 180px;
-    }
-
-    .popover-content {
-      color: white;
-      margin: 15px;
-      text-align: center;
-    }
-  }
-
  .hatchablePopover {
    width: 180px;

@@ -428,6 +365,7 @@ import _throttle from 'lodash/throttle';
 import groupBy from 'lodash/groupBy';
 import { mapState } from '@/libs/store';

+import ItemPopover from '@/components/inventory/itemPopover';
 import PetItem from './petItem';
 import MountItem from './mountItem.vue';
 import FoodItem from './foodItem';
@@ -440,7 +378,6 @@ import InventoryDrawer from '@/components/shared/inventoryDrawer';

 import ResizeDirective from '@/directives/resize.directive';
 import DragDropDirective from '@/directives/dragdrop.directive';
-import MouseMoveDirective from '@/directives/mouseposition.directive';

 import { createAnimal } from '@/libs/createAnimal';

@@ -482,11 +419,11 @@ export default {
    WelcomeModal,
    HatchingModal,
    InventoryDrawer,
+    ItemPopover,
  },
  directives: {
    resize: ResizeDirective,
    drag: DragDropDirective,
-    mousePosition: MouseMoveDirective,
  },
  mixins: [notifications, openedItemRowsMixin, petMixin, seasonalNPC],
  data () {
--- a/website/client/src/components/inventory/stable/mountItem.vue
+++ b/website/client/src/components/inventory/stable/mountItem.vue
@@ -13,10 +13,11 @@
          name="itemBadge"
          :item="item"
        ></slot>
-        <span
+        <Sprite
          class="item-content"
          :class="itemClass()"
-        ></span>
+          :image-name="imageName()"
+        />
      </div>
    </div>
    <b-popover
@@ -37,8 +38,12 @@
 import { v4 as uuid } from 'uuid';
 import { mapState } from '@/libs/store';
 import { isOwned } from '../../../libs/createAnimal';
+import Sprite from '@/components/ui/sprite';

 export default {
+  components: {
+    Sprite,
+  },
  props: {
    item: {
      type: Object,
@@ -70,7 +75,10 @@ export default {
      return isOwned('mount', this.item, this.userItems);
    },
    itemClass () {
-      return this.isOwned() ? `Mount_Icon_${this.item.key}` : 'PixelPaw GreyedOut';
+      return this.isOwned() ? '' : 'GreyedOut';
+    },
+    imageName () {
+      return this.isOwned() ? `stable_Mount_Icon_${this.item.key}` : 'PixelPaw';
    },
  },
 };
--- a/website/client/src/components/inventory/stable/mountRaisedModal.vue
+++ b/website/client/src/components/inventory/stable/mountRaisedModal.vue
@@ -12,10 +12,10 @@
      </div>
      <div class="inner-content">
        <div class="pet-background">
-          <div
+          <Sprite
            class="mount"
-            :class="`Mount_Icon_${mount.key}`"
-          ></div>
+            :image-name="`Mount_Icon_${mount.key}`"
+          />
        </div>
        <h4 class="title">
          {{ mount.text() }}
@@ -82,8 +82,12 @@
 <script>
 import stable from '@/../../common/script/content/stable';
 import markdownDirective from '@/directives/markdown';
+import Sprite from '@/components/ui/sprite';

 export default {
+  components: {
+    Sprite,
+  },
  directives: {
    markdown: markdownDirective,
  },
--- a/website/client/src/components/inventory/stable/petItem.vue
+++ b/website/client/src/components/inventory/stable/petItem.vue
@@ -21,11 +21,13 @@
        ></span><span
          class="potion"
          :class="potionClass"
-        ></span></span><span
-          v-else
+        ></span></span>
+        <Sprite
          class="item-content"
-          :class="getPetItemClass()"
-        ></span><span
+          :class="itemClass()"
+          :image-name="imageName()"
+        />
+        <span
          v-if="isAllowedToFeed() && progress() > 0"
          class="pet-progress-background"
        ><div
@@ -52,9 +54,9 @@
          v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })"
        ></div><div class="potionEggGroup">
          <div class="potionEggBackground">
-            <div :class="potionClass"></div>
+            <Sprite :image-name="potionClass" />
          </div><div class="potionEggBackground">
-            <div :class="eggClass"></div>
+            <Sprite :image-name="eggClass" />
          </div>
        </div>
      </div><div v-else>
@@ -118,8 +120,12 @@ import foolPet from '@/mixins/foolPet';
 import {
  isAllowedToFeed, isHatchable, isOwned, isSpecial,
 } from '../../../libs/createAnimal';
+import Sprite from '@/components/ui/sprite';

 export default {
+  components: {
+    Sprite,
+  },
  mixins: [foolPet],
  props: {
    item: {
@@ -168,22 +174,28 @@ export default {
    isAllowedToFeed () {
      return isAllowedToFeed(this.item, this.userItems);
    },
-    getPetItemClass () {
+    itemClass () {
+      if (this.isOwned() || this.isHatchable()) {
+        return '';
+      }
+      return 'GreyedOut';
+    },
+    imageName () {
      if (this.isOwned() && some(
        this.currentEventList,
        event => moment().isBetween(event.start, event.end) && event.aprilFools && event.aprilFools === 'Fungi',
      )) {
-        if (this.isSpecial()) return `Pet ${this.foolPet(this.item.key)}`;
+        if (this.isSpecial()) return `stable_${this.foolPet(this.item.key)}`;
        const petString = `${this.item.eggKey}-${this.item.key}`;
-        return `Pet ${this.foolPet(petString)}`;
+        return `stable_${this.foolPet(petString)}`;
      }

      if (this.isOwned() || (this.mountOwned() && this.isHatchable())) {
-        return `Pet Pet-${this.item.key} ${this.item.eggKey}`;
+        return `stable_Pet-${this.item.key}`;
      }

      if (!this.isOwned() && this.isSpecial()) {
-        return 'GreyedOut PixelPaw';
+        return 'PixelPaw';
      }

      if (this.isHatchable()) {
@@ -191,11 +203,11 @@ export default {
      }

      if (this.mountOwned()) {
-        return `GreyedOut Pet Pet-${this.item.key} ${this.item.eggKey}`;
+        return `stable_Pet-${this.item.key}`;
      }

      // Can't hatch
-      return 'GreyedOut PixelPaw';
+      return 'PixelPaw';
    },
    progress () {
      return this.userItems.pets[this.item.key];
--- a/website/client/src/components/modifyInventory.vue
+++ b/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">
@@ -330,9 +330,9 @@
                  class="list-group-item"
                  ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                >
-                  <div
+                  <Sprite
                    class="pull-left"
-                    :class="'Mount_Icon_' + mount"
+                    :imageName="mount.key"
                    style="margin-right: 10px"
                  ></div>
                  {{ mount }}
@@ -363,9 +363,9 @@
                  class="list-group-item"
                  ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                >
-                  <div
+                  <Sprite
                    class="pull-left"
-                    :class="'Mount_Icon_' + mount"
+                    :imageName="mount.key"
                    style="margin-right: 10px"
                  ></div>
                  {{ mount }}
@@ -396,9 +396,9 @@
                  class="list-group-item"
                  ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                >
-                  <div
+                  <Sprite
                    class="pull-left"
-                    :class="'Mount_Icon_' + mount"
+                    :imageName="mount.key"
                    style="margin-right: 10px"
                  ></div>
                  {{ mount }}
@@ -429,9 +429,9 @@
                  class="list-group-item"
                  ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                >
-                  <div
+                  <Sprite
                    class="pull-left"
-                    :class="'Mount_Icon_' + mount"
+                    :imageName="mount.key"
                    style="margin-right: 10px"
                  ></div>
                  {{ mount }}
@@ -503,11 +503,11 @@
                  ng-init="inv.hatchingPotions[item.key] = user.items.hatchingPotions[item.key]"
                >
                  <div class="form-inline clearfix">
-                    <div
+                    <Sprite
                      class="pull-left"
                      :class="'Pet_HatchingPotion_' + item.key"
                      style="margin-right: 10px"
-                    ></div>
+                    />
                    <p>{{ item.text() }}</p>
                    <input
                      class="form-control"
@@ -565,11 +565,11 @@
                  ng-init="inv.eggs[item.key] = user.items.eggs[item.key]"
                >
                  <div class="form-inline clearfix">
-                    <div
+                    <Sprite
                      class="pull-left"
-                      :class="'Pet_Egg_' + item.key"
+                      :image-name="'Pet_Egg_' + item.key"
                      style="margin-right: 10px"
-                    ></div>
+                     />
                    <p>{{ item.text() }}</p>
                    <input
                      class="form-control"
@@ -627,11 +627,11 @@
                  ng-init="inv.food[item.key] = user.items.food[item.key]"
                >
                  <div class="form-inline clearfix">
-                    <div
+                    <Sprite
                      class="pull-left"
                      :class="'Pet_Food_' + item.key"
                      style="margin-right: 10px"
-                    ></div>
+                    />
                    <p>{{ item.text() }}</p>
                    <input
                      class="form-control"
@@ -690,11 +690,11 @@
                  ng-if="item.category !== 'world'"
                >
                  <div class="form-inline clearfix">
-                    <div
+                    <Sprite
                      class="pull-left"
                      :class="'inventory_quest_scroll_' + item.key"
                      style="margin-right: 10px"
-                    ></div>
+                    />
                    <p>{{ item.text() }}</p>
                    <input
                      class="form-control"
@@ -730,9 +730,13 @@
 import axios from 'axios';

 import Content from '@/../../common/script/content';
+import Sprite from '@/components/ui/sprite.vue';
 import { mapState } from '@/libs/store';

 export default {
+  components: {
+    Sprite,
+  },
  data () {
    const showInv = {};
    const inv = {
--- a/website/client/src/components/settings/subscription.vue
+++ b/website/client/src/components/settings/subscription.vue
@@ -46,10 +46,10 @@
          </div>
          <div class="row">
            <div class="col-2">
-              <div
-                :class="currentMysterySet"
+              <Sprite
+                :image-name="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 () {
--- a/website/client/src/components/shops/itemWithLabel.vue
+++ b/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>
+            :image-name="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: {
--- a/website/client/src/components/shops/market/keysToKennel.vue
+++ b/website/client/src/components/shops/market/keysToKennel.vue
@@ -38,26 +38,6 @@
  }
 </style>

-<style>
-  .key_to_pets {
-    background-image: url('~@/assets/images/keys/key-to-the-pet-kennels.png');
-    width: 68px;
-    height: 68px;
-  }
-
-  .key_to_mounts {
-    background-image: url('~@/assets/images/keys/key-to-the-mount-kennels.png');
-    width: 68px;
-    height: 68px;
-  }
-
-  .key_to_both {
-    background-image: url('~@/assets/images/keys/keys-to-the-kennels.png');
-    width: 68px;
-    height: 68px;
-  }
-</style>
-
 <script>
 import { beastCount, mountMasterProgress } from '@/../../common/script/count';
 import { mapState } from '@/libs/store';
--- a/website/client/src/components/shops/quests/buyQuestModal.vue
+++ b/website/client/src/components/shops/quests/buyQuestModal.vue
@@ -498,38 +498,6 @@ export default {
    hideDialog () {
      this.$root.$emit('bv::hide::modal', 'buy-quest-modal');
    },
-    getDropIcon (drop) {
-      switch (drop.type) {
-        case 'gear':
-          return `shop_${drop.key}`;
-        case 'hatchingPotions':
-          return `Pet_HatchingPotion_${drop.key}`;
-        case 'food':
-          return `Pet_Food_${drop.key}`;
-        case 'eggs':
-          return `Pet_Egg_${drop.key}`;
-        case 'quests':
-          return `inventory_quest_scroll_${drop.key}`;
-        default:
-          return '';
-      }
-    },
-    getDropName (drop) {
-      switch (drop.type) {
-        case 'gear':
-          return this.content.gear.flat[drop.key].text();
-        case 'quests':
-          return this.content.quests[drop.key].text();
-        case 'hatchingPotions':
-          return this.$t('namedHatchingPotion', { type: this.content.hatchingPotions[drop.key].text() });
-        case 'food':
-          return this.content.food[drop.key].text();
-        case 'eggs':
-          return this.content.eggs[drop.key].text();
-        default:
-          return `Unknown type: ${drop.type}`;
-      }
-    },
    purchaseGems () {
      this.$root.$emit('bv::show::modal', 'buy-gems');
    },
--- a/website/client/src/components/shops/quests/quest-helper.mixin.js
+++ b/website/client/src/components/shops/quests/quest-helper.mixin.js
@@ -19,9 +19,9 @@ export const QuestHelperMixin = {
        case 'quests':
          return `inventory_quest_scroll_${drop.key}`;
        case 'mounts':
-          return `rewards_mount Mount_Icon_${drop.key}`;
+          return `Mount_Icon_${drop.key}`;
        case 'pets':
-          return `rewards_pet Pet-${drop.key}`;
+          return `stable_Pet-${drop.key}`;
        default:
          return `shop_${drop.key}`;
      }
--- a/website/client/src/components/shops/quests/questRewards.vue
+++ b/website/client/src/components/shops/quests/questRewards.vue
@@ -39,7 +39,7 @@
        label-class="purple"
      >
        <div slot="itemImage">
-          <div :class="getDropIcon(drop)"></div>
+          <Sprite :image-name="getDropIcon(drop)" />
        </div>
        <div slot="popoverContent">
          <quest-popover :item="drop" />
@@ -92,7 +92,7 @@
          :count="drop.amount"
        />
        <div slot="itemImage">
-          <div :class="getDropIcon(drop)"></div>
+          <Sprite :image-name="getDropIcon(drop)" />
        </div>
        <div slot="popoverContent">
          <equipmentAttributesPopover
@@ -133,6 +133,7 @@ import { QuestHelperMixin } from './quest-helper.mixin';
 import EquipmentAttributesPopover from '@/components/inventory/equipment/attributesPopover';
 import QuestPopover from './questPopover';
 import CountBadge from '../../ui/countBadge';
+import Sprite from '../../ui/sprite';

 export default {
  components: {
@@ -141,6 +142,7 @@ export default {
    ItemWithLabel,
    SectionButton,
    EquipmentAttributesPopover,
+    Sprite,
  },
  mixins: [QuestHelperMixin],
  props: ['quest'],
--- a/website/client/src/components/shops/shopItem.vue
+++ b/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>
+            :image-name="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: {
--- a/website/client/src/components/snackbars/notification.vue
+++ b/website/client/src/components/snackbars/notification.vue
@@ -8,10 +8,10 @@
        v-if="notification.type === 'drop'"
        class="icon-item"
      >
-        <div
-          :class="notification.icon"
+        <Sprite
+          :image-name="notification.icon"
          class="icon-negative-margin"
-        ></div>
+        />
      </div>

      <div
@@ -231,9 +231,13 @@ import star from '@/assets/svg/star.svg';
 import mana from '@/assets/svg/mana.svg';
 import sword from '@/assets/svg/sword.svg';
 import CloseIcon from '../shared/closeIcon';
+import Sprite from '@/components/ui/sprite';

 export default {
-  components: { CloseIcon },
+  components: {
+    CloseIcon,
+    Sprite,
+  },
  props: ['notification', 'visibleAmount'],
  data () {
    return {
--- a/website/client/src/components/tasks/spells.vue
+++ b/website/client/src/components/tasks/spells.vue
@@ -8,10 +8,10 @@
      <div class="spell">
        <div class="spell-border">
          <div class="mana">
-            <div
+            <Sprite
            class="img"
-              :class="`shop_${spell.key} shop-sprite item-img`"
-            ></div>
+              :imageName="`shop_${spell.key}`"
+            />
          </div>
        </div>
        <div class="details">
@@ -75,10 +75,9 @@
                  class="spell"
                >
                  <div class="details">
-                    <div
-                      class="img"
-                      :class="`shop_${skill.key} shop-sprite item-img`"
-                    ></div>
+                    <Sprite
+              :imageName="`shop_${skill.key}`"
+            />
                  </div>
                  <div
                    v-if="user.stats.lvl < skill.lvl"
@@ -401,10 +400,12 @@ import {
  setLocalSetting,
  getLocalSetting,
 } from '@/libs/userlocalManager';
+import Sprite from '@/components/ui/sprite';

 export default {
  components: {
    Drawer,
+    Sprite,
  },
  directives: {
    mousePosition: MouseMoveDirective,
--- a/website/client/src/components/ui/sprite.vue
+++ b/website/client/src/components/ui/sprite.vue
@@ -0,0 +1,50 @@
+<template>
+  <img
+    class="pixel-art"
+    v-if="imageName && imageName !== ''"
+    :src="imageUrl()"
+  >
+</template>
+
+<style>
+.pixel-art {
+  image-rendering: pixelated;
+}
+</style>
+
+<script>
+import GIF_SPRITES from '@/../../common/script/content/constants/gifSprites';
+
+export default {
+  props: {
+    imageName: {
+      type: String,
+    },
+    prefix: {
+      type: String,
+    },
+  },
+  methods: {
+    getFileType (name) {
+      if (GIF_SPRITES.includes(name)) {
+        return 'gif';
+      }
+      return 'png';
+    },
+    imageUrl () {
+      if (!this.imageName) {
+        return '';
+      }
+      let name = this.imageName;
+      if (name.indexOf(' ') !== -1) {
+        const components = name.split(' ');
+        name = components[components.length - 1];
+      }
+      if (this.prefix) {
+        name = `${this.prefix}_${name}`;
+      }
+      return `https://habitica-assets.s3.amazonaws.com/mobileApp/images/${name}.${this.getFileType(name)}`;
+    },
+  },
+};
+</script>
--- a/website/client/src/components/userMenu/profileStats.vue
+++ b/website/client/src/components/userMenu/profileStats.vue
@@ -18,9 +18,9 @@
              v-if="label !== 'skip'"
              :id="key"
              class="gear box"
-              :class="{white: equippedItems[key] && equippedItems[key].indexOf('base_0') === -1}"
+              :class="{white: isUsed(equippedItems, key)}"
            >
-              <div :class="`shop_${equippedItems[key]}`"></div>
+              <Sprite v-if="isUsed(equippedItems, key)" :image-name="`shop_${equippedItems[key]}`"/>
            </div>
            <b-popover
              v-if="label !== 'skip'
@@ -64,9 +64,9 @@
              v-if="label !== 'skip'"
              :id="key + 'C'"
              class="gear box"
-              :class="{white: costumeItems[key] && costumeItems[key].indexOf('base_0') === -1}"
+              :class="{white: isUsed(costumeItems, key)}"
            >
-              <div :class="`shop_${costumeItems[key]}`"></div>
+            <Sprite v-if="isUsed(costumeItems, key)" :image-name="`shop_${costumeItems[key]}`"/>
            </div>
            <!-- Show background on 8th tile rather than a piece of equipment.-->
            <div
@@ -75,7 +75,7 @@
              :class="{white: user.preferences.background}"
              style="overflow:hidden"
            >
-              <div :class="'icon_background_' + user.preferences.background"></div>
+              <Sprite :image-name="'icon_background_' + user.preferences.background" />
            </div>
            <b-popover
              v-if="label !== 'skip'
@@ -124,10 +124,10 @@
              class="box"
              :class="{white: user.items.currentPet}"
            >
-              <div
-                class="Pet"
-                :class="`Pet-${user.items.currentPet}`"
-              ></div>
+              <Sprite
+                :image-name="user.items.currentPet ?
+                  `stable_Pet-${user.items.currentPet}` : ''"
+              />
            </div>
          </div>
          <div class="pet-mount-well-text">
@@ -156,10 +156,10 @@
              class="box"
              :class="{white: user.items.currentMount}"
            >
-              <div
-                class="mount"
-                :class="`Mount_Icon_${user.items.currentMount}`"
-              ></div>
+              <Sprite
+                :image-name="user.items.currentMount ?
+                  `stable_Mount_Icon_${user.items.currentMount}` : ''"
+              />
            </div>
          </div>
          <div class="pet-mount-well-text">
@@ -330,6 +330,7 @@ import statsComputed from '@/../../common/script/libs/statsComputed';
 import { mapState } from '@/libs/store';
 import attributesGrid from '@/components/inventory/equipment/attributesGrid';
 import toggleSwitch from '@/components/ui/toggleSwitch';
+import Sprite from '@/components/ui/sprite';

 const DROP_ANIMALS = keys(Content.pets);
 const TOTAL_NUMBER_OF_DROP_ANIMALS = DROP_ANIMALS.length;
@@ -337,6 +338,7 @@ export default {
  components: {
    toggleSwitch,
    attributesGrid,
+    Sprite,
  },
  props: ['user', 'showAllocation'],
  data () {
@@ -417,6 +419,9 @@ export default {

  },
  methods: {
+    isUsed (items, key) {
+      return items[key] && items[key].indexOf('base_0') === -1;
+    },
    getGearTitle (key) {
      return this.flatGear[key].text();
    },
--- a/website/client/src/libs/createAnimal.js
+++ b/website/client/src/libs/createAnimal.js
@@ -37,6 +37,7 @@ export function createAnimal (egg, potion, type, _content, userItems) {
  return {
    key: animalKey,
    class: type === 'pet' ? `Pet Pet-${animalKey}` : `Mount_Icon_${animalKey}`,
+    imageName: type === 'pet' ? `stable_Pet-${animalKey}` : `stable_Mount_Icon_${animalKey}`,
    eggKey: egg.key,
    eggName: getText(egg.text),
    potionKey: potion.key,
--- a/website/client/src/mixins/avatarEditUtilities.js
+++ b/website/client/src/mixins/avatarEditUtilities.js
@@ -32,7 +32,7 @@ export const avatarEditorUtilities = { // eslint-disable-line import/prefer-defa
      option.key = key;
      option.pathKey = pathKey;
      option.active = userPreference === key;
-      option.class = this.createClass(type, subType, key);
+      option.imageName = this.createImageName(type, subType, key);
      option.click = optionParam => (option.gemLocked ? this.unlock(`${optionParam.pathKey}.${key}`) : this.set({ [`preferences.${optionParam.pathKey}`]: optionParam.key }));
      option.text = subType ? appearances[type][subType][key].text()
        : appearances[type][key].text();
@@ -60,8 +60,8 @@ export const avatarEditorUtilities = { // eslint-disable-line import/prefer-defa

      return option;
    },
-    createClass (type, subType, key) {
-      let str = `${type} ${subType} `;
+    createImageName (type, subType, key) {
+      let str = '';

      switch (type) {
        case 'shirt': {
@@ -74,14 +74,14 @@ export const avatarEditorUtilities = { // eslint-disable-line import/prefer-defa
        }
        case 'hair': {
          if (subType === 'color') {
-            str += `icon_hair_bangs_${this.user.preferences.hair.bangs || 1}_${key}`;
+            str += `color_hair_bangs_${this.user.preferences.hair.bangs || 1}_${key}`;
          } else {
-            str += `icon_hair_${subType}_${key}_${this.user.preferences.hair.color}`;
+            str += `hair_${subType}_${key}_${this.user.preferences.hair.color}`;
          }
          break;
        }
        case 'skin': {
-          str += `skin skin_${key}`;
+          str += `skin_${key}`;
          break;
        }
        default: {
--- a/website/common/script/content/constants/gifSprites.js
+++ b/website/common/script/content/constants/gifSprites.js
@@ -0,0 +1,40 @@
+export default [
+  'head_special_1',
+  'broad_armor_special_1',
+  'slim_armor_special_1',
+  'head_special_0',
+  'slim_armor_special_0',
+  'broad_armor_special_0',
+  'weapon_special_critical',
+  'weapon_special_0',
+  'shield_special_0',
+  'Pet-Wolf-Cerberus',
+  'stable_Pet-Wolf-Cerberus',
+  'armor_special_ks2019',
+  'slim_armor_special_ks2019',
+  'broad_armor_special_ks2019',
+  'eyewear_special_ks2019',
+  'head_special_ks2019',
+  'shield_special_ks2019',
+  'weapon_special_ks2019',
+  'Pet-Gryphon-Gryphatrice',
+  'stable_Pet-Gryphon-Gryphatrice',
+  'Mount_Head_Gryphon-Gryphatrice',
+  'Mount_Body_Gryphon-Gryphatrice',
+  'background_clocktower',
+  'background_airship',
+  'background_steamworks',
+  'Pet_HatchingPotion_Veggie',
+  'Pet_HatchingPotion_Dessert',
+  'Pet-HatchingPotion-Dessert',
+  'quest_windup',
+  'Pet-HatchingPotion_Windup',
+  'Pet_HatchingPotion_Windup',
+  'quest_solarSystem',
+  'quest_virtualpet',
+  'Pet_HatchingPotion_VirtualPet',
+  'Pet-Gryphatrice-Jubilant',
+  'stable_Pet-Gryphatrice-Jubilant',
+  'back_special_heroicAureole',
+  'Pet-HatchingPotion-Funghi',
+];