feat!: support jest 28 and react 18

see https://jestjs.io/docs/upgrading-to-jest28#transformer

BREAKING CHANGE: transformer api has changed in jest 28

README.md

@@ -5,19 +5,21 @@ Transform svg files for for jest+react to de-clutter snapshots.
 **NOTE:** cloned from [jest-svg-transformer](https://www.npmjs.com/package/jest-svg-transformer)
 since it looks unmaintained, and it doesn't support Jest versions >= 27.
 
+**the latest version supports jest 28 - please use v1 for jest 27**
+
 Very useful with react-svg-loader. This allows you to import
 svgs directly into your react components, but still have nice snapshots.
 
 Using enzyme's shallow rendering, for example:
 
 ```js
-import React from "react";
-import MySvg from "../images/an-image.svg";
+import React from 'react';
+import MySvg from '../images/an-image.svg';
 
 function MyComponent() {
   return (
     <div>
-      <MySvg style={{ color: "blue" }} />
+      <MySvg style={{ color: 'blue' }} />
     </div>
   );
 }

lib/index.d.ts

@@ -1,4 +1,6 @@
 declare const _default: {
-    process: (src: string, filePath: string) => string;
+    process: (src: string, filePath: string) => string | {
+        code: string;
+    };
 };
 export default _default;

lib/index.js

@@ -1,18 +1,20 @@
 "use strict";
 exports.__esModule = true;
-var path = require("path");
+var path = require('path');
 function escapeFileName(str) {
-    return ("svg-" + path.basename(str, ".svg"))
+    return "svg-".concat(path.basename(str, '.svg'))
         .split(/\W+/)
-        .map(function (x) { return "" + x.charAt(0).toUpperCase() + x.slice(1); })
-        .join("");
+        .map(function (x) { return "".concat(x.charAt(0).toUpperCase()).concat(x.slice(1)); })
+        .join('');
 }
 var transform = function (src, filePath) {
-    if (path.extname(filePath) !== ".svg") {
+    if (path.extname(filePath) !== '.svg') {
         return src;
     }
     var name = escapeFileName(filePath);
-    return "\nconst React = require('react');\nfunction " + name + "(props) {\n  return React.createElement(\n    'svg', \n    Object.assign({}, props, {'data-file-name': " + name + ".name})\n  );\n}\nmodule.exports = " + name + ";\n";
+    return {
+        code: "\nconst React = require('react');\nfunction ".concat(name, "(props) {\n  return React.createElement(\n    'svg', \n    Object.assign({}, props, {'data-file-name': ").concat(name, ".name})\n  );\n}\nmodule.exports = ").concat(name, ";\n")
+    };
 };
 exports["default"] = {
     process: transform