# postcss-svg-fallback

> An automatic SVG converter for your CSS files

Latest version **1.5.0** (published 2019-02-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-svg-fallback
pnpm add postcss-svg-fallback
yarn add postcss-svg-fallback
bun add postcss-svg-fallback
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2019-02-22 |
| First published | 2015-07-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 16.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tim |
| Maintainers | justim |
| Keywords | postcss, postcss-plugin, svg, svg-fallback |

## Links

- npm: https://www.npmjs.com/package/postcss-svg-fallback
- Repository: https://github.com/justim/postcss-svg-fallback
- Homepage: https://github.com/justim/postcss-svg-fallback#readme
- Issues: https://github.com/justim/postcss-svg-fallback/issues
- npm.io page: https://npm.io/package/postcss-svg-fallback

## Dependencies (4)

- [when](https://npm.io/package/when.md) ~3.7.3
- [async](https://npm.io/package/async.md) ~0.9.0
- [postcss](https://npm.io/package/postcss.md) ~4.1.9 || ^5.0.0 || ^6.0.0 || ^7.0.0
- [phantomjs](https://npm.io/package/phantomjs.md) ~1.9.16

## Recent versions

- 1.5.0 (latest) — 2019-02-22
- 1.4.0 — 2017-04-18
- 1.3.0 — 2016-02-26
- 1.2.3 — 2015-12-09
- 1.2.2 — 2015-12-03
- 1.2.1 — 2015-12-02
- 1.2.0 — 2015-11-19
- 1.1.0 — 2015-10-09
- 1.0.2 — 2015-07-22
- 1.0.1 — 2015-07-22
- 1.0.0 — 2015-07-22

## README

# svg-fallback [![Build Status](https://secure.travis-ci.org/justim/postcss-svg-fallback.png)](https://travis-ci.org/justim/postcss-svg-fallback)

> An automatic SVG converter for your CSS files, built on top of the [PostCSS] ecosystem.

## Usage

Right now it is only possible to use this as a [PostCSS] plugin:

```js
var postcss = require('postcss')
var svgFallback = require('postcss-svg-fallback')

var input = read(/* read some css */);
postcss()
	.use(svgFallback({
		// base path for the images found in the css
		// this is most likely the path to the css file you're processing
		// not setting this option might lead to unexpected behavior
		basePath: '',

		// destination for the generated SVGs
		// this is most likely the path to where the generated css file is outputted
		// not setting this option might lead to unexpected behavior
		dest: '',

		// selector that gets prefixed to selector
		fallbackSelector: '.no-svg',

		// when `true` only the css is changed (no new files created)
		disableConvert: false,
	})
	.process(input)
	.then(function(processor) {
		var output = processor.toString();
	});
```

> Note: we must use the async version of postcss

Converts this:

```css
.icon {
	background: url(images/sun-is-shining.svg) no-repeat;
	background-size: 20px 20px; /* background-size is mandatory */
}

.icon-inline {
	background: url(data:image/svg+xml; .. svg data ..) no-repeat;
	background-size: 20px 20px; /* background-size is mandatory */
}
```

to this:

```css
.icon {
	/* original declarations are untouched */
	background: url(images/sun-is-shining.svg) no-repeat;
	background-size: 20px 20px;
}

/* same selector, but with a prefix */
.no-svg .icon {
	/* a png image is generated and placed in the `dest` folder,
	 * with default settings, that's right next to the original SVG
	 */
	background-image: url(images/sun-is-shining-20x20.png);
}

.icon-inline {
	background: url(data:image/svg+xml; .. svg data ..) no-repeat;
	background-size: 20px 20px; /* background-size is mandatory */
}

.no-svg .icon-inline {
	/* filename contains the hash of the svg data */
	background-image: url(3547c094eaf671040650cdcab2ca70fd-20x20.png);
}
```

Converting is done with [PhantomJS] and is only done for images that actually need conversion (`background-size` & `mtime`).

[PostCSS]: https://github.com/postcss/postcss
[PhantomJS]: http://phantomjs.org

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