react-native-web support

Hi @kristerkari,

Thank you for your plugin it is working great for React native projects,

We are trying to share our codebase across react-native and web(using react-native-web), our codebase is originally developed for React native CLI project, now we would like to add web support and using CRA with CRA-rewired but we are facing a problem:

According to CRA docs if you want to import SVG as react component you should use: import { ReactComponent as Logo } from './logo.svg';

but SVGR is making only export default SvgComponent so we cannot use this approach, to fix this we could add a small fix here which should not break anything:

var jsCode = svgr.sync(src, svgrConfig) + '\nexport const ReactComponent = SvgComponent;';

which gives us needed support to work in react-native and web projects(also definitions.d.ts should be updated accordingly).

Maybe we could make a PR for this, or what do you think?

Here is a quick fix for postinstall npm/yarn script:

"postinstall": "sed -e \"s:var jsCode = svgr.sync(src, svgrConfig);:var jsCode = svgr.sync(src, svgrConfig) + 'export const ReactComponent = SvgComponent;';:g\" -i.bak ./node_modules/react-native-svg-transformer/index.js"

[vomchik]

@vitalyiegorov You can set a custom template for SVGR.

// svgr.config.js

const isExportNamedDeclaration = item => item.type === "ExportNamedDeclaration";

const hasExportNamedDeclaration = (items) => {
  if (items === null) {
    return false;
  }

  if (items instanceof Array) {
    return !!(items && items.find(isExportNamedDeclaration))
  }

  return isExportNamedDeclaration(items) 
}

const getName = (component) => {
  if (component instanceof Object) {
    return component.name;
  }

  return component;
}

const customTemplate = (
  { template },
  opts,
  { imports, componentName, props, jsx, exports },
) => {
  const ReactComponent = hasExportNamedDeclaration(exports) 
    ? ''
    : 'export const ReactComponent = ' + getName(componentName);

  return template.ast`
    ${imports}
    function ${componentName}(${props}) {
      return ${jsx};
    }
    ${ReactComponent}
    ${exports}
  `
}

module.exports = {
  template: customTemplate
}

@kristerkari Maybe it will be useful, so let’s add it to the README file.

[janlat]

Since SVGR v6.0.0, switching to named exports is just a matter of adding exportType: 'named' to your svgrrc file