Emoji napříč platformami

<!-- Přidejte před </body> -->
<script src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>
<script>
    // Převede všechny emoji na stránce na Twemoji
    twemoji.parse(document.body, {
        folder: 'svg',
        ext: '.svg'
    });
</script>

// Převést pouze určitý element
const emojiContainer = document.getElementById('emoji-grid');
twemoji.parse(emojiContainer, {
    folder: 'svg',
    ext: '.svg',
    className: 'twemoji' // Přidá CSS třídu
});

// Nebo pomocí selektoru
document.querySelectorAll('.emoji-content').forEach(el => {
    twemoji.parse(el);
});

/* Základní styl pro Twemoji */
img.twemoji, img.emoji {
    height: 1.2em;
    width: 1.2em;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.15em;
    display: inline-block;
}

/* Větší emoji v gridu */
.emoji-grid img.twemoji {
    height: 2em;
    width: 2em;
}

/* Animace při hoveru */
img.twemoji:hover {
    transform: scale(1.2);
    transition: transform 0.2s ease;
}

/* Vlastní velikosti */
.emoji-small img.twemoji { height: 1em; width: 1em; }
.emoji-medium img.twemoji { height: 1.5em; width: 1.5em; }
.emoji-large img.twemoji { height: 2em; width: 2em; }
.emoji-xlarge img.twemoji { height: 3em; width: 3em; }

npm install @twemoji/api

import twemoji from '@twemoji/api';

// V React komponentě
useEffect(() => {
    twemoji.parse(document.body);
}, []);

// Nebo jako utility funkce
export function parseEmoji(element) {
    return twemoji.parse(element, {
        base: 'https://cdn.jsdelivr.net/npm/@twemoji/svg-assets/',
        folder: '',
        ext: '.svg'
    });
}