jm-david / emoji-mart-vue

One component to pick them all 👊🏼
https://jm-david.github.io/emoji-mart-vue
BSD 3-Clause "New" or "Revised" License
603 stars 82 forks source link

Can emoji inherit parent font size? #71

Closed acirinelli closed 4 years ago

acirinelli commented 4 years ago

Would it be possible to allow the inline to inherit the parent text font size?

Ex. Right now these emoji's are the same size. Removing :size defaults them to 24. Having to set the size manually every time is a pain. Would be great to put inherit or 0 in the size as an alternative.

<h1><emoji emoji=":moneybag:" :size="20" :native="true" /> Test</h1>
<p><emoji emoji=":moneybag:" :size="20" :native="true" /> Test</p>
acirinelli commented 4 years ago

Possible solution:

Update nativeEmojiStyles() function:

nativeEmojiStyles: function nativeEmojiStyles() {

      if (this.size === 0) {
        var styles = { fontSize: 'inherit' };
      } else {
        var styles = { fontSize: this.size + 'px' };

        if (this.forceSize) {
          styles.display = 'inline-block';
          styles.width = this.size + 'px';
          styles.height = this.size + 'px';
        }
      }
      return styles;
}

Remove font-size from this line. Why is this even included?

// module
exports.push([module.i, "\n.emoji-mart-emoji[data-v-7f853594] {\n  position: relative;\n  display: inline-block;\n  font-size: 0;\n}\n\n", ""]);
exports.push([module.i, "\n.emoji-mart-emoji[data-v-7f853594] {\n  position: relative;\n  display: inline-block;\n}\n\n", ""]);
acirinelli commented 4 years ago

I realize now that this is probably coming from emoji-mart ... I'll close this as the package doesn't seem to be maintained anyways.