Insert Twemojis in React without dependencies

Insert the following script between <head></head> tags in index.html:

HTML
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>

Now create a component in React to trigger the svg icons:

jsx
import React, { useEffect } from 'react';

const Twemoji = ({ emoji }) => {
    
    useEffect(() => {
        
        window.twemoji.parse(document.getElementById('root'), {folder: 'svg', ext: '.svg'} );  
        
    });
    
    return(
        
        <span className = 'Twemoji'>{emoji}</span>
        
    );
    
}

export default Twemoji;

Now you can use the prior component to insert the Twemojis:

jsx
import React   from 'react';
import Twemoji from './Twemoji';

const App = () => {
    
    return(
        <div>
            <p>Insert Twemojis like this bear:</p>
            <Twemoji emoji = {'🐻'}/>
            <p>And it will be replaced by a svg.</p>
        </div>
    );
    
}

export default App;

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.

Insert Twemojis in React without dependencies

More articles