I cannot load svg file

[hckhanh]

import { Avatar } from 'antd';
import PropTypes from 'prop-types';
import React from 'react';
import { ReactComponent as DeleteIcon } from './delete.svg';
import { ReactComponent as EditIcon } from './edit.svg';

export default function ViewModeEmployee({ data }) {
  return (
    <div className="editable-employee">
      <div className="editable-employee-name">
        <Avatar size={40} src={data.url} />
        {data.name}
      </div>
      <div className="editable-employee-phone">{data.phone}</div>

      <div className="editable-employee-working-time-view">
        10:00am - 7:00pm
      </div>
      <div className="editable-employee-controls">
        <EditIcon />
        <DeleteIcon />
      </div>
    </div>
  );
}

ViewModeEmployee.propTypes = {
  data: PropTypes.object.isRequired
};

As you can see, when I put <EditIcon /> and <DeleteIcon /> to the component, it shown me the error

[harrysolovay]

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 :)

[hckhanh]

@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

[harrysolovay]

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

[harrysolovay]

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

[oleastre]

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" />
    );
  }
}