This release introduces a JSX transformer as a new feature to OXVG as well as some fixes to regressions introduced in 0.0.6.

The JSX transformer of OXVG aims to be a drop-in replacement to SVGR. It will take an SVG document, optimise it, and build it into a JSX module.
Optimisation options work the same as the optimiser.

Usage

The JSX transformer aims to work as closely as possible to SVGR and inherits its options, only with deviations in optimisation options, templating, and plugins. You can use it with either the oxvg jsx command or by using the Node bindings from @oxvg/jsx.

Similar to other commands it accepts usage with stdin/stdout

cat my-file.svg | oxvg jsx > my-file.jsx

It also accepts filesystem options in line with other OXVG commands. Note that this deviates from SVGR options.

# Read and transform file to a `.jsx` file.
oxvg jsx my-file.svg

# Read and transform many files to `.jsx` files and creates `index.js`
oxvg jsx svgs/

# Read and transform many files and directories to `.jsx` files and creates `index.js` files
oxvg jsx svgs/ -r

# Read and transform many files and directories to a new location
oxvg jsx svgs/ -r -o output/

# Read and transform many files and directories to a new location, including hidden files
oxvg jsx svgs/ -r -o output/ -. --no-ignore

Optimisation

SVG optimisation is done by the OXVG optimiser. Optimisation is available either through the CLI or NAPI bindings. Optimisation is enabled by default.
Optimisation options can be configured using a configuration file.

If using the @oxvg/jsx Node package, configuration can be passed directly.

import { transform } from "@oxvg/jsx";
const jsxCode = await transform(svgCode, { oxvg: { convertPathData: false } });

Or for ease of migration, you can convert an existing SVGO config.

import { transform } from "@oxvg/jsx";
import { convertSvgoConfig } from "@oxvg/napi";
const jsxCode = await transform(svgCode, { oxvgConfig: convertSvgoConfig(svgoConfig) });

Templates

OXVG supports templates which allow you to generate more bespoke components for whatever your needs may be.

The CLI will read a JavaScript and replace matching identifiers with the generated expressions.

// template.js
$imports;
$interfaces;

class $componentName extends React.Component {
	constructor($props) {
		super(props);
	}

	render() {
		return $jsx;
	}
}
$exports;

cat my-file.svg | oxvg jsx --template template.js > output.jsx

// output.jsx
import * as React from "react";
class SvgComponent extends React.Component {
  constructor(props){
    super(props);
  }
  render() {
    return <svg><g/></svg>;
  }
}
export default SvgComponent;

The Node bindings accept the template as a function, which will receive the chunks as strings to return a final string.

transform(svgCode, { template: ({ imports, interfaces, componentName, props, jsx, exports }) => `${imports};
${interfaces};

class ${componentName} extends React.Component {
	constructor(${props}) {
		super(props);
	}

	render() {
		return ${jsx};
	}
}
${exports};`);

Plugins

OXVG doesn't accept plugins. Consider processing the input/output directly instead.

cat my-file.svg | oxvg jsx --no-oxvg | prettier --stdin-filepath output.jsx > output.jsx

What's Changed

• feat: #242 create oxvg_jsx by @noahbald in #243
• chore: update to Rust edition 2024 by @noahbald in #245
• chore: Update lightningcss and dedupe cssparser/selectors by @devongovett in #247
• fix: #244 remove "algorithm" as default oxvg_path feature by @noahbald in #246
• chore!: update dependencies by @noahbald in #248
• feat: skia debug commands by @noahbald in #249
• fix!: #251 stop drop z by @noahbald in #253
• fix: #250 join arc issues by @noahbald in #254
• feat: 231 implement path intersect action by @noahbald in #256
• chore: update wasm/napi dependencies by @noahbald in #257
• chore: add more napi platforms by @noahbald in #258
• chore: update readme to reflect state of the project by @noahbald in #259
• chore: update bin build targets to match napi by @noahbald in #260

Full Changelog: v0.0.6...v0.0.7