introduce @svg/webpack

next.config.js

@@ -1,9 +1,47 @@
 require('dotenv').config();
 
-const config = {
-  env: {
-    GITHUB_TOKEN: process.env.GITHUB_TOKEN,
+const babelLoader = {
+  loader: 'babel-loader',
+};
+
+const svgrLoader = {
+  loader: '@svgr/webpack',
+  options: {
+    babel: false,
+    svgoConfig: {
+      plugins: {
+        removeViewBox: false,
+      },
+    },
   },
 };
 
+const urlLoader = {
+  loader: 'url-loader',
+  options: {
+    limit: 1024,
+  },
+};
+
+const env = {
+  GITHUB_TOKEN: process.env.GITHUB_TOKEN,
+};
+
+const webpack = config => {
+  config.module.rules.unshift({
+    test: /\.svg$/,
+    issuer: {
+      test: /\.js$/,
+    },
+    use: [babelLoader, svgrLoader, urlLoader],
+  });
+
+  return config;
+};
+
+const config = {
+  env,
+  webpack,
+};
+
 module.exports = config;

package.json

@@ -26,7 +26,9 @@
     "styled-components": "~4.3.2"
   },
   "devDependencies": {
+    "@svgr/webpack": "~4.3.2",
     "babel-eslint": "~10.0.2",
+    "babel-loader": "~8.0.6",
     "babel-plugin-module-resolver": "~3.2.0",
     "babel-plugin-styled-components": "~1.10.6",
     "eslint": "~6.1.0",
@@ -39,6 +41,7 @@
     "eslint-plugin-react-hooks": "~1.7.0",
     "husky": "~3.0.3",
     "lint-staged": "~9.2.1",
-    "prettier": "~1.18.2"
+    "prettier": "~1.18.2",
+    "url-loader": "~2.1.0"
   }
 }