Stateful component

README.md

@@ -44,6 +44,7 @@ npm install --save-dev babel-plugin-inline-react-svg
 
 - *`ignorePattern`* - A pattern that imports will be tested against to selectively ignore imports.
 - *`caseSensitive`* - A boolean value that if true will require file paths to match with case-sensitivity. Useful to ensure consistent behavior if working on both a case-sensitive operating system like Linux and a case-insensitive one like OS X or Windows.
+- *`statefulComponent`* - If true return a stateful component that supports a svgRef property
 - *`svgo`* - svgo options (`false` to disable). Example:
 ```json
 {

src/index.js

@@ -19,6 +19,30 @@ const buildSvgWithDefaults = template(`
   SVG_NAME.defaultProps = SVG_DEFAULT_PROPS_CODE;
 `);
 
+const buildSvgSF = template(`  
+  class SVG_NAME extends React.Component {
+    render (){
+      const props = Object.assign({}, this.props);
+      const refcb = this.props.svgRef ? this.props.svgRef : function(){}
+      delete props.svgRef
+      return SVG_CODE
+    }
+  }
+`);
+
+const buildSvgWithDefaultsSF = template(`
+  class SVG_NAME extends React.Component  {
+    render (){
+      const props = Object.assign({}, this.props);
+      const refcb = this.props.svgRef ? this.props.svgRef : function(){}
+      delete props.svgRef
+      return SVG_CODE
+    }
+  }
+  SVG_NAME.defaultProps = SVG_DEFAULT_PROPS_CODE;
+`);
+
+
 let ignoreRegex;
 
 export default ({ types: t }) => ({
@@ -38,7 +62,7 @@ export default ({ types: t }) => ({
     },
     ImportDeclaration(path, state) {
       const importPath = path.node.source.value;
-      const { ignorePattern, caseSensitive } = state.opts;
+      const { ignorePattern, caseSensitive, statefulComponent } = state.opts;
       const { file } = state;
       if (ignorePattern) {
         // Only set the ignoreRegex once:
@@ -94,15 +118,35 @@ export default ({ types: t }) => ({
             }
           });
 
-          svgCode.openingElement.attributes = keepProps;
+          svgCode.openingElement.attributes = keepProps
+
+          if (statefulComponent){
+            svgCode.openingElement.attributes.push(
+              t.jSXAttribute(
+                t.jSXIdentifier('ref'),
+                t.jSXExpressionContainer(
+                  t.arrowFunctionExpression(
+                    [t.identifier('el')],
+                    t.callExpression(
+                      t.identifier('refcb'),
+                      [t.identifier('el')]
+                    )
+                  )
+                )
+              )
+            );
+          }
+
           opts.SVG_DEFAULT_PROPS_CODE = t.objectExpression(defaultProps);
         }
 
         if (opts.SVG_DEFAULT_PROPS_CODE) {
-          const svgReplacement = buildSvgWithDefaults(opts);
+          const svgReplacement = (
+            statefulComponent ? buildSvgWithDefaultsSF(opts) : buildSvgWithDefaults(opts)
+          );
           path.replaceWithMultiple(svgReplacement);
         } else {
-          const svgReplacement = buildSvg(opts);
+          const svgReplacement = statefulComponent ? buildSvgSF(opts) : buildSvg(opts);
           path.replaceWith(svgReplacement);
         }
         file.get('ensureReact')();