posthtml-inline-svg
v0.2.0
Published
Inline svg icons in HTML
Downloads
1,004
Maintainers
Readme
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 |