Wondering what’s next for npm?Check out our public roadmap! »

@svgmoji/twemoji
TypeScript icon, indicating that this package has built-in type declarations

3.1.0 • Public • Published

@svgmoji/twemoji

The svgmoji sprites for the twemoji library provided by Twitter.


Version Weekly Downloads Bundled size Typed Codebase MIT License


Installation

# yarn
yarn add @svgmoji/twemoji

# pnpm
pnpm add @svgmoji/twemoji

# npm
npm install @svgmoji/twemoji

Usage

The following code creates an image with a src applied from the cdn. The first it is used it loads the sprite of all the emojis.

import { Twemoji } from '@svgmoji/twemoji';
import data from 'svgmoji/emoji.json';

const twemoji = new Twemoji({ data, type: 'all' });
const image = document.createElement('img');
image.src = twemoji.getUrl('❤️');

document.body.append(image);

html

thumbs up   grinning   red heart   face with tears of joy   grinning face with sweat   pleading face   pile of poo   loudly crying face   smiling face with sunglasses   face screaming in fear

<!-- Individual -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/twemoji@2.0.0/svg/1F44D.svg"
  alt="thumbs up"
  title="thumbs up"
/>

<!-- Subgroup Bundle 12KB  -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/twemoji@2.0.0/sprites/subgroups/face-affection.svg#1F385"
/>

<!-- Grouped Bundle 182KB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/twemoji@2.0.0/sprites/group/smileys-emotion.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>

<!-- Full Sprite Bundle 7.3MB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/twemoji@2.0.0/sprites/all.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>

Install

npm i @svgmoji/twemoji

DownloadsWeekly Downloads

138

Version

3.1.0

License

MIT

Unpacked Size

24.3 kB

Total Files

15

Last publish

Collaborators

  • avatar