posthtml-inline-svg
0.2.0 • Public • Published posthtml-inline-svg
PostHTML plugin that inline svg icons in HTML. Like GitHub does with Octicons.
Before
<icon src="icon.svg" class="icon"></icon>
After
<svg viewBox="0 0 100 100" class="icon">
<path d="M6 0l8 89.9L49.9 100 86 89.9 94 0H6zm70.6 29.3H34.5l.9 11.3h40.2l-3.1 34-22.4 6.2v.1h-.3l-22.6-6.2-1.4-17.4h10.9l.8 8.8 12.2 3.3L62.2 66l1.4-14.3H25.3l-2.9-33.4h55.3l-1.1 11z"></path>
</svg>
Install
npm i -D posthtml posthtml-inline-svg
Usage
const path = require('path')
const fs = require('fs')
const posthtml = require('posthtml');
const inlineSVG = require('posthtml-inline-svg');
posthtml(inlineSVG({
cwd: path.resolve('src'),
tag: 'icon',
attr: 'src',
}))
.process(fs.readFileSync('index.html', 'utf8'))
.then((result) => console.log(result.html));
Options
Option |
Default |
Description |
cwd |
process.cwd() |
Path icon source related to |
tag |
icon |
HTML-tag to process |
attr |
src |
Attribute to get icon path |
comment |
false |
Render HTML comment with icon source before icon markup |
svgo since 0.2.0 |
null |
Custom SVGO config |
/posthtml-inline-svg/
//
Package Sidebar
Install
npm i posthtml-inline-svg
Weekly Downloads