Nerds Pledge Magnanimously

    razzle-plugin-svg-react-component

    2.0.0 • Public • Published

    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.

    Install

    npm i razzle-plugin-svg-react-component

    DownloadsWeekly Downloads

    886

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    5.83 kB

    Total Files

    4

    Last publish

    Collaborators

    • finmavis