'ReactComponent' is not exported from svg

Question

I created a typescript app using CRA, with code like this:

import { ReactComponent as Search } from './search.svg'

It ran fine, and now I want to strip this code into an npm package (library). I created this package by first running CRA again, then removing everything that did not seem relevant (ex. public folder). A simplified version of /dist looks like this:

esm/
   icon/
      index.d.ts
      index.js
   index.d.ts
   index.js

This is the original icon/index.ts:

/// <reference types="react-scripts" />
import { ReactComponent as Search } from './search.svg'
export const Icons = {
  Search,
}

This is the compiled icon/index.d.ts:

/// <reference types="react" /> <-- Changed for some reason??
export declare const Icons: {
    Search: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
        title?: string | undefined;
    }>;
};

When I try to run an app that then uses this library, I get the following error:

../dist/esm/common/icon/index.js Attempted import error:
'ReactComponent' is not exported from './search.svg' (imported as 'Search').

How do I resolve this?

Answer 1

My original answer wasn't really clear, and it didn't consider the fact that you were using create-react-app.

Since you are using create-react-app the SVGR library is already installed and being used to process SVG files as a ReactComponent.

You can just import them directly like this:

import Search from './search.svg'

and then use it like so:

export const Component = () => {
  return (
    <div>
      <Search />
    </div>
  );
}