Nicer way to import SVGs

[Cellv2]

Use SVG element imports rather than file paths

Use something like @svgr/webpack with the following config:

declare module "*.svg" {
    const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
    export default content;
}

{
    // https://react-svgr.com/docs/webpack/
    test: /\.svg$/i,
    type: "asset",
    resourceQuery: /url/ // *.svg?url
},
{
    // https://www.npmjs.com/package/@svgr/webpack
    // https://webpack.js.org/guides/asset-modules/
    test: /\.svg$/,
    issuer: /\.[jt]sx?$/,
    resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
    use: [
        {
            loader: "@svgr/webpack",
            options: {
                typescript: true,
                ext: "tsx"
            }
        }
    ]
},

[Cellv2]

https://www.npmjs.com/package/@svgr/webpack https://webpack.js.org/guides/asset-modules/

Will also want to remove the svg from the asset/resource rule