Merge pull request #38 from pawelnvk/svg-as-jsx

Handle SVGs as JSX.

Author: Dominik Rowicki

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>
  );