# postcss-inline-svg

> PostCSS plugin to reference an SVG file and control its attributes with CSS syntax

Latest version **6.0.0** (published 2023-02-12) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.0.0 |
| Published | 2023-02-12 |
| First published | 2015-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/postcss-inline-svg) |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 19 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 478 |
| Author | Bogdan Chadkin |
| Maintainers | trysound, hudochenkov |
| Keywords | postcss, css, postcss-plugin, svg, inline |

## Links

- npm: https://www.npmjs.com/package/postcss-inline-svg
- Repository: https://github.com/TrySound/postcss-inline-svg
- Issues: https://github.com/TrySound/postcss-inline-svg/issues
- npm.io page: https://npm.io/package/postcss-inline-svg

## Dependencies (4)

- [css-select](https://npm.io/package/css-select.md) ^5.1.0
- [htmlparser2](https://npm.io/package/htmlparser2.md) ^8.0.1
- [dom-serializer](https://npm.io/package/dom-serializer.md) ^2.0.0
- [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^4.2.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 6.0.0 (latest) — 2023-02-12
- 5.0.0 — 2020-10-29
- 4.1.0 — 2019-06-27
- 4.0.0 — 2019-06-16
- 3.1.1 — 2018-03-23
- 3.1.0 — 2018-03-23
- 3.0.0 — 2017-05-13
- 2.3.1 — 2017-05-05
- 2.3.0 — 2016-11-18
- 2.2.0 — 2016-10-16
- 2.1.2 — 2016-09-10
- 2.1.1 — 2016-08-27
- 2.1.0 — 2016-08-19
- 2.0.1 — 2016-06-15
- 2.0.0 — 2016-06-13
- … 11 more at https://npm.io/package/postcss-inline-svg/versions

## README

# postcss-inline-svg [![CI][build-badge-img]][ci]

[PostCSS] plugin to reference an SVG file and control its attributes with CSS syntax.

[PostCSS]: https://github.com/postcss/postcss
[build-badge-img]: https://github.com/TrySound/postcss-inline-svg/actions/workflows/nodejs.yml/badge.svg
[ci]: https://github.com/TrySound/postcss-inline-svg/actions/workflows/nodejs.yml

```postcss
@svg-load nav url(img/nav.svg) {
    fill: #cfc;
    path:nth-child(2) {
        fill: #ff0;
    }
}
.nav {
    background: svg-inline(nav);
}
.up {
    background: svg-load('img/arrow-up.svg', fill=#000, stroke=#fff);
}
```

```css
.nav {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23cfc'%3E%3Cpath d='...'/%3E%3Cpath d='...' fill='%23ff0'/%3E%3Cpath d='...'/%3E%3C/svg%3E");
}
.up {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23000' stroke='%23fff'%3E...%3C/svg%3E");
}
```

PostCSS parsers allow to use different syntax (but only one syntax in one svg-load() definition):

```postcss
.up {
    background: svg-load('img/arrow-up.svg', fill: #000, stroke: #fff);
}
.down {
    background: svg-load('img/arrow-down.svg', fill=#000, stroke=#fff);
}
```

## Usage

```js
postcss([ require('postcss-inline-svg')(options) ])
```

See [PostCSS] docs for examples for your environment.

### Options

#### options.paths

Array of paths to resolve URL. Paths are tried in order, until an existing file is found.

Default: `false` - path will be relative to source file if it was specified.

#### options.removeFill

Default: `false` - with `true` removes all `fill` attributes before applying specified.
Passed RegExp filters files by ID.

#### options.removeStroke

Default: `false` - with `true` removes all `stroke` attributes before applying specified.
Passed RegExp filters files by ID.


#### options.encode(svg)

Processes SVG after applying parameters. Default will be ommited if passed `false`.

Default:

```js
function encode(code) {
    return code
        .replace(/%/g, '%25')
        .replace(/</g, '%3C')
        .replace(/>/g, '%3E')
        .replace(/&/g, '%26')
        .replace(/#/g, "%23")
        .replace(/{/g, "%7B")
        .replace(/}/g, "%7D");
}
```

#### options.transform(svg, path)

Transforms SVG after `encode` function and generates URL.

#### options.xmlns

type: boolean
default: true

Adds `xmlns` attribute to SVG if not present.


## Frequently asked questions

### Why svg-load() doesn't work and the color still black (or red or whatever)?

That's because `svg-load()` overrides attributes only in `<svg>` element and children inherit that color.
But if there is already color on children nothing will be inherited.

For example

```xml
<svg>
    <path fill="#ff0000" d="..." />
</svg>
```

after inline-svg (fill: #000) will looks like

```xml
<svg fill="#000">
    <path fill="#ff0000" d="..." />
</svg>
```

There are three solutions: to remove that attribute (preferable), to use extended `@svg-load` notation or to use removeFill option.

### How to optimize svg on build step?

> There is a plugin. :)

You are able to add [postcss-svgo](https://github.com/cssnano/cssnano/tree/master/packages/postcss-svgo) in your PostCSS plugins list which will detect every URL which contains data SVG URI and minify via [svgo](https://github.com/svg/svgo).

```js
postcss([
    require('postcss-inline-svg'),
    require('postcss-svgo')
])
```

Or if you use [cssnano](https://cssnano.co/) your SVG URLs already minified
as cssnano includes postcss-svgo.

```js
postcss([
    require('postcss-inline-svg'),
    require('cssnano')
])
```


# License

MIT © [Bogdan Chadkin](mailto:trysound@yandex.ru)

## Support on Beerpay
Hey dude! Help me out for a couple of :beers:!

[![Beerpay](https://beerpay.io/TrySound/postcss-inline-svg/badge.svg?style=beer-square)](https://beerpay.io/TrySound/postcss-inline-svg)  [![Beerpay](https://beerpay.io/TrySound/postcss-inline-svg/make-wish.svg?style=flat-square)](https://beerpay.io/TrySound/postcss-inline-svg?focus=wish)

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