Fix code review issues

Author: Marek Rozmus

examples/images/icons.js

@@ -1,43 +1,32 @@
 import React from 'react';
 
-export const DeleteIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="100%"
-      height="100%"
-      viewBox="0 0 24 24"
-    >
-      <path fill="none" d="M0 0h24v24H0V0z" />
-      <path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" />
-    </svg>
-  );
-};
+const Svg = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 24 24"
+    {...props}
+  />
+);
 
-export const MailIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="100%"
-      height="100%"
-      viewBox="0 0 24 24"
-    >
-      <path fill="none" d="M0 0h24v24H0V0z" />
-      <path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 4.99L4 6h16zm0 12H4V8l8 5 8-5v10z" />
-    </svg>
-  );
-};
+export const DeleteIcon = () => (
+  <Svg>
+    <path fill="none" d="M0 0h24v24H0V0z" />
+    <path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" />
+  </Svg>
+);
 
-export const ReplyIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="100%"
-      height="100%"
-      viewBox="0 0 24 24"
-    >
-      <path fill="none" d="M0 0h24v24H0V0z" />
-      <path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z" />
-    </svg>
-  );
-};
+export const MailIcon = () => (
+  <Svg>
+    <path fill="none" d="M0 0h24v24H0V0z" />
+    <path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 4.99L4 6h16zm0 12H4V8l8 5 8-5v10z" />
+  </Svg>
+);
+
+export const ReplyIcon = () => (
+  <Svg>
+    <path fill="none" d="M0 0h24v24H0V0z" />
+    <path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z" />
+  </Svg>
+);

examples/webpack.config.dev.js

@@ -1,5 +1,5 @@
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
 
 const babelLoaderOptions = {
   presets: ['@babel/env', '@babel/react'],
@@ -55,8 +55,10 @@ module.exports = {
         'src',
         'app.module.css'
       ),
+
       // to import module sources
       '@sandstreamdev/react-swipeable-list': path.join(__dirname, '..', 'src'),
+
       // to make the module use same react as example
       // (otherwise even if same version is in module sources used
       // we get error about duplicated react and cannot use hooks)

examples/webpack.config.js

@@ -1,5 +1,4 @@
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var CssLoaderUtils = require('css-loader/dist/utils');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const babelLoaderOptions = {
   presets: ['@babel/env', '@babel/react'],
@@ -28,33 +27,22 @@ module.exports = {
         }
       },
       {
-        test: /\.css$/i,
+        test: /\.css$/,
+        exclude: /node_modules/,
         use: [
           { loader: 'style-loader' },
           {
             loader: 'css-loader',
             options: {
-              modules: {
-                getLocalIdent: (
-                  loaderContext,
-                  localIdentName,
-                  localName,
-                  options
-                ) => {
-                  if (loaderContext.resourcePath.includes('node_modules')) {
-                    return localName;
-                  }
-                  return CssLoaderUtils.getLocalIdent(
-                    loaderContext,
-                    localIdentName,
-                    localName,
-                    options
-                  );
-                }
-              }
+              modules: true
             }
           }
         ]
+      },
+      {
+        test: /\.css$/,
+        include: /node_modules/,
+        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
       }
     ]
   },