Como mostrar o Emoji na aplicação React

gostaria de mostrar emojis na minha página web numa aplicação react chat. O plano é dar ao usuário uma lista de emojis para selecionar. Como posso usar os códigos como '1F683' e fazê-los exibir o emoji na página? Preciso de apoiar o Chrome.

sou capaz de usar o css para mostrar o emoji. 

<div className="smiley"></div>

.smiley:after {
    content: "\01F683";
}

também posso ter uma lista de imagens e mapeá-las para o código e mostrar um elemento img por emoji.

Há outra maneira e qual é a melhor maneira de fazer isto?

Author: BeesNees, 2017-02-22
Source

2 answers

Todos os emojis são praticamente padronizados com o formato em 'Emoticons Cheat Sheet' , por isso o seu exemplo acima (\01F683) mapeia para railway_car na 'Emoticons Cheat Sheet'.

Pode ser melhor guardar os seus emojis com estes identificadores e mapeá-los para os emojis actuais mais tarde, sem se preocupar em codificar os próprios emoji () reais, ou não ser capaz de dizer/recordar o emoji actual representado pela sequência Unicode (\01F683).

Se quiseres mapear isto identificador legível pelo homem para a sequência/símbolo Unicode actual, você tem algumas opções, usando railway_car como exemplo:

Twemoji Awesome

Twemoji Awesome é como Font Awesome, mas com Emojis no Twitter.

Pode inserir um emoji como este, tal como o Font Awesome. 
<i class="twa twa-railway-car"></i>

Isto irá produzir o SVG correspondente:

[[16]} Dicionário Emoji Há um pacote npm devidamente chamado emoji-dictionary Isso permite mapear o nome do emoji para o carácter Unicode, se quiser usar o renderizador predefinido do navegador.

A utilização será então assim: 

emoji.getUnicode("railway_car");

Isto devolve (o que irá mostrar nos navegadores modernos/poderá quebrar nos navegadores mais antigos/etc).

 2
Author: Irvin Lim, 2017-02-23 07:24:44

Temos o unicode de emojis em W3C . Está ao alcance de {. Hex 2600-26FF.}.

Assim, podes gerá-lo sem CSS.

Verifique o exemplo abaixo 

class Emoji extends React.Component  {

  render() {
    const {title, code} = this.props;
    return <span className="emoji" title={title}>{code}</span> 
  }
}

class App extends React.Component {

renderEmojis() {
  const rangeEmojis = Array.from({length: 256}, (v, k) => (k + 9728).toString(16));
  
  return rangeEmojis.map((code, index) => <Emoji code={unescape ('%u' + code)} title={"My code is :"+code} key={'emj'+index} />) 

} 

render() {

  return (
  
    <div>
      {this.renderEmojis()}
 
    </div>
  )
}

}

ReactDOM.render(<App />, document.querySelector('#chat'))
.emoji {
  border: solid 1px #3e3e3e;
  width: 50px;
  height: 50px;
  cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section id="chat" />
 2
Author: Abdennour TOUMI, 2017-04-06 15:56:23