twemojiアイコンコンポーネントを最適にセットアップするにはどうすればよいですか？

manuel · 2023 年 6 月 30 日午後 5:19

私は、一部の場所で絵文字をアイコンとして使用したいテーマに取り組んでいます。意図した見た目は、おおよそ次のようになります。

これをコンポーネントとしてラップし、基本的にTwemojiスプライトシートを追加するだけです。これにより、絵文字をサイドバーメニューやカテゴリアイコンとして選択できるようになります。システムアイコンを完全にオーバーライドしたくはありません。

これは一般的に機能しますが、2つの問題についてご意見を伺いたいと思います。

セット全体で3000以上のアイコンがあります。ファイルサイズは8MBになります。オンラインで限定的なスプライトシートを見つけましたが、それは2MBでした。完全なセットは実際には機能せず、削減されたものが機能しました。アイコンセットで目指すべき制限は何ですか？
デフォルトでは、絵文字にはUnicodeの16進値がIDとして設定されています。そのため、絵文字とその16進値を見つけるためにTwemoji Cheatsheetのような絵文字ピッカーを使用する必要があります。例：

Screenshot from 2023-06-30 17-54-48364×497 15.8 KB

IDを実際のショートネームに自動的に変更する最善の方法を知っている人はいますか？そうすれば、「tw-books」と入力して選択できるようになりますか？

Lilly · 2023 年 6 月 30 日午後 5:43

今言えることは、はい、お願いしますこれが大好きです

Alexander · 2023 年 6 月 30 日午後 5:57

リンク先のページでは、絵文字の「絵文字マップ」（Unicode、名前などを含む）を取得するためにemojibaseを使用しているようです。同様のものを使用できますか？

components/SearchBox.jsx

main

import { useEffect, useState } from "react";
import css from "./SearchBox.module.scss";
import Fuse from "fuse.js";

export default function SearchBox({ setAvailabeEmojis, emojis }) {
    const fuse = new Fuse(emojis, {
        threshold: 0.1,
        keys: ["label", "tags", "emoji", "hexcode", "emoticon"],
    });

    const [query, setQuery] = useState("");

    function handleSearch(query) {
        if (query == "") {
            setAvailabeEmojis(emojis);
            return;
        }
        let results = fuse.search(query);
        let flatResults = Object.keys(results).reduce(function (r, k) {
            return r.concat(results[k].item);

This file has been truncated. show original

ところで、素晴らしい出来栄えです:smiley:

manuel · 2023 年 7 月 1 日午後 4:12

アレクサンダーさん、ありがとうございます！後押しが必要だったようです

これで動作するようになりましたスキンカラーや性別のバリエーションを除いた、主要な絵文字セットを追加しました。これは1869個のアイコン（Twemojiアセットフォルダ内の3689個のSVGファイルのうち）です。アイコンの名前にはtw-を接頭辞として、それに英語のショートコードを付けました。名前にはタグが含まれていないため、適切な絵文字を見つけるには、参照サイトを使用する必要があるかもしれません。例えば、このアイコンは、アイコンピッカーでgolfと入力しても表示されません。

テーマの準備ができたら、コンポーネントをtheme-componentsで共有します。すでに試してみたい方は、リポジトリはこちらです: GitHub - nolosb/discourse-twemoji-icons: Use twemojis as icons in Discourse.

system · 2023 年 7 月 31 日午後 4:12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

トピック		返信	表示
Twemoji Icons Theme component	4	840	2023 年 7 月 20 日
New Emoji picker feedback Announcements new-feature	41	5843	2017 年 10 月 15 日
Emoji selector and custom Emoji Feature emoji , rfc , spec	35	19692	2015 年 3 月 3 日
Convert Unicode standard emojis to selected emoji set Feature	2	2260	2015 年 7 月 14 日
Emojis update Announcements emoji	58	1723	2025 年 11 月 30 日

twemojiアイコンコンポーネントを最適にセットアップするにはどうすればよいですか？

関連トピック