remark-twemoji

!prettierprettier-imageprettier-url !npmnpm-imagenpm-url !travistravis-imagetravis-url
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