JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

<h1>I'm good <span emoji="🚀">🚀</span></h1>
<p>These <span emoji="👏">👏</span> are <span emoji="👏">👏</span> some <span emoji="👏">👏</span> emoji <span emoji="💩">💩</span></p>
<div style="font-size: 100px">heck yeah <span emoji="😎">har</span></div>

<img src="https://twemoji.maxcdn.com/svg/1f680.svg" alt="">

CSS

[emoji] {
    display: inline;
	vertical-align: 0;
    background-repeat: no-repeat;
    background-position: center center;
	margin: 0 .05em 0 .1em;
	color: transparent !important;
}

JavaScript

const getSrc = (emojiStr) => {
debugger
	let hex = '';
	if (/^[a-fA-F0-9-]+$/.test(emojiStr)) {
		hex = emojiStr.toLowerCase();
	}
	else {
		// split the string by code points, then map to hex code points
		// turns 👨🏻‍💻 into 1f468-1f3fb-200d-1f4bb
		// NOTE: until we add a .tsconfig and compile to ES6, this is how you iterate over an emoji string.
		// in the future, we can use the commented line (with [...emojiStr]) instead.
		// let chars = getSymbols(emojiStr);
		// actually, this works, and doesn't get down-compiled
		let chars = Array.from(emojiStr);
		hex = chars.map(c => c.codePointAt(0).toString(16)).join('-').toLowerCase();
	}
	// const hex = [...emojiStr].map(c => c.codePointAt(0).toString(16)).join('-').toLowerCase();

	// return `https://cdnjs.cloudflare.com/ajax/libs/twemoji/2.0.0/svg/${cp}.svg`;
	// these also work
	// https://twemoji.maxcdn.com/v/12.1.5/svg/2764.svg
	// https://twemoji.maxcdn.com/v/12.1.5/72x72/2764.png
	return `https://abs-0.twimg.com/emoji/v2/svg/${hex}.svg`
}

document.querySelectorAll('[emoji]').forEach(el => {
	let src = getSrc(el.getAttribute('emoji'))
  console.log(src)
  el.style.backgroundImage = `url(${src})`
})