HOWTO for importing images doesn't work for SVGs

Current Behavior

The HOWTO explaining how to support images, found here does not work for SVGs.

I have a tsdx.config.js file identical to the one in the HOWTO, but when I run a either yarn start or yarn build I see the following error:

✖ Failed to compile
(typescript) Error: /path/to/component/index.tsx(6,19): semantic error TS2307: Cannot find module '../icons/error.svg'.

I’ve also tried modified versions of that tsdx.config.js file that either just call images() or add in '**/*.svg' to the include list, to no avail.

This error relates to the following line in my component/index.tsx file:

import error from '../icons/error.svg';

Expected behavior

It should just work. 😉

Suggested solution(s)

Additional context

The component in question is using styled-components - it’s applying the image as a background, using: backgroundImage: url(${error}),

This component is part of a component library and I also have storybook set up in my repo - that is managing to successfully build and display this SVG file with this import.

Your environment

Software	Version(s)
TSDX	0.12.3
TypeScript	3.7.5
Browser	n/a
npm/Yarn	yarn 1.22.4
Node	12.6.0
Operating System	OS X 10.14.6

[MrNovado]

@stevesims @svgr/rollup (+ url) did the trick for me: https://react-svgr.com/docs/rollup/

const url = require('@rollup/plugin-url');
const svgr = require('@svgr/rollup').default;

module.exports = {
  rollup(config, options) {
    config.plugins = [
      url(),
      svgr({
        // configure however you like, this is just an example
        ref: true,
        memo: true,
        svgoConfig: {
          plugins: [
            { removeViewBox: false },
            { removeAttrs: { attrs: 'g:(stroke|fill):((?!^none$).)*' } }
          ],
        },
      }),
      ...config.plugins,
    ];

    return config;
  },
};

import SvgUrl, { ReactComponent as Svg } from './icon.svg'

[optimistiks]

For Storybook users, if anyone stumbles on this, in addition to adding @svgr/rollup to tsdx.config.js as described above, I also had to install @svgr/webpack and add the following to .storybook/main.js to make it work with svgr.

  webpackFinal: async (config, { configType }) => {
    const assetRule = config.module.rules.find(({ test }) => test.test(".svg"));
    // exclude svg from the default storybook file-loader
    assetRule.exclude = /\.svg$/;

    // add svgr loader to handle svgs
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },