This package contains a plugin to import
SVG as ReactComponent
.
Notes: This plugin is only compatible with Razzle v3.3.0 and above. If your project using an older version of Razzle, you could install the 1.0.3 version of this plugin. See below explanation for an older version of Razzle.
Install razzle-plugin-svg-react-component
and @svgr/webpack
if you're using yarn
yarn add razzle-plugin-svg-react-component @svgr/webpack
if you're using npm
npm install razzle-plugin-svg-react-component @svgr/webpack --save
create a razzle.config.js
file in root directory of project (next to the package.json) and put this content inside it
// razzle.config.js
module.exports = {
plugins: [
'svg-react-component'
],
};
By default you can use SVG like below :
import Logo from './logo.svg';
const App = () => (
<div>
<img src={Logo} alt="Here are my logo" />
</div>
);
With this plugin, You can also import SVGs directly as React components.
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
<div>
{/* Logo is an actual React component */}
<Logo />
</div>
);
If you encounter this error message, Module '"*.svg"' has no exported member 'ReactComponent'
.
You need to add declaration type for SVG to your declarations.d.ts
like below:
declare module '*.svg' {
import * as React from 'react';
export const ReactComponent: React.FunctionComponent<React.SVGProps<
SVGSVGElement
> & { title?: string }>;
const src: string;
export default src;
}
Notes: If your project doesn't have declarations.d.ts
file, you could create a new one inside src
folder.
Install razzle-plugin-svg-react-component@1.0.3
if you're using yarn
yarn add razzle-plugin-svg-react-component@1.0.3
if you're using npm
npm install razzle-plugin-svg-react-component@1.0.3 --save
create a razzle.config.js
file in root directory of project (next to the package.json) and put this content inside it
// razzle.config.js
module.exports = {
plugins: [
'svg-react-component'
],
};
razzle-plugin-typescript
specify useBabel: true
option in typescript plugin
// razzle.config.js
module.exports = {
plugins: [
{ name: "typescript", options: { useBabel: true } },
'svg-react-component',
],
};
use target ES6
or later
// tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"moduleResolution": "Node",
...
}
}
Under the hood, this plugin uses babel-plugin-named-asset-import
. By default, razzle-plugin-typescript
does not includes babel-loader for .tsx files. To include babel-loader, useBabel: true
has to be specified.
babel-plugin-named-asset-import
only transforms ES2015 static import
and export
statements and not require()
calls. If target is ES5
or below, static import
statements is transformed to require
calls. This prevents transformation of babel-plugin-named-asset-import
.