Code Monkey home page Code Monkey logo

svg logo from undraw.co

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


Why? · Getting Started · Future · Docs · Contributing


Continuous integration badge for github actions Continuous integration badge for docs deployment


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


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 

<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


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/[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.


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/[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.

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/[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

svgmoji's Projects

svgmoji doesn’t have any public repositories yet.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.