絵文字でカラフルレンダリング

こんにちわ。nap5です。

絵文字でカラフルレンダリングするやり方の一つを紹介したいと思います。

https://stackoverflow.com/questions/51640509/what-is-the-correct-way-to-convert-unicode-to-emoji/51640765

What is the correct way to convert Unicode to emoji?

https://github.com/mathiasbynens/emoji-regex

GitHub - mathiasbynens/emoji-regex: A regular expression to match all Emoji-only symbols as per the Unicode Standard.

https://stackoverflow.com/questions/43242440/javascript-unicode-emoji-regular-expressions

javascript unicode emoji regular expressions

https://github.com/twitter/twemoji

GitHub - twitter/twemoji: Emoji for everyone. https://twemoji.twitter.com/

完成するUIは以下のようなイメージになります。

CodePenに動作確認できるサンプルを置きました。

実装のポイントとしては見た目の隙間をなくすために、行ごとにflexスタイルを適用させて敷き詰めている感じを出しています。

自分の好きな絵文字で表現してみると面白いかもしれません。

簡単ですが、以上になります。