Removing Vue.js again, after reflection, that it would result in spamming having all documentation, CSS, TypeScript tasks tagged Vue.js tasks as well as their number will grow massively soon.

From chat with @santhosh today on flatttened path preparation:

1. .[O]pen this in inkscape.
2. [S}elect all the objects and press control+k (Combine all objects).
3. {P]ress Control+Shift+C(Convert object to path).

I'm afraid my method wasn't terribly efficient or effective, but here it is:

Step 1: Look at the existing SVG code. If it consists of only paths, combine the path strings and separate each path with a space. Example:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
	<title>
		book
	</title>
	<path d="M1 2v15h4a7.65 7.65 0 015 2 7.65 7.65 0 015-2h4V2h-4a7.65 7.65 0 00-5 2 7.65 7.65 0 00-5-2zm1.5 1.5H5C8 3.5 9 5 9 5v11.5a4.38 4.38 0 00-3-1H2.5z"/>
	<path d="M9 3.5h2v1H9z"/>
</svg>

...becomes "M1 2v15h4a7.65 7.65 0 015 2 7.65 7.65 0 015-2h4V2h-4a7.65 7.65 0 00-5 2 7.65 7.65 0 00-5-2zm1.5 1.5H5C8 3.5 9 5 9 5v11.5a4.38 4.38 0 00-3-1H2.5z M9 3.5h2v1H9z"

Step 2: If there are other shapes, use element-to-path to transform each element to a path, then add that path to the single path in the same way as in step 1 (separated from other parts of the path by a space). I just did this by installing element-to-path and adding the code in the usage section of that package's README to some existing code I was working on (probably the Icon.vue file), then console.logging the result.

const toPath = require('element-to-path')

const circle = {
  type: 'element',
  name: 'circle',
  attributes: {
    cx: 10,
    cy: 10,
    r: 5,
  },
}

const path = toPath(circle)
// 'M15 10 A5 5 0 0 1 10 15 A5 5 0 0 1 5 10 A5 5 0 0 1 15 10 z'

The name is the name of the element, while the attributes come from the element attributes, e.g. for a rectangle they would be:

<!-- From the svg file... -->
<rect width="8" height="6" x="6" y="7" rx="1"/>

// In the JS
const circle = {
  type: 'element',
  name: 'rect',
  attributes: {
    width: 8,
    height: 6,
    x: 6,
    y: 7,
    rx: 1
  },
}

Step 3: Add the single path for the icon in the WVUI icons.ts file, then carefully review it visually. There were probably a dozen icons that didn't render properly after this process. @mwilliams was kind enough to use Adobe Illustrator to extract the proper path.

It might be better to just use Illustrator or a similar tool (like Santhosh does).