diff --git a/scopes/react/react/component.json b/scopes/react/react/component.json index 82f86d9d05ea..986f8c18c822 100644 --- a/scopes/react/react/component.json +++ b/scopes/react/react/component.json @@ -27,6 +27,7 @@ "eslint-plugin-react": "7.22.0", "eslint-plugin-jsx-a11y": "6.4.1", "eslint-plugin-mdx": "1.13.0", + "new-url-loader": "0.1.1", "react-app-polyfill": "1.0.6", "resolve-url-loader": "3.1.2", "@mdx-js/react": "1.6.22", diff --git a/scopes/react/react/webpack/webpack.config.base.ts b/scopes/react/react/webpack/webpack.config.base.ts index a6ee1cf45651..19b44705d5c4 100644 --- a/scopes/react/react/webpack/webpack.config.base.ts +++ b/scopes/react/react/webpack/webpack.config.base.ts @@ -135,18 +135,6 @@ export default function (isEnvProduction = false): Configuration { configFile: false, customize: require.resolve('babel-preset-react-app/webpack-overrides'), presets: [require.resolve('@babel/preset-react')], - plugins: [ - [ - require.resolve('babel-plugin-named-asset-import'), - { - loaderMap: { - svg: { - ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]', - }, - }, - }, - ], - ], // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds. @@ -308,7 +296,21 @@ export default function (isEnvProduction = false): Configuration { }, }, }, - + { + // loads svg as both inlineUrl and react component, like: + // import starUrl, { ReactComponent as StarIcon } from './star.svg'; + // (remove when there is native support for both opitons from webpack5 / svgr) + test: /\.svg$/, + oneOf: [ + { + dependency: { not: ['url'] }, // exclude new URL calls + use: [require.resolve('@svgr/webpack'), require.resolve('new-url-loader')], + }, + { + type: 'asset', // export a data URI or emit a separate file + }, + ], + }, // "file" loader makes sure those assets get served by WebpackDevServer. // When you `import` an asset, you get its (virtual) filename. // In production, they would get copied to the `build` folder. diff --git a/scopes/ui-foundation/ui/webpack/webpack.base.config.ts b/scopes/ui-foundation/ui/webpack/webpack.base.config.ts index 69dc6a479b61..223a949f398b 100644 --- a/scopes/ui-foundation/ui/webpack/webpack.base.config.ts +++ b/scopes/ui-foundation/ui/webpack/webpack.base.config.ts @@ -155,7 +155,7 @@ export default function createWebpackConfig( // smaller than specified limit in bytes as data URLs to avoid requests. // A missing `test` is equivalent to a match. { - test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], + test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/], type: 'asset', parser: { dataUrlCondition: { @@ -172,18 +172,6 @@ export default function createWebpackConfig( babelrc: false, configFile: false, customize: require.resolve('babel-preset-react-app/webpack-overrides'), - plugins: [ - [ - require.resolve('babel-plugin-named-asset-import'), - { - loaderMap: { - svg: { - ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]', - }, - }, - }, - ], - ], // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds.