razzle-plugin-svg-react-component

Razzle Plugin SVG as ReactComponent

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.

Usage in Razzle Projects

• 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'
    ],
  };
  

Example

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

Usage with Typescript

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.

Older version Razzle (below v3.3.0)

Usage in Razzle Projects

• 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'
    ],
  };
  

Usage with 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.