react-app-rewire-external-svg-loader

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