Use emoji expressions on the front end

I recently encountered emoji display problems, and finally used the emojify.js library to solve it, github: emojify.js .

Install

npm install emojify.js --save

or

yarn add emojify.js

introduce

The principle of emojify.js is to convert special characters in strings into span or div or img

quote

Write a separate ts file and do some configuration

 // /utils/emojify.ts
import emojify from "emojify.js";
emojify.setConfig({ mode: "data-uri" });

export default emojify;

main.ts introduces styles:

// emoji
import "../node_modules/emojify.js/dist/css/data-uri/emojify.min.css";

use

In the page:

import emojify from "../../utils/emojify";

// 使用emojify.replace来转换带有emoji标识的字符串
const emojifyMsg = computed(() => {
      return emojify.replace(':rage:');
    });

Emoji string comparison: https://www.webfx.com/tools/emoji-cheat-sheet/

Since the mode: "data-uri" is set, the emojify.replace string will be converted into a label (string) with a class name. After v-html conversion, the following DOM elements are obtained:

Make some style adjustments, here I directly overwrite the original .emoji in App.vue to meet the project requirements.

that's all!