SVG / Image Import

[seanemmer]

Current Behavior

SVG imports into TS/TSX files are not found

Desired Behavior

The ability to import SVGs into TS/TSX files

Suggested Solution

Implement rollup-plugin-svg

Who does this impact? Who is this for?

All users

Describe alternatives you've considered

I am currently manually including the SVG in my TSX file which is not a sustainable solution

Additional context

Using v. 0.11.0

[arthurdenner]

@seanemmer, can you try to extend the config with tsdx.config.js like in this example?

[seanemmer]

I attempted this but no luck. tsdx.config.js below:

const svg = require('rollup-plugin-svg')

module.exports = {
  rollup(config) {
    config.plugins.push(svg())
    return config
  }
}

[hrgui]

I have the same problem, @rollup/plugin-image supports svgs, but it is not even reading it:

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const image = require('@rollup/plugin-image');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      image(),
      postcss({
        plugins: [
          autoprefixer(),
          cssnano({
            preset: 'default',
          }),
        ]
      })
    );
    return config;
  },
};

[chrbala]

I was able to get it working, but I had to specifically include the files in the build output and inline them.

const svg = require('rollup-plugin-svg');

module.exports = {
  rollup(config) {
    const external = config.external;
    config.external = id => (id.match(/.svg$/) ? false : external(id));
    config.plugins.push(
      svg({
        base64: false,
      })
    );
    return config;
  },
};

[hrgui]

For me, it had to do with plugin order. Putting @rollup/plugin-image last causes it to be not called at all. Once I made image the first plugin, then it works:

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const image = require('@rollup/plugin-image');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        plugins: [
          autoprefixer(),
          cssnano({
            preset: 'default',
          }),
        ],
      })
    );

    config.plugins.unshift(image());
    return config;
  },
};

[agilgur5]

As @hrgui mentioned, I believe the config order is the key detail here. See also #379 (comment) / #386 (comment) / #278

I was able to get it working, but I had to specifically include the files in the build output and inline them.

@chrbala that's a separate issue related to externals or aliases: #91 . See also #379 (comment)

[tobyscott25]

@chrbala's solution worked for me! I just had to create a svg.d.ts file in my project so TypeScript would recognise SVGs as modules :)

declare module "*.svg" {
    const content: any;
    export default content;
}