svgmoji: A TypeScript repository from Bertg

Consume popular open-source emoji libraries as SVG's.

Why? · Getting Started · Future · Docs · Contributing

Why?

Consume open source emoji libraries as vector graphics (.svg). The bundle size is smaller and the image scales better with high resolution devices.

This library tracks the most popular emoji projects that I'm aware of and makes their SVG available as sprites which can be consumed.

noto

<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/svg/1F44D.svg"
  alt="thumbs up"
  title="thumbs up"
/>

<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/sprites/subgroups/face-affection.svg#1F385"
/>

<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/sprites/group/smileys-emotion.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>

<!-- GZIP 3.8MB -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/sprites/all.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>

blobmoji

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

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

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

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

twemoji

Attributes requirements are outlined here.

<!-- 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 -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/twemoji@2.0.0/sprites/subgroups/face-affection.svg#1F385"
/>

<!-- Grouped Bundle -->
<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 -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/twemoji@2.0.0/sprites/all.svg#1F441-FE0F-200D-1F5E8-FE0F"
/>

openmoji

All emojis designed by OpenMoji – the open-source emoji and icon project. License: CC BY-SA 4.0. Requirements for attribution are outlined here.

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

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

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

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

Getting Started

Install the emoji library of your choice.

pnpm add @svgmoji/noto

You can consume the library in the following way.

import { Notomoji } from '@svgmoji/notomoji';
import data from 'svgmoji/emoji.json';

const notomoji = new Notomoji({ data, type: 'all' });
const image = document.createElement('img');
image.src = notomoji.url('❤️');

document.body.append(image);

The above code will reference the svg sprite image from the cdn. This is a huge file (3000+ emoji) and although it's a one off download cost, you may prefer to be more incremental.

The type parameter can be updated to reflect how you want to reference the emoji.

// Will load the cdn sprite for the emoji groups.
// There are 10 groups in total some of which rarely get used.
const groupNotomoji = new Notomoji({ data, type: 'group' });

// Will load the cdn sprite for the subgroup. Smaller download size,
// but if you are using a large variety of emoji, it could lead to
// delayed load times.
const subGroupNotomoji = new Notomoji({ data, type: 'subgroup' });

// Loads each emoji as a direct url. This is useful if emoji are
// rarely used in your codebase.
const individualNotomoji = new Notomoji({ data, type: 'individual' });

Documentation is still very much a work in progress and more is to come.

Future

Contributing

Please read our contribution guide for details on our code of conduct, and the process for submitting pull requests. It also outlines the project structure so you can find help when navigating your way around the codebase.

In addition each folder in this codebase a readme describing why it exists.

You might also notice there are surprisingly few files in the root directory of this project. All the configuration files have been moved to the support/root directory and are symlinked to the root directory in a preinstall hook. For more information take a look at folder and readme.

Versioning

This project uses SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License - see the LICENSE file for details

Bertg/svgmoji