@mdit/plugin-icon

Plugins with icon support.

Usage

TS

import MarkdownIt from "markdown-it";
import { icon } from "@mdit/plugin-icon";

const mdIt = MarkdownIt().use(icon);

mdIt.render("iPhone is made by ::apple::.");

JS

const MarkdownIt = require("markdown-it");
const { icon } = require("@mdit/plugin-icon");

const mdIt = MarkdownIt().use(icon);

mdIt.render("iPhone is made by ::apple::.");

Syntax

Use ::icon classes:: to insert custom icons. By default the plugin will render a <i> tag with the given icon class. Any classes started with a = will be treated as a size definition, and / will be treated as a color definition:

<!-- <i class="icon1" style="font-size:16px;color:red" -->

::icon1 =16 /red::

If you are not satisfied with the default render, you can use render option to customize icon rendering:

const MarkdownIt = require("markdown-it");
const {
  fontAwesomeRender,
  icon,
  iconfontRender,
  iconifyRender,
} = require("@mdit/plugin-icon");

const mdIt = MarkdownIt().use(icon, {
  // support for iconify
  render: iconifyRender,

  // support for fontawesome
  render: fontAwesomeRender,

  // support for iconfont
  render: iconfontRender,

  // custom render
  render: (rawIcon) => {
    return `<span class="${rawIcon}"></span>`;
  },
});

For the build-in helper and render function usage, see source code and related unit tests for more details:

• src/render.ts
• __tests__/render.ts
• src/utils.ts
• __tests__/utils.ts

Why not markdownit-plugin-emoji?

markdownit-plugin-emoji only supports converting known emoji codes to icons, while this plugin supports any custom icon classes.

This is useful when you are using it with font icon libraries like Font Awesome, Material Icons, etc.

Demo

Demo

iPhone is made by :🍎:.

iPhone is made by ::apple::.