https://github.com/chrisboakes/postcss-encode-background-svgs

PostCSS plugin to encode background svgs
https://github.com/chrisboakes/postcss-encode-background-svgs

postcss postcss-plugin postcss-plugins

Last synced: 24 days ago
JSON representation

PostCSS plugin to encode background svgs

• Host: GitHub
• URL: https://github.com/chrisboakes/postcss-encode-background-svgs
• Owner: chrisboakes
• License: mit
• Created: 2017-10-24T16:02:16.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T06:49:59.000Z (almost 2 years ago)
• Last Synced: 2024-11-15T21:58:45.372Z (about 1 month ago)
• Topics: postcss, postcss-plugin, postcss-plugins
• Language: JavaScript
• Size: 1.18 MB
• Stars: 9
• Watchers: 1
• Forks: 2
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Encode Background SVGs

[![Build Status][travis-badge]][travis-link] [![Code Coverage][codecov-badge]][codecov-link] [![StyleCI][styleci-badge]][styleci-link] [![npm version][npm-badge-version]][npm-link]

[npm-badge-version]: https://img.shields.io/npm/v/postcss-encode-background-svgs.svg

[npm-link]: https://www.npmjs.com/package/postcss-encode-background-svgs

[travis-badge]: https://travis-ci.org/chrisboakes/postcss-encode-background-svgs.svg?branch=master

[travis-link]: https://travis-ci.org/chrisboakes/postcss-encode-background-svgs

[codecov-badge]: https://codecov.io/gh/chrisboakes/postcss-encode-background-svgs/branch/master/graph/badge.svg

[codecov-link]: https://codecov.io/gh/chrisboakes/postcss-encode-background-svgs

[styleci-badge]: https://styleci.io/repos/108150987/shield?branch=master

[styleci-link]: https://styleci.io/repos/108150987

[PostCSS](https://github.com/postcss/postcss) plugin to encode background-image SVGs for cross browser compatibility.

### The Problem

Background image SVGs are great but they don't render on IE unless encoded properly.

### The Solution

Write your background as you usually would:

```scss

/* Input example */

background-image: url('data:image/svg+xml, ');

```

This encoder will then take your readable SVG and return a UTF-8 cross browser encoded solution like so:

```scss

/* Output example */

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E");

```

## Installation

[yarn](https://yarnpkg.com/en/)

```sh

yarn add postcss-encode-background-svgs

```

[npm](https://www.npmjs.com/)

```sh

npm install postcss-encode-background-svgs

```

## Usage

```js

postcss([require('postcss-encode-background-svgs')()])

```

See the [PostCSS](https://github.com/postcss/postcss#usage) docs for examples for your environment.

Once included in your environment, the plugin will search for any scss value with ```data:image/svg+xml```.

## Credits

Big thanks for [Vasi](https://github.com/Vasiharan) and [Rob](https://github.com/RobDWaller) for their help with the Regex.

MIT © [Chris Boakes](https://twitter.com/cboakes)