Twemoji アイコン

[manuel (Manuel Kostka)]

	概要	DiscourseでTwitter絵文字をアイコンとして使用します。
	リポジトリ	GitHub - nolosb/discourse-twemoji-icons: Use twemojis as icons in Discourse.
	インストールガイド	テーマまたはテーマコンポーネントのインストール方法
	Discourseテーマ初心者の方へ	Discourseテーマ使用の初心者ガイド

このテーマコンポーネントをインストール

このコンポーネントは、Twitter絵文字をアイコンとして追加します。各コンポーネントを使用して、絵文字でカテゴリやタグのアイコンを追加できます。また、管理モーダルやカスタムテーマコードで、デフォルトのインターフェースアイコンを置き換えることもできます。

このコンポーネントを使用して、インターフェースとカテゴリのアイコンに絵文字を表示しているKiosk Themeのビューを以下に示します。

詳細な手順

• アイコン名は、twプレフィックスと絵文字のショートネームをケバブケース（すべての単語をハイフンで区切る）で生成します。

• 例： 絵文字はアイコン名 tw-sun で、 は tw-beach-umbrella で扱われます。

• ショートネームはTwemoji Cheatsheetで確認してください。

• 管理モーダルでアイコンを使用します。例：サイドバーのカスタマイズ：

  

• コンポーネント設定でアイコンを使用します。例：カテゴリアイコン：

  

• テーマコードで使用します：

  api.replaceIcon('star', 'tw-star');

[Falco]

絵文字用に大きなSVGスプライトを配布していますが、DiscourseはすでにTwitterの絵文字をすべて配布しているので、それらを再利用しませんか？これにより、ユーザーはSVGファイルをインストールしたり提供したりする必要がなくなります。

[manuel (Manuel Kostka)]

はい、このコンポーネントの機能は、大きなスプライトファイルを配信せずに利用したいです。しかし、Discourse は twemojis を Unicode シーケンスとして配信していますよね？ SVG アイコンを置き換えたいのですが、私の理解では、それを実現するには SVG が必要です。

[Falco]

@manuel

しかし、Discourse は twemojis を Unicode シーケンスとして出荷していませんか？

個別の PNG として出荷しています。例: https://emoji.discourse-cdn.com/twitter/beach_umbrella.png。

そのため、サイドバーでは問題なく動作しますが、アイコンとしては動作しません。

[manuel (Manuel Kostka)]

はい、このコンポーネントがいくつかのルックとデザインを簡単に探索できることの価値は理解できます。本番環境で絵文字アイコンを使用したい場合は、実際に使用されている絵文字のみを含む専用のスプライトファイルを配信する方がはるかに良いと思います。