chore: support svg loader (#81)

macacajs · Jun 29, 2022 · 1d4eeb1 · 1d4eeb1
1 parent ff2f7f0
commit 1d4eeb1
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 5 deletions.
diff --git 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
diff --git a/view/src/components/Icon.js 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
@@ -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
@@ -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
@@ -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')],
         },
       ],
     },