remark-twemoji

Remark plugin to replace your emoji by using twemoji.

Install

npm install --dev remark-twemoji

Usage

remark().use(remarkTwemoji, { options });

1. Basic usage

const remark = require("remark");
const twemoji = require("remark-twemoji");
 
const doc = "😂";
remark()
  .use(emoji)
  .process(doc, function(err, file) {
    console.log(String(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: [
    "babel-loader",
    {
      loader: "@mdx-js/loader",
      options: {
        mdPlugins: [twemoji, { isReact: true }]
      }
    }
  ]
},...

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

Options

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

Object

  {
    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.

Inspirations

• gatsby-remark-twemoji
• remark-emoji

License

MIT