如何最好地设置 twemoji 图标组件？

manuel · 2023 年6 月 30 日 17:19

我正在开发一个主题，希望在某些地方使用表情符号作为图标。预期的外观大致如下：

我想将此包装成一个组件，基本上是添加一个 Twemoji 精灵图。这样就可以在侧边栏菜单和类别图标中选择表情符号。我不想完全覆盖系统图标。

这总体上是可行的，但我很想听听关于两个问题的看法：

完整的集合有 3000 多个图标。文件大小将为 8MB。我在网上找到了一个有限的精灵图，大小为 2MB。完整集合实际上不起作用，缩减后的集合却可以。我应该为图标集设定多大的限制？
默认情况下，表情符号的 ID 是 Unicode 十六进制值。因此，您需要使用像 Twemoji Cheatsheet 这样的表情符号选择器来查找您的表情符号及其十六进制值，然后输入该值。例如：

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

有人知道如何最好地自动化更改 ID 为实际的短名称吗？这样就可以通过输入“tw-books”来选择？

Lilly · 2023 年6 月 30 日 17:43

我现在只想说，请给我爱死这个了

Alexander · 2023 年6 月 30 日 17:57

您链接的页面似乎使用了 emojibase 来获取“emoji map”（包含 Unicode、名称等），也许您可以使用类似的东西？

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

顺便说一句，它看起来很棒

manuel · 2023 年7 月 1 日 16:12

感谢 Alexander！看来我需要一点推动

现在这样可以用了我添加了主要的表情符号集，没有变体（如肤色和性别）。这是一个包含 1869 个图标的集合（在 Twemoji 资源文件夹的 3689 个 svg 文件中）。我使用 tw- 作为前缀，加上英文的短代码来命名图标。人们可能仍然需要使用参考网站来查找正确的表情符号，因为名称不包含任何标签。例如，如果你在图标选择器中输入高尔夫，这个图标不会显示出来：

准备好主题后，我将在 theme-components 中共享该组件。如果有人想提前尝试一下，仓库地址是 GitHub - nolosb/discourse-twemoji-icons: Use twemojis as icons in Discourse.

system · 2023 年7 月 31 日 16: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 图标组件？

相关话题