在前端开发中，经常需要使用到表情符号。而 wdt-emoji-bundle 是一个提供了海量表情符号的 npm 包，支持各种平台和设备，可以在 Web、React、Vue、Angular 等前端框架下方便地使用。本文将介绍该包的详细使用方法，并且给出实用的示例代码。
安装
你可以使用 npm 或 yarn 安装 wdt-emoji-bundle：
npm install wdt-emoji-bundle --save
或者
yarn add wdt-emoji-bundle
用法
在代码中引入 wdt-emoji-bundle：
import wdtEmojiBundle from 'wdt-emoji-bundle';
基本用法
通过 wdtEmojiBundle 对象获取表情信息：
const emoji = wdtEmojiBundle.getEmoji('smile');
console.log(emoji);输出结果：
-- -------------------- ---- -------
-
----- -------- ---- ---- ---- ----- --- ------- ------
---------- ----------
-------- --------
----- -----
--------- --------
--------- -
-------
-------
--
---------- ---
------- ----
-其中，getEmoji() 方法接受一个参数，表示需要获取的表情符号的名称。
渲染表情
使用 toImage() 方法可以将表情符号渲染为图片：
const emoji = wdtEmojiBundle.getEmoji('smile');
const img = wdtEmojiBundle.toImage(emoji.unified);
document.body.appendChild(img);渲染多个表情
使用 toHTML() 方法可以将多个表情符号渲染为 HTML 代码：
const emojis = [':smile:', ':heart:', ':rocket:'];
const html = wdtEmojiBundle.toHTML(emojis.join(' '));
document.body.innerHTML += html;自定义样式
你也可以自定义表情符号的 CSS 样式，例如修改表情大小、颜色等：
.emoji {
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
vertical-align: middle;
}然后在渲染表情时添加对应的 class：
const emojiCode = ':smile:';
const emoji = wdtEmojiBundle.getEmoji(emojiCode);
const img = wdtEmojiBundle.toImage(emoji.unified, {class: 'emoji'});
document.body.appendChild(img);示例代码
以下是一个完整的示例，演示如何使用 wdt-emoji-bundle 在 React 中渲染表情符号：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
-------- ------------ -
----- ----------- - ------
----- ----- - -----------------------------------
----- --- - ------------------------------------- ------- ----------
------ -
------------------
--
-
-------- ----- -
------ -
-----
--------- -----------
---
--------- ------------------ ---
----
---
---- ------ -------------------- -- ----- -----
----
------
--
-
------ ------- ----以上示例演示了如何在 React 组件中使用 wdt-emoji-bundle 渲染表情符号。在 Emoji 组件中，通过获取短名称并使用 toImage() 方法渲染表情符号。在 App 组件中，直接调用 Emoji 组件并传入表情符号的名称即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37182