postcss-write-svg

Write SVGs directly in CSS

Usage no npm install needed!

<script type="module">
  import postcssWriteSvg from 'https://cdn.skypack.dev/postcss-write-svg';
</script>

README

Write SVG PostCSS Logo

NPM Version Build Status Licensing Changelog Gitter Chat

Write SVG lets you write SVGs directly in CSS.

/* before */

@svg square {
    @rect {
        fill: var(--color, black);
        width: var(--size);
        height: var(--size);
    }
}

.example {
    background: svg(square param(--color green) param(--size 100%)) center / cover;
}

/* after */

.example {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='green' width='100%25' height='100%25'/%3E%3C/svg%3E") center / cover;
}

@svg at-rules generate SVG elements available to CSS. Within an @svg, descendant at-rules (like @rect) are interpreted as elements, while declarations (like width) are interpreted as attributes.

The svg() function renders an @svg as a data url(). var() functions within an @svg honor the variables passed in through param() functions.

Options

utf8

Type: Boolean
Default: true

Allows you to define whether UTF-8 or base64 encoding will be used.

/* before { utf8: false } */

@svg square {
    @rect {
        fill: black;
        width: 100%;
        height: 100%;
    }
}

.example {
    background: svg(square);
}

/* after */

.example {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9ImJsYWNrIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIi8+PC9zdmc+");
}

Usage

Add Write SVG to your build tool:

npm install jonathantneal/postcss-write-svg --save-dev

Node

require('postcss-write-svg').process(YOUR_CSS, { /* options */ });

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load Write SVG as a PostCSS plugin:

postcss([
    require('postcss-write-svg')({ /* options */ })
]).process(YOUR_CSS, /* options */);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable Write SVG within your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
    return gulp.src('./src/*.css').pipe(
        postcss([
            require('postcss-write-svg')({ /* options */ })
        ])
    ).pipe(
        gulp.dest('.')
    );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable Write SVG within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
    postcss: {
        options: {
            use: [
                require('postcss-write-svg')({ /* options */ })
            ]
        },
        dist: {
            src: '*.css'
        }
    }
});