Twemoji · Nuxt モジュール

nuxt-twemoji

Nuxt用Twemojiモジュール。絵文字をSVG要素またはPNG画像としてレンダリングします

機能

Nuxt 3対応
Emoji 15.1サポート
文字による絵文字のレンダリング
コードポイントによる絵文字のレンダリング
定義オブジェクトによる絵文字のレンダリング
デフォルトでSVGレンダリング
localStorageによるSVGキャッシュ
PNG画像レンダリングオプション
元の旧Twitter作者（jdecked/twemoji）のフォークリポジトリからのTwitter絵文字アセット
jsDelivr CDNからのアセット
複数の使用方法

クイックセットアップ

プロジェクトにnuxt-twemoji依存関係を追加します

npx nuxi@latest module add twemoji

nuxt.config.tsのmodulesセクションにnuxt-twemojiを追加します

export default defineNuxtConfig({
  modules: [
    'nuxt-twemoji'
  ]
})

以上です！これでNuxtアプリでnuxt-twemojiを使用できます✨

モジュール構成

nuxt.config.tsファイルにtwemojiプロパティを追加することで、モジュールを設定できます。以下はデフォルトの設定です。

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`)

推奨されるUnicode絵文字リストから絵文字を見つけてください: https://unicode.org/emoji/charts-15.1/full-emoji-list.html
プロジェクトでは、コンポーネント<Twemoji emoji="" />を使用します。ここで、emojiは絵文字文字またはコードポイントです。
NuxtアプリケーションでSSR（サーバーサイドレンダリング）を使用している場合、このモジュールは、プロジェクトのビルド/生成プロセス中に、絵文字の<svg>または<img>要素を出力コードに挿入します。または、SSRを使用しない場合、絵文字はクライアントの実行時に動的にレンダリングされます。

`Twemoji`プロパティ

プロパティ	必須	デフォルト	型
`emoji`	はい		`string`または`EmojiDefinition`
`size`	いいえ	`1em`	`string`
`png`	いいえ	`false`	`boolean`

レンダリング

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型は、次の3つの特定の文字列プロパティを持つオブジェクトを表します。

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画像に置き換えます。

プロジェクトでは、コンポーネント<Twemojify text="" />を使用します。ここで、textは文字列です。
NuxtアプリケーションでSSR（サーバーサイドレンダリング）を使用している場合、このモジュールは、プロジェクトのビルド/生成プロセス中に、絵文字の<svg>または<img>要素を出力コードに挿入します。または、SSRを使用しない場合、絵文字はクライアントの実行時に動的にレンダリングされます。

`Twemojify`プロパティ

プロパティ	必須	デフォルト	型
`text`	はい		`string`
`png`	いいえ	`false`	`boolean`

パーサー

このコンポーネントは、文字列内の絵文字エンティティを識別するために、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`)

このコンポーネントは、見つかったすべての絵文字文字を解析します。

<TwemojiParse> </TwemojiParse>コンポーネント内で要素をラップします
PNG画像で絵文字を解析する場合は、コンポーネントでpngプロパティを使用します。それ以外の場合は、デフォルトでSVG画像を解析します。

注意：このコンポーネントは、マウントされたVueライフサイクル中に実行され、クライアント側でのみ機能するため、SSR（サーバーサイドレンダリング）をサポートしていないという欠点があります。

`TwemojiParse`プロパティ

プロパティ	必須	デフォルト	型
`png`	いいえ	`false`	`boolean`

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;
}

クレジット

jdecked/twemojiからのTwitter絵文字アセット
デフォルトCDN jsDelivr
Unicode公開Emoji 15.1ファイル
SSR Vueアプリケーションを作成するためのJavaScriptフレームワークであるNuxt、およびそのモジュール作成ガイド

開発

# 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