Named asset import for SVG files

packages/babel-plugin-named-asset-import/index.js

@@ -0,0 +1,57 @@
+'use strict';
+
+const { extname } = require('path');
+
+function namedAssetImportPlugin({ types: t }) {
+  const visited = new WeakSet();
+
+  return {
+    visitor: {
+      ImportDeclaration(path, { opts: { loaderMap } }) {
+        const sourcePath = path.node.source.value;
+        const ext = extname(sourcePath).substr(1);
+
+        if (visited.has(path.node) || sourcePath.indexOf('!') !== -1) {
+          return;
+        }
+
+        if (loaderMap[ext]) {
+          const addLoader = loaderMap[ext];
+
+          path.replaceWithMultiple(
+            path.node.specifiers.map(specifier => {
+              const localName = specifier.local.name;
+
+              if (t.isImportDefaultSpecifier(specifier)) {
+                const newDefaultImport = t.importDeclaration(
+                  [t.importDefaultSpecifier(t.identifier(localName))],
+                  t.stringLiteral(sourcePath)
+                );
+
+                visited.add(newDefaultImport);
+                return newDefaultImport;
+              }
+
+              const newImport = t.importDeclaration(
+                [
+                  t.importSpecifier(
+                    t.identifier(localName),
+                    t.identifier(specifier.imported.name)
+                  ),
+                ],
+                t.stringLiteral(
+                  addLoader(sourcePath, specifier.imported.name, localName)
+                )
+              );
+
+              visited.add(newImport);
+              return newImport;
+            })
+          );
+        }
+      },
+    },
+  };
+}
+
+module.exports = namedAssetImportPlugin;

packages/babel-plugin-named-asset-import/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "babel-plugin-named-asset-import",
+  "version": "0.1.0",
+  "description": "Babel plugin for named asset imports in Create React App",
+  "repository": "facebookincubator/create-react-app",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/facebookincubator/create-react-app/issues"
+  },
+  "main": "index.js",
+  "files": [
+    "index.js"
+  ],
+  "dependencies": {
+    "@babel/core": "7.0.0-beta.38"
+  }
+}

packages/babel-preset-react-app/index.js

@@ -115,6 +115,14 @@ module.exports = function(api, opts) {
           regenerator: true,
         },
       ],
+      [
+        require('babel-plugin-named-asset-import'),
+        {
+          loaderMap: {
+            svg: filename => `-!svg-react-loader!${filename}`,
+          },
+        },
+      ],
       isEnvProduction && [
         // Remove PropTypes from production build
         require('babel-plugin-transform-react-remove-prop-types').default,

packages/babel-preset-react-app/package.json

@@ -26,6 +26,7 @@
     "@babel/preset-flow": "7.0.0-beta.38",
     "@babel/preset-react": "7.0.0-beta.38",
     "babel-plugin-macros": "2.0.0",
+    "babel-plugin-named-asset-import": "^0.1.0",
     "babel-plugin-transform-dynamic-import": "2.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.12"
   }

packages/react-scripts/config/webpack.config.dev.js

@@ -264,31 +264,6 @@ module.exports = {
               },
             ],
           },
-          // Allows you to use two kinds of imports for SVG:
-          // import logoUrl from './logo.svg'; gives you the URL.
-          // import { ReactComponent as Logo } from './logo.svg'; gives you a component.
-          {
-            test: /\.svg$/,
-            use: [
-              {
-                loader: require.resolve('babel-loader'),
-                options: {
-                  // @remove-on-eject-begin
-                  babelrc: false,
-                  presets: [require.resolve('babel-preset-react-app')],
-                  // @remove-on-eject-end
-                  cacheDirectory: true,
-                },
-              },
-              require.resolve('svgr/webpack'),
-              {
-                loader: require.resolve('file-loader'),
-                options: {
-                  name: 'static/media/[name].[hash:8].[ext]',
-                },
-              },
-            ],
-          },
           // "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.

packages/react-scripts/config/webpack.config.prod.js

@@ -306,31 +306,6 @@ module.exports = {
             ),
             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
           },
-          // Allows you to use two kinds of imports for SVG:
-          // import logoUrl from './logo.svg'; gives you the URL.
-          // import { ReactComponent as Logo } from './logo.svg'; gives you a component.
-          {
-            test: /\.svg$/,
-            use: [
-              {
-                loader: require.resolve('babel-loader'),
-                options: {
-                  // @remove-on-eject-begin
-                  babelrc: false,
-                  presets: [require.resolve('babel-preset-react-app')],
-                  // @remove-on-eject-end
-                  cacheDirectory: true,
-                },
-              },
-              require.resolve('svgr/webpack'),
-              {
-                loader: require.resolve('file-loader'),
-                options: {
-                  name: 'static/media/[name].[hash:8].[ext]',
-                },
-              },
-            ],
-          },
           // "file" loader makes sure assets end up in the `build` folder.
           // When you `import` an asset, you get its filename.
           // This loader doesn't use a "test" so it will catch all modules

packages/react-scripts/package.json

@@ -54,7 +54,7 @@
     "raf": "3.4.0",
     "react-dev-utils": "^5.0.0",
     "style-loader": "0.19.1",
-    "svgr": "1.6.0",
+    "svg-react-loader": "^0.4.5",
     "sw-precache-webpack-plugin": "0.11.4",
     "thread-loader": "1.1.2",
     "uglifyjs-webpack-plugin": "1.1.6",