feat: Adds Spritesheets for Custom Emojis

see - https://github.com/missive/emoji-mart/pull/251/files

README.md

@@ -218,7 +218,7 @@ emojiFallback = (emoji: any, props: any) => emoji ? `:${emoji.shortNames[0]}:` :
 
 ## Custom emojis
 
-You can provide custom emojis which will show up in their own category.
+You can provide custom emojis which will show up in their own category. You can either use a single image as imageUrl or use a spritesheet as shown in the second object.
 
 ```ts
 const customEmojis = [
@@ -230,6 +230,19 @@ const customEmojis = [
     keywords: ['github'],
     imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
   },
+  {
+    name: 'Test Flag',
+    short_names: ['test'],
+    text: '',
+    emoticons: [],
+    keywords: ['test', 'flag'],
+    spriteUrl: 'https://unpkg.com/[email protected]/img/twitter/sheets-256/64.png',
+    sheet_x: 1,
+    sheet_y: 1,
+    size: 64,
+    sheetColumns: 52,
+    sheetRows: 52,
+  },
 ]
 ```
 ```html

src/app/app.component.ts

@@ -20,6 +20,18 @@ const CUSTOM_EMOJIS = [
     keywords: ['github'],
     imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7',
   },
+  {
+    name: 'Test Flag',
+    short_names: ['test'],
+    keywords: ['test', 'flag'],
+    spriteUrl:
+      'https://unpkg.com/[email protected]/img/twitter/sheets-256/64.png',
+    sheet_x: 1,
+    sheet_y: 1,
+    size: 64,
+    sheetColumns: 52,
+    sheetRows: 52,
+  },
 ];
 
 @Component({

src/lib/emoji/data/data.interfaces.ts

@@ -44,6 +44,8 @@ export interface EmojiData {
   imageUrl?: string;
   colons?: string;
   skin?: Emoji['skin'];
+  spriteUrl?: string;
+  sheetRows?: string;
 }
 
 export interface EmojiVariation {

src/lib/emoji/emoji.component.ts

@@ -72,6 +72,8 @@ export class EmojiComponent implements OnChanges, Emoji {
   @Input() fallback?: Emoji['fallback'];
   @Input() hideObsolete = false;
   @Input() SHEET_COLUMNS = 52;
+  @Input() sheetRows: number;
+  @Input() sheetColumns: number;
   @Output() emojiOver: Emoji['emojiOver'] = new EventEmitter();
   @Output() emojiLeave: Emoji['emojiLeave'] = new EventEmitter();
   @Output() emojiClick: Emoji['emojiClick'] = new EventEmitter();
@@ -122,9 +124,22 @@ export class EmojiComponent implements OnChanges, Emoji {
         width: `${this.size}px`,
         height: `${this.size}px`,
         display: 'inline-block',
-        backgroundImage: `url(${data.imageUrl})`,
-        backgroundSize: 'contain',
       };
+      if (data.spriteUrl) {
+        this.style = {
+          ...this.style,
+          backgroundImage: `url(${data.spriteUrl})`,
+          backgroundSize: `${100 * this.sheetColumns}% ${100 *
+            this.sheetRows}%`,
+          backgroundPosition: this.emojiService.getSpritePosition(data.sheet, this.sheetColumns),
+        }
+      } else {
+        this.style = {
+          ...this.style,
+          backgroundImage: `url(${data.imageUrl})`,
+          backgroundSize: 'contain',
+        }
+      }
     } else {
       if (data.hidden.length && data.hidden.includes(this.set)) {
         if (this.fallback) {

src/lib/picker/emoji-search.service.ts

@@ -168,7 +168,7 @@ export class EmojiSearch {
         .filter(a => a);
 
       if (allResults.length > 1) {
-        results = intersect.apply(null, allResults);
+        results = intersect.apply(null, allResults as any);
       } else if (allResults.length) {
         results = allResults[0];
       } else {