Add SVGR to generator install

[jho406]

inline_svg a common tools we usually at here at thoughtbot. And while we could inject the results of inline_svg into props_template, many times we end up using a react equivalent: https://react-svgr.com/

Lets add support for react-svgr. Here’s a few sample files for esbuild that we’ve used on past projects.

import * as esbuild from 'esbuild'
import svgr from 'esbuild-plugin-svgr'

const isWatch = process.argv.includes('--watch')

const buildOptions = {
  entryPoints: [
    'app/javascript/application_superglue.tsx',
    'app/javascript/admin/application.js',
    'app/javascript/application.js',
  ],
  bundle: true,
  sourcemap: true,
  format: 'esm',
  outdir: 'app/assets/builds',
  publicPath: '/assets',
  plugins: [svgr()],
  metafile: true,
}

if (isWatch) {
  const ctx = await esbuild.context(buildOptions)
  await ctx.watch()
  console.log('Watching for changes...')
} else {
  const result = await esbuild.build(buildOptions)
  console.log(await esbuild.analyzeMetafile(result.metafile))
}

And the equivalent

env.d.ts

declare module '*.svg' {
  import React = require('react')
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
  export default ReactComponent
}

We’d have to add support for each build tool we settle on in #11