Add emoji icons on input field

@gych if I use image emoji icons so I also need to store emoji images into storage. I think this is not good to store.

Can you provide me any other solution like some js library to display emojis (like Facebook or WhatsApp) but I dont want gif. Only 10-20 emoji are enough for me.

@amitsolanki24_ There are packages that contain emoji's as images and svg's, I'm not sure if there's another solution. Those images are also small in size.

Check this package for example: https://github.com/twitter/twemoji

@gych so how can I store these emojis.

@amitsolanki24_ You have to install the package npm install twemoji

There are also community projects available based on Twemoji, for example if you want to use the package with php or vue: https://github.com/twitter/twemoji?tab=readme-ov-file#community-projects

@gych is this best or there are some other packages?

@amitsolanki24_ Yes twemoji is currently still the best, its originally created by twitter and discord also uses it.

Just a note, I checked the original repository and seems like the original temoji repo by twitter is not longer being maintaned. This is because when twitter became X a lot of devs were removed.

Its better to use this instead https://github.com/jdecked/twemoji

Its a fork from the original twemoji repository maintained by former twitter employee. This also contains the latest update also supports unicode 15.0 spec

@gych

Can I set same font for unicode for all devices https://www.quora.com/Why-do-emojis-look-different-on-different-software

@amitsolanki24_ You can try by using noto (noto color emoji) font by Google, I think twemoji also has a font available for this but not sure if its still getting maintained so for a font I would choose the font by google.

Check this page for Noto font, it has instructions on how to use it: https://fonts.google.com/selection/embed

You can first test it without downloading the font to see if its works.

@gych

I need to store all html of a comment if I want to display emoji same across all browsers and devices right when I using twemoji?

<div contenteditable="true" class="form-control border-0 editableDiv pl-1" data-placeholder="Add comment..."> <img draggable="false" class="emoji" alt="😍" src="https://twemoji.maxcdn.com/v/14.0.2/72x72/1f60d.png"> <img draggable="false" class="emoji" alt="😎" src="https://twemoji.maxcdn.com/v/14.0.2/72x72/1f60e.png"></div>

@amitsolanki24_

See these examples if you want to use the main twemijo package:

• https://www.freecodecamp.org/news/how-to-use-twitter-emoji-on-your-website/
• https://gist.github.com/Armster15/db063ab0dc5be699ae07a067a7333752

There's also a community project made of twemoji which lets u use classes like font awesome https://github.com/SebastianAigner/twemoji-amazing

And you can also try Noto font from google as I already mentioned in my previous reply

@gych when I stored text into database should I save only unicode characters for emoji or stored img tags parse by twemoji and whenever I want to display it than use twemoji parse() function

@amitsolanki24_ Only save the unicode in the database when using twemoji.parse() it will convert the unicode to twemoji