postcss-write-svg

> 编程语言

Open source

Write SVGs directly in CSS

751 stars0 likes2 views

Website GitHub

About

Write SVGs directly in CSS

Write SVG

Write SVG lets you write SVGs directly in CSS.

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.

css

/* 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:

bash

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

Node

javascript

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

PostCSS

Add PostCSS to your build tool:

bash

npm install postcss --save-dev

Load Write SVG as a PostCSS plugin:

javascript

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

Gulp

Add Gulp PostCSS to your build tool:

bash

npm install gulp-postcss --save-dev

Enable Write SVG within your Gulpfile:

javascript

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:

bash

npm install grunt-postcss --save-dev

Enable Write SVG within your Gruntfile:

javascript

grunt.loadNpmTasks('grunt-postcss');

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