I cannot load svg file about rescripts HOT 5 CLOSED

Just hit by the same issue today, I searched a bit how to solve this.
I am only using @rescripts/rescript-use-babel-config with a custom .babelrc file.
To solve the problem, I had to add this plugin in my .babelrc config:

    "plugins": [
        ["babel-plugin-named-asset-import", {
          "loaderMap": {
            "svg": {
              "ReactComponent": "@svgr/webpack?-svgo,+ref![path]"
            }
          }
        }]
    ]

This sould probably be added somewhere in the use-babel-config documentation.

And note also that the correct syntax to load svg is

import { ReactComponent as Logo } from './logo.svg';
class App extends Component {
  render() {
    return (
          <Logo width="400px" height="400px" />
    );
  }
}

from rescripts.

Hi @hckhanh –– I don't believe this to be an issue with Rescripts. Still, I'll try to offer some support.

This kind of import seems a little strange:

import { ReactComponent as DeleteIcon } from './delete.svg';

There's no exported "ReactComponent" from an svg file. Maybe replace with the following:

import DeleteIcon from './delete.svg';

I hope this is helpful (there's a change you'll need to include an SVG loader such as airbnb's). Although I'm pretty sure SVG imports are supported as of CRA 2.0+. Keep me posted :)

from rescripts.

@harrysolovay I think this is a new feature is supported by CRA. When I do by this way, it will convert data in svg file to a React component like this:

You're right, it's strange when I use it in the first time but I think this one is really good, like the same way Github inserts their svg file.

It runs perfectly when use react-scripts. You can try react-scripts start to test it 👍

Additionally, I can add event such as onClick as a native component like div

from rescripts.

@hckhanh can you send me a link to the example so I can debug?

from rescripts.

@hckhanh hopefully you managed to find the problem. Gonna close this issue. Feel free to reopen if necessary.

from rescripts.