svgr.config.js

const template = (code, options, state) => `
// @flow
// Generated from ${state.filePath}

import * as React from "react";

type Props = {
  size?: string | number,
  fill?: string
};

const style = {
  display: "block",
  flex: "0 0 auto",
};

export const ${state.componentName} = ({ size, fill, ...props }: Props) => {
  return (
    ${code}
  );
};
`;

module.exports = {
  template,
  icon: true,
  expandProps: 'start',
  svgProps: {
    preserveAspectRatio: `xMidYMid meet`,
    fontSize: `{size == null ? 32 : size}`,
    fill: `{fill == null ? "currentColor" : fill}`,
    style: '{style}',
  },
};

z_generateIndex.js

const fs = require('fs');
const path = require('path');
const { promisify } = require('util');

const readdir = promisify(fs.readdir);
const writeFile = promisify(fs.writeFile);
const [source] = process.argv.slice(2);

(async () => {
  const list = await readdir(source);
  // fail in svgr index generator if icon name is index in any case
  const names = list
    .filter(file => file.toLowerCase() !== 'index.js')
    .map(file => path.basename(file, '.js'));
  const exports = names.map(name => `export { ${name} } from './${name}.js';`);
  const content = `// @flow\n\n${exports.join('\n')}`;
  await writeFile(path.join(source, 'index.js'), content);
})();