# postcss-svg

> Inline SVGs in CSS. Supports SVG Fragments, SVG Parameters.

Latest version **3.0.0** (published 2018-11-29) · CC0-1.0 license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2018-11-29 |
| First published | 2015-06-25 |
| Weekly downloads | 0 |
| License | CC0-1.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=6.0.0 |
| Dependencies | 4 |
| Unpacked size | 97.9 KB |
| Known vulnerabilities | 0 (+8 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 24 |
| Author | Jonathan Neal |
| Maintainers | jonathantneal, pavliko |
| Keywords | postcss, css, postcss-plugin, svgs, scalable, vector, graphic, image, img, picture, pic, fragment, identifier, id, hash, url, inline, utf8, base64, custom, properties, property |

## Links

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

## Dependencies (4)

- [svgo](https://npm.io/package/svgo.md) ^1.1.1
- [xmldoc](https://npm.io/package/xmldoc.md) ^1.1.2
- [postcss](https://npm.io/package/postcss.md) ^7.0.6
- [postcss-values-parser](https://npm.io/package/postcss-values-parser.md) ^2.0.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2018-11-29
- 2.4.0 — 2017-12-05
- 2.3.0 — 2017-11-02
- 2.2.0 — 2017-10-10
- 2.1.0 — 2017-06-23
- 2.0.0 — 2017-05-19
- 1.0.6 — 2016-06-06
- 1.0.5 — 2016-04-19
- 1.0.4 — 2015-11-09
- 1.0.3 — 2015-11-08
- 1.0.2 — 2015-11-08
- 1.0.1 — 2015-07-31
- 1.0.0 — 2015-07-09
- 0.0.3 — 2015-06-25
- 0.0.2 — 2015-06-25
- … 1 more at https://npm.io/package/postcss-svg/versions

## README

# PostCSS SVG [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]

[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]

[PostCSS SVG] lets you inline SVGs in CSS.

```pcss
.icon--square {
  content: url("shared-sprites#square" param(--color blue));
}

/* becomes */

.icon--square {
  content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect style='fill:blue' width='100%25' height='100%25'/%3E%3C/svg%3E");
}
```

[SVG Fragments] let you reference elements within an SVG. [SVG Parameters] let
you push compiled CSS variables into your SVGs.

```svg
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="square">
    <rect style="fill:var(--color,black)" width="100%" height="100%"/>
  </symbol>
</svg>
```

[Modules] let you reference the `media` or `main` fields from a `package.json`:

```json
{
  "name": "shared-sprites",
  "media": "sprites.svg"
}
```

The location of an SVG is intelligently resolved using the
[SVG Resolve Algorithm].

## Usage

Add [PostCSS SVG] to your project:

```bash
npm install postcss-svg --save-dev
```

Use [PostCSS SVG] to process your CSS:

```js
const postcssSVG = require('postcss-svg');

postcssSVG.process(YOUR_CSS /*, processOptions, pluginOptions */);
```

Or use it as a [PostCSS] plugin:

```js
const postcss = require('postcss');
const postcssSVG = require('postcss-svg');

postcss([
  postcssSVG(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
```

[PostCSS SVG] runs in all Node environments, with special instructions for:

| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
| --- | --- | --- | --- | --- | --- |

## Options

### dirs

The `dirs` option specifies additional directories used to locate SVGs.

```js
postcssSVG({
  dirs: ['some-folder', 'another-folder'] /* Just a string will work, too */
})
```

The `utf8` option determines whether the SVG is UTF-8 encoded or base64 encoded.

```js
postcssSVG({
  utf8: false /* Whether to use utf-8 or base64 encoding. Default is true. */
})
```

The `svgo` option determines whether and how [svgo] compression is used.

```js
postcssSVG({
  svgo: { plugins: [{ cleanupAttrs: true }] } /* Whether and how to use svgo compression. Default is false. */
})
```

[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-svg.svg
[cli-url]: https://travis-ci.org/jonathantneal/postcss-svg
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/postcss/postcss
[npm-img]: https://img.shields.io/npm/v/postcss-svg.svg
[npm-url]: https://www.npmjs.com/package/postcss-svg

[PostCSS]: https://github.com/postcss/postcss
[PostCSS SVG]: https://github.com/jonathantneal/postcss-svg
[Modules]: https://nodejs.org/api/modules.html#modules_modules
[SVG Fragments]: https://css-tricks.com/svg-fragment-identifiers-work/
[SVG Parameters]: https://tabatkins.github.io/specs/svg-params/
[SVG Resolve Algorithm]: lib/read-closest-svg.md
[svgo]: https://github.com/svg/svgo

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