# gulp-inject-svg

> replaces external svg with inline svg

Latest version **0.1.18** (published 2018-02-16) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install gulp-inject-svg
pnpm add gulp-inject-svg
yarn add gulp-inject-svg
bun add gulp-inject-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.1.18 |
| Published | 2018-02-16 |
| First published | 2016-03-03 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Viktor Sarström |
| Maintainers | viktorsarstrom |

## Links

- npm: https://www.npmjs.com/package/gulp-inject-svg
- Repository: https://github.com/viktorlarsson/gulp-inject-svg
- Issues: https://github.com/viktorlarsson/gulp-inject-svg/issues
- npm.io page: https://npm.io/package/gulp-inject-svg

## Dependencies (4)

- [cheerio](https://npm.io/package/cheerio.md) ^0.22.0
- [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.7
- [iconv-lite](https://npm.io/package/iconv-lite.md) latest
- [event-stream](https://npm.io/package/event-stream.md) latest

## Recent versions

- 0.1.18 (latest) — 2018-02-16
- 0.1.17 — 2018-02-05
- 0.1.16 — 2017-10-03
- 0.1.15 — 2017-08-16
- 0.1.14 — 2017-08-16
- 0.1.13 — 2017-08-12
- 0.1.12 — 2017-07-21
- 0.1.10 — 2017-06-21
- 0.1.9 — 2016-09-25
- 0.1.8 — 2016-09-12
- 0.1.7 — 2016-09-12
- 0.1.6 — 2016-09-07
- 0.1.5 — 2016-08-23
- 0.1.4 — 2016-07-22
- 0.1.3 — 2016-06-13
- … 3 more at https://npm.io/package/gulp-inject-svg/versions

## README

# gulp-inject-svg

[![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)

## Information

This gulp plugin will check all img tags with an external svg and replace the tag with inline svg.

[![NPM](https://nodei.co/npm/gulp-inject-svg.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/gulp-inject-svg/)

## Usage

```html
<div class="icon">
  <img src="/assets/img/icons/exclamation_mark.svg" class="icon--exclamation-mark">
</div>
```

#### Note

You either need to use an absolute path relative to your project root

`/src/assets/img/icons/exclamation_mark.svg`

or pass a configuration object to the plugin

`injectSvg({ base: '/src' })`

#### Ignore some SVG files

You can prevent some SVG files from inject by the attribute `data-skip-inject-svg`

```html
<img src="/assets/img/icons/exclamation_mark.svg" data-skip-inject-svg class="icon--exclamation-mark">
```

#### Example

```javascript
var gulp = require('gulp');
var injectSvg = require('gulp-inject-svg');
var injectSvgOptions = { base: '/src' };

gulp.task('injectSvg', function() {

  return gulp.src('/src/**/*.html')
    .pipe(injectSvg(injectSvgOptions))
    .pipe(gulp.dest('public/'));

});

```

Replaces your &lt;img&gt; tags with the corresponding inlined svg file.

```html
<div class="icon">
  <svg class="icon--exclamation-mark" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><ellipse class="st0" cx="16" cy="22.9" rx="2.3" ry="2.3"/><path class="st0" d="M18.6 9.8l-1.1 7.7c0 .4-.2.8-.6 1-.3.2-.6.3-.9.3h-.2c-.7-.1-1.2-.7-1.3-1.4l-1.1-7.6c-.2-1.5.8-2.8 2.3-3 1.4-.2 2.7.9 2.9 2.3v.7z"/></svg>
</div>
```

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