vuefilemanager/resources/js/components/Others/Emoji.vue

<template>
    <div v-if="emoji">
        <div v-if="config.defaultEmoji === 'twemoji'" v-html="transferEmoji" style="font-size: inherit; transform: scale(0.95)"></div>
        <div v-if="config.defaultEmoji === 'applemoji'" style="font-size: inherit">
            {{ emoji.char }}
        </div>
    </div>
</template>

<script>
import twemoji from 'twemoji'
import { mapGetters } from 'vuex'

export default {
    name: 'Emoji',
    props: ['emoji'],
    data() {
        return {
            isApple: false,
            sizeClass: undefined,
        }
    },
    computed: {
        ...mapGetters(['config']),
        transferEmoji() {
            return twemoji.parse(this.emoji.char, {
                folder: 'svg',
                ext: '.svg',
                attributes: () => ({
                    loading: 'lazy',
                }),
            })
        },
    },
}
</script>

<style lang="css">
.emoji {
    height: 1em;
    width: 1em;
    font-size: inherit;
}
</style>