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