Svgmoji Save

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/[email protected]/svg/1F44D.svg"
  alt="thumbs up"
  title="thumbs up"
/>

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

<!-- Grouped Bundle -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/[email protected]/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/[email protected]/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/[email protected]/svg/1F44D.svg"
  alt="thumbs up"
  title="thumbs up"
/>

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

<!-- Grouped Bundle -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/[email protected]/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/[email protected]/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/[email protected]/svg/1F44D.svg"
  alt="thumbs up"
  title="thumbs up"
/>

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

<!-- Grouped Bundle -->
<img
  width="40px"
  height="40px"
  src="https://cdn.jsdelivr.net/npm/@svgmoji/[email protected]/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/[email protected]/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

• Optimize the individual SVG's with svgo.

• Add React support to all libraries.

  import { SvgMoji } from `@svgmoji/noto/react`;
  
  const MyMoji = () => {
    return <SvgMoji unicode='💋' />;
  };
  

• Add React Native components.

• Add Vue components.

• Add Svelte components.

• Add SVG CSS support.

• Add metrics for sizes of the group, subgroup, and other sizes for metric.

• Add new package @svgmoji/openmoji-black for openmoji black and white emoji support.

• Add support for css backgrounds.

• Add font consumption support.

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