Non Productive Monday

    react-app-rewire-external-svg-loader

    1.1.0 • Public • Published

    react-app-rewire-external-svg-loader

    NPM version Downloads Build Status Coverage Status Dependency status Dev Dependency status Greenkeeper badge

    Adds external-svg-sprite-loader for CRA apps, using react-app-rewired.

    Installation

    $ npm install --save-dev react-app-rewire-external-svg-loader

    Usage

    In the config-overrides.js you created for react-app-rewired add this code:

    module.exports = (config, env) => {
        config = require('react-app-rewire-external-svg-loader')(config, env, { /* options */ });
     
        // You may apply other rewires as well
     
        return config;
    }

    If you are using the compose utility of react-app-rewired:

    const { compose } = require('react-app-rewired');
     
    module.exports = compose(
        require('react-app-rewire-external-svg-loader')({ /* options */ })
        // ... other rewires
    )

    Available options:

    Name Description Type Default
    test The loader test pattern string/RegExp /\.svg$/
    include The loader include condition string/Array/RegExp/Function src folder
    exclude The loader exclude condition string/Array/RegExp/Function
    loaderOptions The options to pass to the loader Object { name: 'static/media/svg-sprite.[hash:8].svg' } for production, { name: 'static/media/svg-sprite.svg' } otherwise
    pluginOptions The options to pass to the loader Object {}

    If you modify include and exclude to point to packages in node_modules, it's advised to use fs.realpathSync so that it plays well with packages linked with npm link. Alternatively, you may disable resolve.symlinks in your webpack configuration.

    svgxuse

    You might want to use svgxuse if you want to support IE9-11 or if you are serving the sprite from another origin, such as a CDN.

    If that's the case, you may load it using a dynamic import to defer it by adding the following code to src/index.js:

    // ...
    import('svgxuse').catch(() => {});

    Tests

    $ npm test
    $ npm test -- --watch # during development 

    License

    MIT License

    Install

    npm i react-app-rewire-external-svg-loader

    DownloadsWeekly Downloads

    8

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    9.62 kB

    Total Files

    5

    Last publish

    Collaborators

    • satazor