# posthtml-inline-svg

> Inline svg icons in HTML

Latest version **0.2.0** (published 2020-05-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install posthtml-inline-svg
pnpm add posthtml-inline-svg
yarn add posthtml-inline-svg
bun add posthtml-inline-svg
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2020-05-25 |
| First published | 2019-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Andrey Khokhlov |
| Maintainers | andrey-hohlov |
| Keywords | posthtml, posthtml-plugin, html, postproccessor, svg |

## Links

- npm: https://www.npmjs.com/package/posthtml-inline-svg
- Repository: https://github.com/andrey-hohlov/posthtml-inline-svg
- Issues: https://github.com/andrey-hohlov/posthtml-inline-svg/issues
- npm.io page: https://npm.io/package/posthtml-inline-svg

## Dependencies (2)

- [svgo](https://npm.io/package/svgo.md) ^1.3.2
- [posthtml](https://npm.io/package/posthtml.md) ^0.12.3

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2020-05-25
- 0.1.0 — 2020-01-15
- 0.0.5 — 2020-01-15
- 0.0.4 — 2019-12-21
- 0.0.3 — 2019-08-24
- 0.0.2 — 2019-06-14
- 0.0.1 — 2019-06-14

## README

# posthtml-inline-svg

[PostHTML](https://github.com/posthtml/posthtml) plugin that inline svg icons in HTML. Like GitHub [does](https://github.blog/2016-02-22-delivering-octicons-with-svg/) with Octicons.

### Before

```html
<icon src="icon.svg" class="icon"></icon>
```

### After

```html
<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

```bash
npm i -D posthtml posthtml-inline-svg
```

## Usage

```js
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](https://github.com/svg/svgo) config |

---
_Source: https://npm.io/package/posthtml-inline-svg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._