twemoji-reveal

Replaces UTF-8 emoji in reveal.js presentations with corresponding images (based on twemoji)

Installation

Install twemoji

yarn add twemoji

Use grunt-contrib-copy to copy twemoji to lib

yarn add grunt-contrib-copy --dev

Copy assets in gruntfile.js:

copy: {
  twemoji: {
    files: [
      {
        expand: true,
        cwd: 'node_modules/twemoji/dist',
        src: '**',
        dest: 'lib/'
      } 
    ]
  }
}
...
grunt.registerTask('twemoji-reveal', ['copy:twemoji'])

Add task to package.json

scripts: {
...
  "start": "grunt twemoji serve"
}

Add script to index.html

<script src="lib/dist/twemoji.min.js"

Add plugin to index.html

Reveal.initialize({
...
dependencies: [
  { src: 'plugin/reveal-twemoji/reveal-twemoji.js'}
]
})

Add styles to your stylesheet

.reveal section img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}