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 });- Basic usage
const remark = require("remark");
const twemoji = require("remark-twemoji");
const doc = "😂";
remark()
.use(twemoji)
.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="😂"/>- 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.
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 }]...
{
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.
MIT