diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html
index 6606bad76..4875fb1de 100644
--- a/packages/core/demo/index.html
+++ b/packages/core/demo/index.html
@@ -225,6 +225,10 @@
Custom Discord Emojis
+ They can also be jumbo sized to represent if the message only has emojis:
+
+
+
Server Invites
diff --git a/packages/core/src/components/discord-custom-emoji/DiscordCustomEmoji.ts b/packages/core/src/components/discord-custom-emoji/DiscordCustomEmoji.ts
index 036edcbce..3b2f132c8 100644
--- a/packages/core/src/components/discord-custom-emoji/DiscordCustomEmoji.ts
+++ b/packages/core/src/components/discord-custom-emoji/DiscordCustomEmoji.ts
@@ -1,5 +1,6 @@
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import type { Emoji } from '../../types.js';
import { getGlobalEmojiUrl } from '../../util.js';
@@ -22,6 +23,12 @@ export class DiscordCustomEmoji extends LitElement {
vertical-align: bottom;
}
+ .discord-custom-emoji .discord-custom-jumbo-emoji-image {
+ width: 3rem;
+ height: 3rem;
+ min-height: 3rem;
+ }
+
.discord-embed-custom-emoji {
display: inline-block;
}
@@ -65,6 +72,14 @@ export class DiscordCustomEmoji extends LitElement {
@property({ type: Boolean, attribute: 'embed-emoji' })
public accessor embedEmoji: boolean;
+ /**
+ * Determines whether or not the emoji is of "jumbo size",
+ * This means it is larger and is what Discord uses when the message exclusively has emojis,
+ * up to a maximum of 30 emojis.
+ */
+ @property({ type: Boolean, attribute: 'jumbo' })
+ public accessor jumbo: boolean;
+
public override willUpdate() {
if (!this.url && Boolean(this.name)) {
const emojiFromGlobal = getGlobalEmojiUrl(this.name) ?? this.customEmojisMap[this.name];
@@ -78,11 +93,24 @@ export class DiscordCustomEmoji extends LitElement {
protected override render() {
const name = `:${this.name}:`;
- const emojiClassName = this.embedEmoji ? 'discord-embed-custom-emoji' : 'discord-custom-emoji';
- const emojiImageClassName = this.embedEmoji ? 'discord-embed-custom-emoji-image' : 'discord-custom-emoji-image';
- return html` `;
}
}