Add "sprite" parameter to emoji_icon helper

The emoji_icon helper used to display the award emoji in Issue and
Merge Request views. By default the spritesheet is used, but passing
`sprite: false` to the `emoji_icon` helper makes the emoji render as
separate images.

For award emoji displayed by default (e.g. thumbs-up, thumbs-down, and
any that have been awarded to the issue/MR) the independent images are
used. Only when the full emoji menu is opened does the full spritesheet
load.

On a normal issue this change decreases the page load by 670KB or 250KB
depending on pixel density.

Resolves #14334.

1 files changed, 24 insertions, 9 deletions

diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index 24b90fef4fe..bcf8639c829 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -115,17 +115,32 @@ module IssuesHelper
     icon('eye-slash') if issue.confidential?
   end
 
-  def emoji_icon(name, unicode = nil, aliases = [])
+  def emoji_icon(name, unicode = nil, aliases = [], sprite: true)
     unicode ||= Emoji.emoji_filename(name) rescue ""
 
-    content_tag :div, "",
-      class: "icon emoji-icon emoji-#{unicode}",
-      title: name,
-      data: {
-        aliases: aliases.join(' '),
-        emoji: name,
-        unicode_name: unicode
-      }
+    data = {
+      aliases: aliases.join(" "),
+      emoji: name,
+      unicode_name: unicode
+    }
+
+    if sprite
+      # Emoji icons for the emoji menu, these use a spritesheet.
+      content_tag :div, "",
+        class: "icon emoji-icon emoji-#{unicode}",
+        title: name,
+        data: data
+    else 
+      # Emoji icons displayed separately, used for the awards already given
+      # to an issue or merge request.
+      content_tag :img, "",
+        class: "icon emoji",
+        title: name,
+        height: "20px",
+        width: "20px",
+        src: url_to_image("#{unicode}.png"),
+        data: data
+    end
   end
 
   def emoji_author_list(notes, current_user)