通过 100+ 条技巧学习 Nuxt!

twemoji
nuxt-twemoji

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

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 图像渲染选项
  • 来自原 Twitter 作者的 Twitter 表情符号资源(jdecked/twemoji)fork 仓库
  • 来自 jsDelivr CDN 的资源
  • 多种使用方式

快速设置

  1. nuxt-twemoji 依赖项添加到您的项目
npx nuxi@latest module add twemoji
  1. nuxt-twemoji 添加到 nuxt.config.tsmodules 部分
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通过表情符号字符、代码点或定义渲染 Twemoji。✔️
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 属性

属性必需默认值类型
emojistringEmojiDefinition
size1emstring
pngfalseboolean

渲染

使用 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
}

更多示例

查看 🏀 在线 Playground 获取更多示例。

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 属性

属性必需默认值类型
textstring
pngfalseboolean

解析器

此组件使用 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 的 mounted 生命周期期间执行的,仅在客户端运行。

TwemojiParse 属性

属性必需默认值类型
pngfalseboolean

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