# 如何最好地设置 twemoji 图标组件？ **URL:** \ **Category:** Development\ **Created:** [2023年六月30日 17:19 UTC](https://meta.discourse.org/t/how-would-i-best-setup-a-twemoji-icons-component/270181 "2023-06-30T17:19:40Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)\ **Post date:** [2023年六月30日 17:19 UTC](https://meta.discourse.org/t/how-would-i-best-setup-a-twemoji-icons-component/270181/1 "2023-06-30T17:19:40Z")
我正在开发一个主题，希望在某些地方使用表情符号作为图标。预期的外观大致如下： ![Screenshot from 2023-06-30 17-52-59](https://global.discourse-cdn.com/meta/original/4X/7/2/3/723e212022436c868e52582fd23c6401a1075d1b.png) 我想将此包装成一个组件，基本上是添加一个 Twemoji 精灵图。这样就可以在侧边栏菜单和类别图标中选择表情符号。我不想完全覆盖系统图标。 这总体上是可行的，但我很想听听关于两个问题的看法： - 完整的集合有 3000 多个图标。文件大小将为 8MB。我在网上找到了一个有限的精灵图，大小为 2MB。完整集合实际上不起作用，缩减后的集合却可以。我应该为图标集设定多大的限制？ - 默认情况下，表情符号的 ID 是 Unicode 十六进制值。因此，您需要使用像 [Twemoji Cheatsheet](https://twemoji-cheatsheet.vercel.app/) 这样的表情符号选择器来查找您的表情符号及其十六进制值，然后输入该值。例如： ![Screenshot from 2023-06-30 17-54-48](https://global.discourse-cdn.com/meta/original/4X/2/8/7/28796409a93debd55a4b3ec016f56ced823e1e58.png) 有人知道如何最好地自动化更改 ID 为实际的短名称吗？这样就可以通过输入“tw-books”来选择？ ---
**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\ **Post date:** [2023年六月30日 17:43 UTC](https://meta.discourse.org/t/how-would-i-best-setup-a-twemoji-icons-component/270181/2 "2023-06-30T17:43:08Z")
我现在只想说，请给我 😁 爱死这个了 😻 ---
**Author:** ![Alexander](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alexander/32/497634_2.png) [@Alexander](https://meta.discourse.org/u/Alexander)\ **Post date:** [2023年六月30日 17:57 UTC](https://meta.discourse.org/t/how-would-i-best-setup-a-twemoji-icons-component/270181/3 "2023-06-30T17:57:05Z")
您链接的页面似乎使用了 emojibase 来获取“emoji map”（包含 Unicode、名称等），也许您可以使用类似的东西？🤔 相关链接： > > **[Introduction | Emojibase](https://emojibase.dev/docs/)** > > A collection of lightweight, up-to-date, pre-generated, specification compliant, localized emoji 顺便说一句，它看起来很棒 😃 ---
**Author:** ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)\ **Post date:** [2023年七月1日 16:12 UTC](https://meta.discourse.org/t/how-would-i-best-setup-a-twemoji-icons-component/270181/5 "2023-07-01T16:12:21Z")
感谢 Alexander！看来我需要一点推动 🙂 现在这样可以用了 ✨ 我添加了主要的表情符号集，没有变体（如肤色和性别）。这是一个包含 1869 个图标的集合（在 Twemoji 资源文件夹的 3689 个 svg 文件中）。我使用 `tw-` 作为前缀，加上英文的短代码来命名图标。人们可能仍然需要使用参考网站来查找正确的表情符号，因为名称不包含任何标签。例如，如果你在图标选择器中输入_高尔夫_，这个图标不会显示出来： ![Screenshot from 2023-07-01 16-49-43](https://global.discourse-cdn.com/meta/original/4X/b/f/c/bfc755cf1eaeee915388942a5c9cf95ad4f91b35.png) 准备好主题后，我将在 theme-components 中共享该组件。如果有人想提前尝试一下，仓库地址是 [GitHub - nolosb/discourse-twemoji-icons: Use twemojis as icons in Discourse.](https://github.com/nolosb/discourse-twemoji-icons.git) ---
**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\ **Post date:** [2023年七月31日 16:12 UTC](https://meta.discourse.org/t/how-would-i-best-setup-a-twemoji-icons-component/270181/6 "2023-07-31T16:12:38Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.