https://github.com/stipsan/postcss-import-svg
https://github.com/stipsan/postcss-import-svg
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/stipsan/postcss-import-svg
- Owner: stipsan
- License: mit
- Created: 2020-11-23T18:50:11.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-05-09T11:31:38.000Z (about 2 years ago)
- Last Synced: 2025-01-11T09:11:37.622Z (over 1 year ago)
- Language: JavaScript
- Size: 318 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-import-svg
[PostCSS] plugin to reference an SVG file and inline it, optionally update currentColor references.
A fork of [postcss-inline-svg](https://github.com/TrySound/postcss-inline-svg/pull/76) to support replacing `currentColor`.
```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-import-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, "%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 `` element and children inherit that color.
But if there is already color on children nothing will be inherited.
For example
```xml
```
after inline-svg (fill: #000) will looks like
```xml
```
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-import-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-import-svg"), require("cssnano")]);
```