Использование эмодзи без кода

Поместите анимированное эмодзи Fluent в Slack, Notion, Google Docs, письмо или README на GitHub. Вам нужна только ссылка или файл. Без библиотеки и без установки.

Каждое эмодзи и каждый оттенок кожи это обычный файл на сайте файлов:

https://animated-fluent-emojis-files.andryore.dev/gif/<slug>.gif

Замените <slug> на название эмодзи. Например, так выглядит ссылка на улыбающееся лицо с большими глазами:

https://animated-fluent-emojis-files.andryore.dev/gif/grinning-face-with-big-eyes.gif

Вставьте такую ссылку в браузер, и эмодзи появится. Щёлкните по нему правой кнопкой мыши, чтобы сохранить файл.

Как найти название (slug)

Slug это описание эмодзи строчными буквами с дефисами между словами: grinning-face-with-big-eyes, waving-hand.

Эмодзи с оттенками кожи получают одно из таких окончаний: -light, -medium-light, -medium, -medium-dark, -dark. Так waving-hand это жёлтая рука по умолчанию, а waving-hand-medium-dark это тот же взмах в средне-тёмном оттенке.

Если у двух эмодзи совпало бы название, второе получает -2 (затем -3). Slug после публикации больше не меняется, поэтому ваши ссылки продолжают работать.

Чтобы просмотреть все названия, откройте индекс:

https://animated-fluent-emojis-files.andryore.dev/index.json

Выберите формат

Формат	Путь	Для чего использовать
GIF	`/gif/<slug>.gif`	Всё, что анимируется: Slack, письма, README
WebP	`/webp/<slug>.webp`	Анимация с плавными краями, на тёмных фонах
PNG	`/png/<slug>.png`	Статичная картинка: Google Docs, Slides

Slack

Скачайте https://animated-fluent-emojis-files.andryore.dev/gif/waving-hand.gif.
В Slack откройте панель эмодзи, выберите Add Emoji, затем Upload Image.
Выберите файл, назовите его (например, wave) и сохраните.

Введите :wave: в любом сообщении, чтобы использовать его.

Notion

Вставьте ссылку на изображение на страницу и выберите Embed as image либо введите /image, выберите Embed link и вставьте ту же ссылку.

Google Docs и Slides

Google Docs и Slides показывают статичную картинку, поэтому используйте PNG. Выберите Insert, Image, By URL и вставьте:

https://animated-fluent-emojis-files.andryore.dev/png/waving-hand.png

Email

Вставьте GIF как изображение, из файла или по ссылке. Большинство почтовых программ его проигрывает. Некоторые, например отдельные настольные версии Outlook, показывают только первый кадр.

README на GitHub

Markdown:

![Waving hand](https://animated-fluent-emojis-files.andryore.dev/gif/waving-hand.gif)

HTML, если нужно задать размер:

<img
  src="https://animated-fluent-emojis-files.andryore.dev/gif/waving-hand.gif"
  alt="Waving hand"
  width="48"
/>

Сохраните текст alt. Именно его озвучивает программа чтения с экрана.

Тёмные фоны

Прозрачность в GIF работает по принципу «всё или ничего»: каждый пиксель либо полностью прозрачен, либо полностью непрозрачен. Из-за этого на мягких краях на тёмном фоне может быть заметна светлая кайма. В таких случаях используйте WebP или PNG, которые сохраняют плавные края.

Авторство

Графика эмодзи принадлежит Microsoft, и её использование регулируется условиями Microsoft. Этот проект не связан с Microsoft и не одобрен ею. Некоторые эмодзи взяты из репозитория Microsoft под лицензией MIT; применимое к ним уведомление находится в /LICENSE-fluentui-emoji-animated.txt. Указание авторства находится в /NOTICE.txt. Прежде чем использовать графику в своей работе, проверьте условия, которые к ней применяются.

Создаёте сайт или приложение? Библиотеку описывает руководство по использованию.