Microsoft Teams の UI アイコンフォントと、Font Awesome ライクに CSS で使う

2020/07/15DevelopmentTeams

Microsoft Teams アプリで使われている UI アイコンフォントを Font Awesome ライクに使える CSS を用意しました。

開発者向けに Teams アプリの UI アイコンやコントロールライブラリーが提供されていますが、React 向けとなっていて、アイコンフォントをさくっと使える CSS ファイルは無いようだったので、Font Awesome のように使える CSS ファイルを作りました。ただし、アイコンのプロジェクトは更新が止まっていて、関連する Teams 開発者向けの React ライブラリーは廃止予定となっています。

• Teams UI components プロジェクトサイト: OfficeDev/msteams-ui-components: Empowering developers to build beautiful Microsoft Teams integrations
• 関連ドキュメント: Microsoft Teams 用の App Studio を開始する - Teams | Microsoft Docs

Awesome CSS for Teams UI Icons

作ったものは、Awesome CSS for Teams UI Icons という名前で GitHub に公開しています。

• jz5/awesome-css-for-teams-icons: An unofficial CSS like Awesome Font for Microsoft Teams UI Icon fonts.

ts を接頭辞として「ts-moji」のような class 名で（Font Awesome のように）アイコンの種類を指定、Regular/Light フォントは class 名 tsr/tsl で使い分けます。

デモはこちら。

• Awesome CSS for Teams UI Icons