How to use external-svg-sprite-loader - 2 common examples

To help you get started, we’ve selected a few external-svg-sprite-loader examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github moxystudio / react-with-moxy / scripts / config / webpack / config-client.js View on Github external
options: require('postcss-preset-moxy')({
                                // Any non-relative imports are resolved to this path
                                importPath: path.join(srcDir, 'shared/styles/imports'),
                            }),
                        },
                    ],
                },
                // Load SVG files and create an external sprite
                // While this has a lot of advantages such as not blocking the initial load,
                // it might not workout for every SVG, see: https://github.com/moxystudio/react-with-moxy/issues/6
                {
                    test: /\.svg$/,
                    exclude: [/\.inline\.svg$/, path.join(srcDir, 'shared/media/fonts')],
                    use: [
                        {
                            loader: SvgStorePlugin.loader,
                            options: {
                                name: isDev ? 'images/svg-sprite.svg' : 'images/svg-sprite.[hash:15].svg',
                                // Force publicPath to be local because external SVGs doesn't work on CDNs
                                ...!sameOrigin(publicUrl, siteUrl) ? { publicPath: `${siteUrl + buildUrlPath}/` } : {},
                            },
                        },
                        // Uniquify classnames and ids so that if svgxuse injects the sprite into the body,
                        // it doesn't cause DOM conflicts
                        {
                            loader: require.resolve('svg-css-modules-loader'),
                            options: {
                                transformId: true,
                            },
                        },
                    ],
                },
github moxystudio / react-with-moxy / scripts / config / webpack / config-server.js View on Github external
options: require('postcss-preset-moxy')({
                                // Any non-relative imports are resolved to this path
                                importPath: path.join(srcDir, 'shared/styles/imports'),
                            }),
                        },
                    ].filter((val) => val),
                },
                // Load SVG files and create an external sprite
                // While this has a lot of advantages, such as not blocking the initial load, it can't contain
                // inline SVGs, see: https://github.com/moxystudio/react-with-moxy/issues/6
                {
                    test: /\.svg$/,
                    exclude: [/\.inline\.svg$/, path.join(srcDir, 'shared/media/fonts')],
                    use: [
                        {
                            loader: SvgStorePlugin.loader,
                            options: {
                                name: isDev ? 'images/svg-sprite.svg' : 'images/svg-sprite.[hash:15].svg',
                                // Force publicPath to be local because external SVGs doesn't work on CDNs
                                ...!sameOrigin(publicUrl, siteUrl) ? { publicPath: `${siteUrl + buildUrlPath}/` } : {},
                            },
                        },
                        // Uniquify classnames and ids so that if svgxuse injects the sprite into the body,
                        // it doesn't cause DOM conflicts
                        {
                            loader: require.resolve('svg-css-modules-loader'),
                            options: {
                                transformId: true,
                            },
                        },
                    ],
                },

external-svg-sprite-loader

A webpack loader and plugin that generate SVG sprites out of a collection of SVG files used in your JS and CSS files

MIT
Latest version published 3 years ago

Package Health Score

45 / 100
Full package analysis

Popular external-svg-sprite-loader functions