Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/TrySound/postcss-inline-svg
PostCSS plugin to reference an SVG file and control its attributes with CSS syntax
https://github.com/TrySound/postcss-inline-svg
Last synced: about 2 months ago
JSON representation
PostCSS plugin to reference an SVG file and control its attributes with CSS syntax
- Host: GitHub
- URL: https://github.com/TrySound/postcss-inline-svg
- Owner: TrySound
- License: mit
- Created: 2015-11-08T12:24:39.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T22:57:22.000Z (about 1 year ago)
- Last Synced: 2024-07-25T10:09:29.366Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 296 KB
- Stars: 481
- Watchers: 6
- Forks: 38
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
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, '%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-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:[email protected])
## Support on Beerpay
Hey dude! Help me out for a couple of :beers:!
[](https://beerpay.io/TrySound/postcss-inline-svg) [](https://beerpay.io/TrySound/postcss-inline-svg?focus=wish)