Handle SVGs as JSX.

README.md

@@ -65,3 +65,12 @@ Importing any stylesheet from JS (with CSS Modules enabled) will convert class n
   @import '~react-select/dist/react-select';
 }
 ```
+#### 5. SVG as JSX, is it even possible?
+Importing SVGs as JSX is possible, but only SVGs suffixed with `.inline` will be treated as JSX code:
+```
+import logo from './logo.svg';
+import LogoInline from './logo.inline.svg';
+
+<img src={logo} alt="logo" />
+<LogoInline />
+```

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

@@ -175,8 +175,8 @@ module.exports = {
                   // directory for faster rebuilds.
                   cacheDirectory: true,
                 },
-              }
-            ]
+              },
+            ],
           },
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.
@@ -191,7 +191,9 @@ module.exports = {
                 loader: require.resolve('css-loader'),
                 options: {
                   importLoaders: 2,
-                  modules: process.env.CSS_MODULES ? process.env.CSS_MODULES == 'true' : true,
+                  modules: process.env.CSS_MODULES
+                    ? process.env.CSS_MODULES == 'true'
+                    : true,
                   camelCase: true,
                   localIdentName: '[path][name]__[local]--[hash:base64:5]',
                 },
@@ -226,6 +228,12 @@ module.exports = {
             test: /\.md$/,
             loader: require.resolve('raw-loader'),
           },
+          // This loader allows to parse SVG as JSX
+          {
+            test: /\.inline\.svg$/,
+            exclude: /node_modules/,
+            loader: 'svg-react-loader',
+          },
           // "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

@@ -206,9 +206,12 @@ module.exports = {
                         importLoaders: 2,
                         minimize: true,
                         sourceMap: shouldUseSourceMap,
-                        modules: process.env.CSS_MODULES ? process.env.CSS_MODULES == 'true' : true,
+                        modules: process.env.CSS_MODULES
+                          ? process.env.CSS_MODULES == 'true'
+                          : true,
                         camelCase: true,
-                        localIdentName: '[path][name]__[local]--[hash:base64:5]',
+                        localIdentName:
+                          '[path][name]__[local]--[hash:base64:5]',
                       },
                     },
                     {
@@ -249,6 +252,12 @@ module.exports = {
             test: /\.md$/,
             loader: require.resolve('raw-loader'),
           },
+          // This loader allows to parse SVG as JSX
+          {
+            test: /\.inline\.svg$/,
+            exclude: /node_modules/,
+            loader: 'svg-react-loader',
+          },
           // "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

@@ -65,6 +65,7 @@
     "raw-loader": "^0.5.1",
     "react-dev-utils": "^5.0.0",
     "style-loader": "0.19.0",
+    "svg-react-loader": "0.4.5",
     "sw-precache-webpack-plugin": "0.11.4",
     "url-loader": "0.6.2",
     "webpack": "3.8.1",

packages/react-scripts/template/src/components/App/index.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
+import LogoInline from './logo.inline.svg';
 import styles from './style.scss';
 
 class App extends Component {
   state = {
     count: 0,
-  }
+  };
 
   componentDidMount() {
     setInterval(this.increment, 1000);
@@ -19,17 +20,21 @@ class App extends Component {
     this.setState(prevState => ({
       count: prevState.count + 1,
     }));
-  }
+  };
 
   render() {
     return (
       <div className={styles.app}>
         <header className={styles.appHeader}>
+          <LogoInline fill="#61DAFB" className={styles.appLogo} />
           <img src={logo} className={styles.appLogo} alt="logo" />
-          <h1 className={styles.appTitle}>Welcome to React | Count: {this.state.count}</h1>
+          <h1 className={styles.appTitle}>
+            Welcome to React | Count: {this.state.count}
+          </h1>
         </header>
         <p className={styles.appIntro}>
-          To get started, edit <code>src/components/App/index.js</code> and save to reload.
+          To get started, edit <code>src/components/App/index.js</code> and save
+          to reload.
         </p>
       </div>
     );