1. postsvg
A tiny wrapper over posthml with the same API optimized for working with SVG
postsvg
Package: postsvg
Created by: JetBrains
Last modified: Fri, 24 Jun 2022 11:48:08 GMT
Version: 2.2.7
License: MIT
Downloads: 56,237
Repository: https://github.com/JetBrains/svg-mixer

Install

npm install postsvg
yarn add postsvg

PostSVG

A tiny wrapper over posthtml with the same
API optimized for working with SVG.

Differences from PostHTML

  • Content is parsed in xml mode.
  • Properly renders SVG self-closing tags (<path />, <line /> etc).
  • Processing result is instance of Tree class which is wrapper
    around Array and backward compatible with posthtml parser.

Tree

PostSVG tree has several useful methods for work with AST:

 const { parse } = require('postsvg');

const tree = parse('<svg><path /><path class="qwe" /></svg>');

/**
 * `root` getter returns <svg> node
 * @return {Node}
 */ 
tree.root;

/**
 * Find all <path/> nodes
 * @return {Array<Node>}
 */
tree.select('path'); 

/**
 * Select only nodes with class="qwe"
 * @return {Array<Node>}
 */
tree.select('.qwe');

/**
 * Fill each <path/> node with red color 
 */
tree.each('path', node => node.attrs.fill = 'red');

Node has following structure:

Node<{
  tag: string,
  attrs?: Object,
  content?: Array<Node>
}>

LICENSE

MIT

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin