前言
在 web 开发中，emoji 表情已经成为了很重要的一部分。在实际开发中，有时候需要在客户端使用表情，这时候就可以选择使用 npm 包 weiboticons。
weiboticons 简介
weiboticons 是一个 npm 包，它是一个微博风格的表情包，包含了大量丰富的表情图标。它采用了 SVG 格式的表情图标，支持按需引入和自定义。
安装
首先需要在项目中安装 weiboticons：
npm install weiboticons --save
安装完成后，就可以在 js 文件中使用它了。
使用方法
下面介绍如何使用 weiboticons。
引入 weiboticons
在使用 weiboticons 之前，需要先引入它。可以使用以下代码：
import weiboticons from 'weiboticons';
显示表情
weiboticons 能够让你的应用程序在没有任何样式的情况下显示表情。它基于同样的 HTML 实现，而不是使用自定义字体的技术。这意味着每个表情都是矢量图形，并且可以为每个表情设置 CSS 样式。
下面是一个简单的示例，展示如何使用 weiboticons 显示笑脸表情：
<div>
<svg class="weiboticon" viewBox="0 0 14 14">
<use xlink:href="${weiboticons}#icon-smile"></use>
</svg>
</div>上面代码中的 weiboticons 变量是从 npm 包引入的。在 <use> 标签中，使用了表情的名称 icon-smile。
自定义表情
如果您不想使用 npm 包中默认提供的表情，则可以创建自己的表情。首先，需要在 npm 包中找到 SVG 文件夹，然后将您的表情图像放入其中。然后，使用类似于下面的代码引用您的自定义表情：
<div>
<svg class="weiboticon-custom" viewBox="0 0 14 14">
<use xlink:href="${weiboticons}#icon-custom"></use>
</svg>
</div>这里的 icon-custom 是您的自定义表情的名称。注意要在变量 weiboticons 前写上 # 符号，然后再将表情的名称加上即可。
按需引入
如果您只想引入 npm 包中的一部分表情，则需要使用按需引入。下面是一个例子：
import { smilenew, heart } from 'weiboticons';这里只引用了 smilenew 和 heart 两种表情。
修改表情大小
要调整单个表情的大小，只需要将它的 viewBox 放大或缩小即可。
例如，要将表情大小调整为 28x28，可以使用下面的代码：
<div>
<svg class="weiboticon-lg" viewBox="0 0 14 14" style="width: 28px; height: 28px;">
<use xlink:href="${weiboticons}#icon-smile"></use>
</svg>
</div>这样，笑脸表情就变成了 28x28 的大小。
结论
由此可见，weiboticons 是一个非常棒的 npm 包，提供了许多微博风格的表情供我们使用。它能够很好地解决在 web 开发中需要使用表情的问题。如果你正在进行 web 开发，建议尝试使用这个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdebf