svg-mixer

posthtml-transform

PostHTML plugin to add/modify tags attributes.

Demo

posthtml([
  transform({ attr: 'fill', value: 'red' })
]);

Input

<svg>
  <path />
</svg>

Output

<svg fill="red">
  <path fill="red" />
</svg>

Install

npm install posthtml-transform

Usage

const { readFileSync } = require('fs');
const posthtml = require('posthtml');
const transform = require('posthtml-transform');

const input = readFileSync('input.html');

posthtml()
  .use(transform(options))
  .process(input)
  .then(({ html }) => {
    console.log(html);
  });

Configuration

Transformer as object

Plugin accepts one or array of transformers. Transformer is an object with following fields:

Example

transform({ attr: 'fill', value: 'red' }); // add fill="red" to all nodes
transform({ attr: 'fill', value: 'red', selector: 'path' }); // add fill="red" only to paths
transform({ attr: 'stroke', value: 'black', selector: '#logo' }); // add `stroke` attr to node with id="logo"
transform({ selector: 'g', tag: 'symbol' }); // rename all <g> to <symbol>

Transformer as URL query string

It is also possible to pass URL query params string to plugin. It will be parsed and converted to transformer params, e.g:

transform('fill=red'); // => { attr: 'fill', value: 'red' }
transform('fill=red&20path'); // => { attr: 'fill', value: 'red, selector: 'path' }

Parameter value has following syntax: attr_name=attr_value optional_selector. Parameters can be combined, eg fill=red&stroke=black.

Examples:

fill=red
fill=red path
fill=red .class
fill=red #id, black .class
fill=red #id&stroke=black .class

LICENSE

MIT