Эмодзи - это интересный способ добавить немного жизни любому приложению, которое вы создаете, но проблема, с которой вы можете столкнуться, заключается в том, что они выглядят по-разному на iOS, Android, Windows и macOS.
Смайлы Emoji являются частью Стандарта Юникода, и по состоянию на март 2020 их всего 3304 человека, и с каждым выпуском добавляется больше. Twitter собрал фантастическую бесплатную библиотеку JavaScript Twemoji, которая предоставляет стандартизированный набор эмодзи в форматах SVG и PNG.
Начиная
Перейдите на страницу Twemoji на GitHub и следуйте инструкциям по использованию. В этом примере я добавляю ссылку CDN прямо в свой файл index.html в корень моего проекта angular.
Создание угловой трубы
Используя Angular CLI, добавьте в проект новую трубу и добавьте в нее следующий код.
ng generate pipe Emoji
Использование трубы
Давайте разберемся, что здесь происходит,
- Создайте элемент html, в котором будут отображаться смайлы
- Привяжите атрибут [innerHtml] к Codepoint смайлика, который вы хотите отобразить, оставив исходный «U +», поскольку он не нужен.
Чтобы увидеть полный список смайлов и их кодовых точек, перейдите по адресу https://emojipedia.org/twitter/.
- Добавьте свой недавно созданный канал смайликов, который будет генерировать img внутри innerHtml вашего элемента.
Собираем все вместе!
В рамках создания Canvas by Noviggo мы используем смайлики, чтобы выразить уверенность в идее, когда они об этом думают. Мы очень довольны результатами, полученными после использования Twemoji, и с нетерпением ждем возможности использовать их в будущих проектах.
Если вам интересно увидеть эти смайлы в действии и, возможно, начать новую бизнес-идею, зайдите на наш сайт, чтобы начать работу бесплатно!
