remark-mdi
v1.0.3
Published
Plugin for material design icons in markdown
Downloads
1
Readme
remark-mdi
Syntax
Hello :mdi-robot:!
AST (see mdast specification)
For example, the following markdown:
:mdi-robot:
Yields:
{
type: 'mdi',
mdi: 'robot',
data: {
hName: 'i',
icon: 'robot',
hProperties: {
className: ['mdi-robot', 'mdi']
}
}
}
Rehype
This plugin is compatible with [rehype][https://github.com/rehypejs/rehype]. mdi
mdast nodes (e.g. :mdi-robot:
) will become <i class="mdi-robot mdi"></i>
.
provide additional classes
It is possible to provide an additional class(es). This can be handy if you want to provide some basic colors.
:mdi-robot--green: -> <i class="mdi-robot mdi green"></i>
:mdi-robot--green big: -> <i class="mdi-robot mdi green big"></i>
Installation
yarn add remark-mdi @mdi/font
and make sure to import the stylesheet of mdi:
import "@mdi/font/css/materialdesignicons.min.css"
Usage
Dependencies:
const unified = require('unified')
const remarkParse = require('remark-parse')
const stringify = require('rehype-stringify')
const remark2rehype = require('remark-rehype')
const remarkMdi = require('remark-mdi')
Usage:
unified()
.use(remarkParse)
.use(remarkMdi)
.use(remark2rehype)
.use(stringify)