Rehype plugin to transform Font Awesome shortcodes into HTML elements
npm install rehype-fontawesome
A rehype plugin to transform Font Awesome shortcodes into HTML elements.
``bash`
npm install rehype-fontawesomeor
yarn add rehype-fontawesomeor
pnpm add rehype-fontawesome
This plugin transforms Font Awesome shortcodes like :fa-solid:coffee: into HTML elements with the appropriate CSS classes.
`typescript
import { unified } from 'unified';
import rehypeParse from 'rehype-parse';
import rehypeStringify from 'rehype-stringify';
import rehypeFontAwesome from 'rehype-fontawesome';
import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css";
const processor = unified()
.use(rehypeParse)
.use(rehypeFontAwesome)
.use(rehypeStringify);
const result = await processor.process('
I love :fa-solid:coffee: and coding!
');I love and coding!
$3
typescript
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeFontAwesome from 'rehype-fontawesome';
import rehypeStringify from 'rehype-stringify';import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css";
const processor = unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeFontAwesome)
.use(rehypeStringify);
const result = await processor.process('# Hello :fa-solid:world:');
`Shortcode Format
The plugin recognizes shortcodes in the format
$3
-
→ fa-solid (Font Awesome Solid)
- regular → fa-regular (Font Awesome Regular)
- brands → fa-brands (Font Awesome Brands)$3
-
:fa-solid:coffee: →
- →
- → Options
$3
- Type:
- Default: Custom class prefix for Font Awesome icons.
typescript
.use(rehypeFontAwesome, { classPrefix: 'icon' })// :fa-solid:coffee: →
`$3
- Type:
- Default: Additional CSS classes to add to all icons.
typescript
.use(rehypeFontAwesome, { additionalClasses: ['custom', 'large'] })// :fa-solid:coffee: →
`TypeScript
This package includes TypeScript declarations and supports both CommonJS and ES modules.
typescript
import rehypeFontAwesome, { FontAwesomeOptions } from 'rehype-fontawesome';const options: FontAwesomeOptions = {
classPrefix: 'icon',
additionalClasses: ['custom']
};
`Requirements
- Node.js 16 or higher
-
MIT © Matthieu Conti
Issues and pull requests are welcome! Please check the existing issues before creating a new one.
- rehype - HTML processor powered by plugins
- Font Awesome - The web's most popular icon set
- unist-util-visit - Utility to visit nodes