Nuxt Nation 大会即将到来。加入我们，时间为 11 月 12 日至 13 日。
54.8K

twemoji
nuxt-twemoji

Nuxt 的 Twemoji 模块。将表情符号渲染为 SVG 元素或 PNG 图片。
764 次下载
7 星
v3.6.2
yizackyizack

nuxt-twemoji

nuxt-twemoji

npm version npm downloads License Tests Nuxt Modules

Nuxt 的 Twemoji 模块。将表情符号渲染为 SVG 元素或 PNG 图片

目录

功能

  • Nuxt 3 就绪
  • 支持 Emoji 15.1
  • 按字符渲染表情符号
  • 按码点渲染表情符号
  • 按定义对象渲染表情符号
  • 默认使用 SVG 渲染
  • 使用 localStorage 缓存 SVG
  • PNG 图片渲染选项
  • 来自原始 ex-Twitter 作者 (jdecked/twemoji) 分支存储库的 Twitter Emoji 资源
  • 来自 jsDelivr CDN 的资源
  • 多种使用方式

快速设置

  1. 将 nuxt-twemoji 依赖项添加到您的项目中
npx nuxi@latest module add twemoji
  1. 将 nuxt-twemoji 添加到 nuxt.config.ts 文件的 modules 部分
export default defineNuxtConfig({
  modules: [
    'nuxt-twemoji'
  ]
})

就是这样！您现在可以在您的 Nuxt 应用中使用 nuxt-twemoji ✨

模块配置

您可以通过将 twemoji 属性添加到 nuxt.config.ts 文件来配置模块。以下是默认配置

export default defineNuxtConfig({
  twemoji: {
    expiresIn: 3.154e+7 // SVG cache expiration time in seconds (1 year)
  }
})

组件

您可以根据您的 Nuxt 应用需求使用任何一个可用的组件。

名称描述SSR
Twemoji通过表情符号字符、码点或定义渲染 Twemojis。✔️
Twemojify解析文本并用 Twemoji svg 元素或 png 图片替换所有表情符号字符。✔️
TwemojiParse使用组件包装元素，它将解析所有找到的表情符号字符并替换为 Twemoji svg 或 png 图片元素。❌

用法 (Twemoji)

  1. 从推荐的 Unicode 表情符号列表中查找表情符号：https://unicode.org/emoji/charts-15.1/full-emoji-list.html
  2. 在项目中，使用组件 <Twemoji emoji="" />，其中 emoji 是表情符号字符或码点。
  3. 如果您在 Nuxt 应用中使用 SSR（服务器端渲染），此模块将在您的项目构建/生成过程中将表情符号 <svg> 或 <img> 元素注入到输出代码中。或者，如果未使用 SSR，则表情符号将在客户端运行时动态渲染。

Twemoji 属性

属性必填默认值类型
emoji是string 或 EmojiDefinition
size否1emstring
png否falseboolean

渲染

使用 emoji 属性按字符渲染表情符号。

<!-- Render SVG element -->
<Twemoji emoji="🚀" />

<!-- Resize -->
<Twemoji emoji="🚀" size="2em" />

<!-- Render PNG <img> element -->
<Twemoji emoji="🚀" png />

使用 emoji 属性按码点渲染表情符号。

<Twemoji emoji="1F60A" />

或

<Twemoji emoji="U+1F60A" />

使用 emoji 属性按 定义 渲染表情符号。

<script setup>
import { twSmilingFaceWithSmilingEyes } from 'nuxt-twemoji/emojis'
</script>

<template>
  <Twemoji :emoji="twSmilingFaceWithSmilingEyes" />
</template>

表情符号文件是使用自建的 generateEmojis.js 脚本生成的，该脚本从 Unicode 公共 Emoji 15.1 文件（位于 https://unicode.org/Public/emoji/15.1/emoji-test.txt）获取表情符号数据。

定义

EmojiDefinition 类型表示具有这三个特定字符串属性的对象

  • code 表示与表情符号关联的代码。
  • emoji 表示实际的表情符号。
  • name 表示表情符号的名称。
type EmojiDefinition = {
  code: string,
  emoji: string,
  name: string
}

更多示例

查看 🏀 在线游乐场 以获取更多示例。

Twemoji 默认 CSS

<svg> 和 <img> 标记都将分配 .twemoji 类。这些是默认样式，但您可以使用类名添加自己的样式。

.twemoji {
  display: inline-block;
  vertical-align: middle;
}

用法 (Twemojify)

此组件解析字符串文本并用 Twemoji svg 元素或 png 图片替换所有表情符号字符。

  1. 在项目中，使用组件 <Twemojify text="" />，其中 text 是一个字符串。
  2. 如果您在 Nuxt 应用中使用 SSR（服务器端渲染），此模块将在您的项目构建/生成过程中将表情符号 <svg> 或 <img> 元素注入到输出代码中。或者，如果未使用 SSR，则表情符号将在客户端运行时动态渲染。

Twemojify 属性

属性必填默认值类型
text是string
png否falseboolean

解析器

此组件使用 jdecked 的 @twemoji/parser 包来识别字符串中的表情符号实体。

使用 text 属性解析字符串中的所有表情符号字符

<!-- Replaces ❤️ and 🚀 with SVG elements -->
<Twemojify text="I ❤️ Nuxt 🚀" />

<!-- Replaces ❤️ and 🚀 with PNG images -->
<Twemojify text="I ❤️ Nuxt 🚀" png />

Twemojify 默认 CSS

<svg> 和 <img> 标记都将分配 .twemojify 类。这些是默认样式，但您可以使用类名添加自己的样式。

这些样式规则确保解析的表情符号与包装元素具有相同的尺寸。

.twemojify {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}

用法 (TwemojiParse)

此组件将解析所有找到的表情符号字符。

  1. 将元素包装在 <TwemojiParse> </TwemojiParse> 组件内
  2. 如果要使用 png 图片解析表情符号，请在组件中使用 png 属性，否则它将默认解析 svg 图片。

注意：此组件有一个缺点，因为它不支持 SSR（服务器端渲染），因为它是在挂载 Vue 生命周期期间执行的，仅在客户端运行。

TwemojiParse 属性

属性必填默认值类型
png否falseboolean

DOM 解析器

此组件使用 jdecked 的 @twemoji/api 包及其 DOM 解析器 api。

<!-- Replaces 🚀 with SVG image -->
<TwemojiParse>
  <p>Nuxt Twemoji 🚀</p>
</TwemojiParse>

<!-- Replaces 🚀 with PNG image -->
<TwemojiParse png>
  <p>Nuxt Twemoji 🚀</p>
</TwemojiParse>

<!-- You can wrap any amount of emojis inside the component -->
<TwemojiParse>
  <p>Nuxt Twemoji 🚀</p>
  <div>
    <p>I ❤️ Nuxt 🚀</p>
  </div>
</TwemojiParse>

TwemojiParse 默认 CSS

<img> 标记将分配 .twemojiParse 类。这些是默认样式，但您可以使用类名添加自己的样式。

这些样式规则确保解析的表情符号与包装元素具有相同的尺寸。

img.twemojiParse {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}

鸣谢

开发

# Install dependencies
pnpm install

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch

# Run typecheck
pnpm test:types

# Release new version
pnpm release