Svg icons

config/webpack.config.js

@@ -472,6 +472,18 @@ module.exports = function(webpackEnv) {
                 'sass-loader'
               ),
             },
+            {
+              test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+              issuer: {
+                test: /\.jsx?$/
+              },
+              use: ["@svgr/webpack"]
+            },
+            {
+              test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+              loader: "url-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.

src/components/PuzzleButton.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
-import icon from '../assets/icon-puzzle.svg';
-import unbundleIcon from '../assets/icon-puzzle-unbundle.svg';
+import IconPuzzle from '../assets/icon-puzzle.svg';
+import IconPuzzleUnbundle from '../assets/icon-puzzle-unbundle.svg';
 
 export default function PuzzleButton({
     onClick,
@@ -19,7 +19,11 @@ export default function PuzzleButton({
                 active && 'puzzle-button--active',
             )}
         >
-            <img src={unbundle ? unbundleIcon : icon} alt="puzzle" />
+            {unbundle ? (
+                <IconPuzzleUnbundle className="puzzle-button__icon" />
+            ) : (
+                <IconPuzzle className="puzzle-button__icon" />
+            )}
         </button>
     );
 }