Consume popular open-source emoji libraries as SVG's.
Why? · Getting Started · Future · Docs · Contributing
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.
<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"
/>
<!-- 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"
/>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"
/>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"
/>Install the emoji library of your choice.
pnpm add @svgmoji/notoYou 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.
-
Optimize the individual SVG's with
svgo. -
Add
Reactsupport to all libraries.import { SvgMoji } from `@svgmoji/noto/react`; const MyMoji = () => { return <SvgMoji unicode='💋' />; };
-
Add
React Nativecomponents. -
Add
Vuecomponents. -
Add
Sveltecomponents. -
Add SVG CSS support.
-
Add metrics for sizes of the group, subgroup, and other sizes for metric.
-
Add new package
@svgmoji/openmoji-blackforopenmojiblack and white emoji support. -
Add support for css backgrounds.
-
Add font consumption support.
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.
This project uses SemVer for versioning. For the versions available, see the tags on this repository.
This project is licensed under the MIT License - see the LICENSE file for details