Project: madiodio/remark-twemoji

Package: remark-twemoji@0.1.1

  1. Dependents: 0
  2. Remark plugin to use Twemoji
  1. remark 214
  2. javascript 26
  3. js 8
  4. emoji 6
  5. twemoji 2


prettier npm travis

Remark plugin to replace your emoji by using twemoji.


Note: Although it is marked as a peerDependency, twemoji is required to work with this module.

npm install --dev remark-twemoji twemoji 


remark().use(remarkTwemoji, { options });
  1. Basic usage
const remark = require("remark");
const twemoji = require("remark-twemoji");

const doc = "😂";
  .process(doc, function(err, file) {
// => <img class="emoji" draggable="false" alt="😂" src="https://twemoji.maxcdn.com/2/128x128/1f602.png" title="😂"/>
  1. Usage with mdx (basically what this plugin has been for):

Somewhere in your webpack config file:

const webpack = require("webpack");
const twemoji = require("remark-twemoji");

  test: /\.md$/,
  exclude: /node_modules/,
  use: [
      loader: "@mdx-js/loader",
      options: {
        mdPlugins: [twemoji],
        isReact: true

For more informations, check this section on the mdx docs.


options.isReact (boolean)

When using this plugin in a React setup, Twemoji will parse a dom node containing the attribute class instead of className which causes a warning at runtime. So if you're using React in your setup, use this to instruct the plugin to replace class by className in the final node, eg: ...[twemoji, { isReact: true }]...

Other options


    callback: Function,   // default the common replacer
    attributes: Function, // default returns {}
    base: string,         // default MaxCDN
    ext: string,          // default ".png"
    className: string,    // default "emoji"
    size: string|number,  // default "36x36"
    folder: string        // in case it's specified
                          // it replaces .size info, if any

These are the options you can pass to this plugin as the twemoji options, you can read more about them here.