JSX

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