From 1d4eeb15aa88e689d2fdd8e0c172be0890a787a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=BE=BE=E5=B3=B0=E7=9A=84=E5=A4=8F=E5=A4=A9?=
 <xudafeng@126.com>
Date: Wed, 29 Jun 2022 19:34:45 +0800
Subject: [PATCH] chore: support svg loader (#81)

---
 view/package.json               |  8 ++++---
 view/src/assets/logo.svg        | 41 +++++++++++++++++++++++++++++++++
 view/src/components/Icon.js     | 22 ++++++++++++++++++
 view/src/components/SiderBar.js |  6 ++++-
 view/src/index.js               |  6 +++++
 view/webpack.config.js          | 13 ++++++++++-
 6 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 view/src/assets/logo.svg
 create mode 100644 view/src/components/Icon.js

diff --git a/view/package.json b/view/package.json
index 776d991..11170d0 100644
--- a/view/package.json
+++ b/view/package.json
@@ -52,7 +52,7 @@
     "lodash.get": "^4.4.2",
     "lodash.uniqby": "^4.7.0",
     "macaca-cli": "2",
-    "macaca-electron": "7",
+    "macaca-electron": "18",
     "macaca-wd": "3",
     "mini-css-extract-plugin": "^0.4.0",
     "postcss-loader": "^2.1.6",
@@ -69,6 +69,9 @@
     "react-router-dom": "^4.2.2",
     "style-loader": "^0.21.0",
     "stylelint": "^9.3.0",
+    "svg-sprite-loader": "^6.0.11",
+    "svgo": "^2.8.0",
+    "svgo-loader": "^3.0.0",
     "url-loader": "^1.1.2",
     "url-parse": "^1.4.3",
     "webpack": "^4.10.0",
@@ -80,6 +83,5 @@
   },
   "dependencies": {
     "dayjs": "^1.7.7"
-  },
-  "licenses": "MIT"
+  }
 }
diff --git a/view/src/assets/logo.svg b/view/src/assets/logo.svg
new file mode 100644
index 0000000..c4b1c59
--- /dev/null
+++ b/view/src/assets/logo.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="353px" height="395px" viewBox="0 0 353 395" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
+    <title>logo-color-1</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <radialGradient cx="81.553334%" cy="6.68237106%" fx="81.553334%" fy="6.68237106%" r="100%" id="radialGradient-1">
+            <stop stop-color="#9BCB53" offset="0%"></stop>
+            <stop stop-color="#72A22A" offset="100%"></stop>
+        </radialGradient>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.35 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="reliable-logos" sketch:type="MSArtboardGroup" transform="translate(-579.000000, -67.000000)">
+            <g id="logo-color-1" sketch:type="MSLayerGroup" transform="translate(579.000000, 67.000000)">
+                <polygon id="6Polygon" fill="url(#radialGradient-1)" sketch:type="MSShapeGroup" points="176.76383 -2.88858925 353 97.1114107 353 297.111411 176.76383 397.111411 0.52766066 297.111411 0.52766066 97.1114107 "></polygon>
+                <g id="right-outter" transform="translate(56.000000, 77.000000)" fill="#FFFFFF" sketch:type="MSShapeGroup">
+                    <g id="circle">
+                        <g id="timer">
+                            <path d="M212.774945,198 C230.389477,177.049229 241,150.013724 241,120.5 C241,53.9496876 187.050312,0 120.5,0 C53.9496876,0 0,53.9496876 0,120.5 C0,169.01762 28.6739628,210.838077 69.9999946,229.939478 L70,200.105064 C44.0594232,183.347461 26.8884298,154.177948 26.8884298,120.997934 C26.8884298,69.0226899 69.0226899,26.8884298 120.997934,26.8884298 C172.973178,26.8884298 215.107438,69.0226899 215.107438,120.997934 C215.107438,152.828863 199.304388,180.968792 175.116007,198 L212.774945,198 Z" id="p"></path>
+                        </g>
+                    </g>
+                    <path d="M77.6829163,108.078006 C81.3448416,110.089195 116.765524,133.601806 116.765524,133.601806 C116.765524,133.601806 146.285243,91.679544 174.370542,62.3176514 C177.863321,58.6661106 181.820294,53.5857109 185.467247,50.1697123 C211.145294,26.1178036 238.378969,10.4891463 240.862738,15.1526856 C242.302753,17.8564666 232.20114,25.5404929 220.48342,37.6722571 C210.459652,48.0502145 201.548265,58.5924338 192.903584,69.7430303 C191.747968,71.2336351 190.597118,72.7351118 189.449014,74.2485212 C187.585123,76.7054694 184.563028,80.8281806 180.212584,86.4406092 C176.095201,91.75237 169.498325,101.588355 169.498325,101.588355 C169.498325,101.588355 162.848095,110.462471 151.394921,130.036566 C146.373192,138.618974 141.084247,148.215837 136.413976,156.438543 C130.432652,166.969551 127.439479,171.840356 125.699347,173.314445 C124.953073,173.946624 124.285006,174.011836 124.285006,174.011836 C121.691625,174.938455 118.191329,173.944302 116.464703,171.791154 C116.464703,171.791154 93.1029438,142.58597 85.3443423,133.601806 C77.5857408,124.617641 77.0293745,123.677948 73.0924746,118.920861 C69.7410505,114.871223 68.0202627,110.473898 68.0202627,107.506807 C68.0202627,104.962602 76.1262356,107.223051 77.6829163,108.078006 Z" id="tick" filter="url(#filter-2)"></path>
+                </g>
+                <g id="text" transform="translate(131.000000, 269.000000)" font-weight="260" font-family="Helvetica" letter-spacing="0.400000006" fill="#FFFFFF" font-size="37.2680412" sketch:type="MSTextLayer">
+                    <text id="reliable">
+                        <tspan x="0.778350515" y="37.5515464">reliable</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/view/src/components/Icon.js b/view/src/components/Icon.js
new file mode 100644
index 0000000..b3bfe51
--- /dev/null
+++ b/view/src/components/Icon.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import classnames from 'classnames';
+
+function Icon(props) {
+  const { className, type, width, height, fill, radius, style = {} } = props;
+  return (
+    <svg
+      className={classnames('icon-svg', className)}
+      style={Object.assign({
+        width,
+        height: height || width,
+        minWidth: width,
+        fill,
+        borderRadius: radius,
+      }, style)}
+    >
+      <use xlinkHref={`#${type}`} />
+    </svg>
+  );
+}
+
+export default Icon;
diff --git a/view/src/components/SiderBar.js b/view/src/components/SiderBar.js
index 1757eee..aa61a84 100644
--- a/view/src/components/SiderBar.js
+++ b/view/src/components/SiderBar.js
@@ -12,6 +12,7 @@ import {
   SettingOutlined,
 } from '@ant-design/icons';
 import { FormattedMessage } from 'react-intl';
+import Icon from './Icon';
 
 const Sider = Layout.Sider;
 
@@ -32,7 +33,10 @@ export default class SiderBar extends React.Component {
       >
         <div className="logo">
           <Link to="/">
-            <img alt="logo" src="https://macacajs.github.io/reliable/logo/reliable.svg" />
+            <Icon
+              width={30}
+              type="logo"
+            />
             <h1>Reliable</h1>
           </Link>
         </div>
diff --git a/view/src/index.js b/view/src/index.js
index d3a05b2..7a367cf 100644
--- a/view/src/index.js
+++ b/view/src/index.js
@@ -43,6 +43,12 @@ const chooseLocale = () => {
       };
   }
 };
+
+const importAll = (r) => {
+  return r.keys().forEach(r);
+};
+importAll(require.context('./assets', false, /\.svg$/));
+
 const lang = chooseLocale();
 
 window.addEventListener('load', () => {
diff --git a/view/webpack.config.js b/view/webpack.config.js
index 3f73358..bf2e51a 100644
--- a/view/webpack.config.js
+++ b/view/webpack.config.js
@@ -74,7 +74,18 @@ module.exports = (env, argv) => {
           ],
         }, {
           test: /\.svg$/,
-          loader: 'url-loader',
+          use: [
+            {
+              loader: 'svg-sprite-loader',
+              options: {
+                symbolId: '[name]',
+              },
+            },
+            {
+              loader: 'svgo-loader',
+            },
+          ],
+          include: [path.resolve(__dirname, 'src', 'assets')],
         },
       ],
     },