Forward ref to svg element [publish]

ArnaudBarre · Oct 22, 2022 · 072875e · 072875e
1 parent 1260302
commit 072875e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.3.1
+
+Forward ref to svg element
+
 ## 0.3.0
 
 Added `useInnerHTML` option to use `dangerouslySetInnerHTML` for SVG contents which improve bundle size.

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-fast-react-svg",
   "description": "Turn SVG into React components, without Babel",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "license": "MIT",
   "author": "Arnaud Barré (https://github.com/ArnaudBarre)",
   "main": "dist/index.js",

diff --git a/src/index.ts b/src/index.ts
@@ -37,11 +37,11 @@ export const svgToJSX = (svg: string, useInnerHTML?: boolean) => {
       .replace(/\s+/g, " ");
     jsx = `${updatePropsCase(
       svg.slice(0, index)
-    )} {...props} dangerouslySetInnerHTML={{ __html: '${content}' }} />`;
+    )} ref={ref} {...props} dangerouslySetInnerHTML={{ __html: '${content}' }} />`;
   } else {
-    jsx = updatePropsCase(svg).replace(">", " {...props}>");
+    jsx = updatePropsCase(svg).replace(">", " ref={ref} {...props}>");
   }
-  return `import React from "react";const ReactComponent = (props) => (${jsx});export default ReactComponent;`;
+  return `import React from "react";const ReactComponent = React.forwardRef((props, ref) => (${jsx}));export default ReactComponent;`;
 };
 
 const updatePropsCase = (svg: string) =>