Removed manually created SVG JSX. Inlined some SVGs as data URIs.

MadOPcode · MadOPcode · commit ed1a759ac8cf · 2021-05-30T11:08:21.000+03:00
diff --git a/babel.config.js b/babel.config.js
@@ -46,6 +46,7 @@ module.exports = function (api) {
         //     "module-resolver",
         //     {
         //       alias: {
+        //         assets: "./src/assets",
         //         styles: "./src/styles",
         //         components: "./src/components",
         //         hooks: "./src/hooks",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -94,6 +94,7 @@
     "single-spa-react": "^2.14.0",
     "style-loader": "^2.0.0",
     "systemjs-webpack-interop": "^2.1.2",
+    "url-loader": "^4.1.1",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-config-single-spa-react": "^1.0.3",
diff --git a/src/components/Icons/ArrowDown/index.jsx b/src/components/Icons/ArrowDown/index.jsx
@@ -2,45 +2,24 @@ import React from "react";
 import PT from "prop-types";
 import cn from "classnames";
 import IconWrapper from "components/IconWrapper";
+import IconArrowDown from "../../../assets/images/icon-arrow-down.svg";
 import styles from "./styles.module.scss";
 
 /**
+ * Displays a wide dark green arrow pointing down.
  *
  * @param {Object} props component props
  * @param {string} [props.className] class name added to root element
  * @returns {JSX.Element}
  */
 const ArrowDown = ({ className }) => (
-  <IconWrapper className={cn(styles.arrow, className)}>{jsx}</IconWrapper>
+  <IconWrapper className={cn(styles.arrow, className)}>
+    <IconArrowDown />
+  </IconWrapper>
 );
 
 ArrowDown.propTypes = {
   className: PT.string,
 };
 
 export default ArrowDown;
-
-// This JSX will never change so it's alright to create it only once.
-const jsx = (
-  <svg
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    x="0px"
-    y="0px"
-    viewBox="0 0 15 9"
-    enableBackground="new 0 0 15 9"
-    xmlSpace="preserve"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      fill="#137D60"
-      d="M6.7914,8.2883L0.7067,2.1772
-	C0.312,1.7808,0.3011,1.1434,0.6818,0.7337C1.044,0.3439,1.6537,0.3216,2.0434,0.6838c0.0091,0.0085,0.0181,0.0171,0.0269,0.026
-	L7.5,6.163l0,0l5.4297-5.4533c0.3754-0.3771,0.9855-0.3784,1.3625-0.003c0.0088,0.0088,0.0175,0.0178,0.026,0.0269
-	c0.3808,0.4097,0.3698,1.0471-0.0249,1.4435L8.2086,8.2883C7.819,8.6797,7.1858,8.681,6.7944,8.2913
-	C6.7934,8.2903,6.7924,8.2893,6.7914,8.2883z"
-    />
-  </svg>
-);
diff --git a/src/components/Icons/ArrowLeft/index.jsx b/src/components/Icons/ArrowLeft/index.jsx
@@ -2,42 +2,24 @@ import React from "react";
 import PT from "prop-types";
 import cn from "classnames";
 import IconWrapper from "components/IconWrapper";
+import IconArrowLeft from "../../../assets/images/icon-arrow-left.svg";
 import styles from "./styles.module.scss";
 
 /**
+ * Displays a green arrow pointing to the left.
  *
  * @param {Object} props component props
  * @param {string} [props.className] class name added to root element
  * @returns {JSX.Element}
  */
 const ArrowLeft = ({ className }) => (
-  <IconWrapper className={cn(styles.arrow, className)}>{jsx}</IconWrapper>
+  <IconWrapper className={cn(styles.arrow, className)}>
+    <IconArrowLeft />
+  </IconWrapper>
 );
 
 ArrowLeft.propTypes = {
   className: PT.string,
 };
 
 export default ArrowLeft;
-
-// This JSX will never change so it's alright to create it only once.
-const jsx = (
-  <svg
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    x="0px"
-    y="0px"
-    viewBox="0 0 8 12"
-    enableBackground="new 0 0 8 12"
-    xmlSpace="preserve"
-  >
-    <polygon
-      fillRule="evenodd"
-      clipRule="evenodd"
-      fill="#137D60"
-      points="6.325,11.775 7.45,10.725 2.725,6
-	7.45,1.275 6.325,0.225 0.55,6 "
-    />
-  </svg>
-);
diff --git a/src/components/Icons/ArrowRight/index.jsx b/src/components/Icons/ArrowRight/index.jsx
@@ -2,42 +2,24 @@ import React from "react";
 import PT from "prop-types";
 import cn from "classnames";
 import IconWrapper from "components/IconWrapper";
+import IconArrowRight from "../../../assets/images/icon-arrow-right.svg";
 import styles from "./styles.module.scss";
 
 /**
+ * Displays a green arrow pointing to the right.
  *
  * @param {Object} props component props
  * @param {string} [props.className] class name added to root element
  * @returns {JSX.Element}
  */
 const ArrowRight = ({ className }) => (
-  <IconWrapper className={cn(styles.arrow, className)}>{jsx}</IconWrapper>
+  <IconWrapper className={cn(styles.arrow, className)}>
+    <IconArrowRight />
+  </IconWrapper>
 );
 
 ArrowRight.propTypes = {
   className: PT.string,
 };
 
 export default ArrowRight;
-
-// This JSX will never change so it's alright to create it only once.
-const jsx = (
-  <svg
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    x="0px"
-    y="0px"
-    viewBox="0 0 8 12"
-    enableBackground="new 0 0 8 12"
-    xmlSpace="preserve"
-  >
-    <polygon
-      fillRule="evenodd"
-      clipRule="evenodd"
-      fill="#137D60"
-      points="1.675,11.775 0.55,10.725 5.275,6
-	0.55,1.275 1.675,0.225 7.45,6 "
-    />
-  </svg>
-);
diff --git a/src/components/Icons/ArrowSmall/index.jsx b/src/components/Icons/ArrowSmall/index.jsx
@@ -2,10 +2,11 @@ import React from "react";
 import PT from "prop-types";
 import cn from "classnames";
 import IconWrapper from "components/IconWrapper";
+import IconArrowDownSmall from "../../../assets/images/icon-arrow-down-small.svg";
 import styles from "./styles.module.scss";
 
 /**
- * Displays small down-arrow.
+ * Displays a small narrow arrow pointing down or up.
  *
  * @param {Object} props component props
  * @param {string} [props.className] class name added to root element
@@ -21,7 +22,7 @@ const ArrowSmall = ({ className, onClick, isActive, direction = "down" }) => (
       [styles.isActive]: isActive,
     })}
   >
-    {jsx}
+    <IconArrowDownSmall />
   </IconWrapper>
 );
 
@@ -33,24 +34,3 @@ ArrowSmall.propTypes = {
 };
 
 export default ArrowSmall;
-
-const jsx = (
-  <svg
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    x="0px"
-    y="0px"
-    viewBox="0 0 11 7"
-    enableBackground="new 0 0 11 7"
-    xmlSpace="preserve"
-  >
-    <polygon
-      fillRule="evenodd"
-      clipRule="evenodd"
-      fill="#FFFFFF"
-      points="5.5,6.9 0.1,1.5 1.5,0.1 5.5,4.1 9.5,0.1
-	10.9,1.5 "
-    />
-  </svg>
-);
diff --git a/src/components/Icons/ArrowSmall/styles.module.scss b/src/components/Icons/ArrowSmall/styles.module.scss
@@ -4,14 +4,17 @@
   svg {
     display: block;
     width: 100%;
+    height: auto;
 
+    path,
     polygon {
       fill: #aaa;
     }
   }
 
   &.isActive {
     svg {
+      path,
       polygon {
         fill: #000;
       }
diff --git a/src/components/Icons/Freelancers/index.jsx b/src/components/Icons/Freelancers/index.jsx
@@ -2,9 +2,11 @@ import React from "react";
 import PT from "prop-types";
 import cn from "classnames";
 import IconWrapper from "components/IconWrapper";
+import IconFreelancers from "../../../assets/images/icon-menu-item-feelancers.svg";
 import styles from "./styles.module.scss";
 
 /**
+ * Displays a "people" icon used in navigation menu.
  *
  * @param {Object} props component props
  * @param {string} [props.className] class name added to root element
@@ -15,7 +17,7 @@ const Freelancers = ({ className, isActive = false }) => (
   <IconWrapper
     className={cn(styles.container, className, { [styles.isActive]: isActive })}
   >
-    {jsx}
+    <IconFreelancers />
   </IconWrapper>
 );
 
@@ -25,55 +27,3 @@ Freelancers.propTypes = {
 };
 
 export default Freelancers;
-
-// This JSX will never change so it's alright to create it only once.
-const jsx = (
-  <svg
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    x="0px"
-    y="0px"
-    viewBox="0 0 24 24"
-    enableBackground="new 0 0 24 24"
-    xmlSpace="preserve"
-  >
-    <path
-      fill="#555555"
-      d="M4.5,9c-1.6569,0-3-1.3431-3-3s1.3431-3,3-3s3,1.3431,3,3c0,0.7956-0.3161,1.5587-0.8787,2.1213
-	C6.0587,8.6839,5.2956,9,4.5,9z M4.5,4.5C3.6716,4.5,3,5.1716,3,6s0.6716,1.5,1.5,1.5S6,6.8284,6,6S5.3284,4.5,4.5,4.5z"
-    />
-    <path
-      fill="#555555"
-      d="M3,22.5c-0.378-0.0006-0.6967-0.282-0.744-0.657L1.588,16.5H0.75C0.3358,16.5,0,16.1642,0,15.75
-	V13.5C0.0028,11.0159,2.0159,9.0028,4.5,9c0.4142,0,0.75,0.3358,0.75,0.75S4.9142,10.5,4.5,10.5c-1.6569,0-3,1.3431-3,3V15h0.75
-	c0.378,0.0006,0.6967,0.282,0.744,0.657L3.662,21H6c0.4142,0,0.75,0.3358,0.75,0.75S6.4142,22.5,6,22.5H3z"
-    />
-    <path
-      fill="#555555"
-      d="M19.5,9c-1.6569,0-3-1.3431-3-3s1.3431-3,3-3s3,1.3431,3,3
-	c0,0.7956-0.3161,1.5587-0.8787,2.1213C21.0587,8.6839,20.2956,9,19.5,9z M19.5,4.5C18.6716,4.5,18,5.1716,18,6s0.6716,1.5,1.5,1.5
-	S21,6.8284,21,6S20.3284,4.5,19.5,4.5z"
-    />
-    <path
-      fill="#555555"
-      d="M18,22.5c-0.4142,0-0.75-0.3358-0.75-0.75S17.5858,21,18,21h2.338l0.668-5.343
-	c0.0473-0.375,0.366-0.6564,0.744-0.657h0.75v-1.5c0-1.6569-1.3431-3-3-3c-0.4142,0-0.75-0.3358-0.75-0.75S19.0858,9,19.5,9
-	c2.4841,0.0028,4.4972,2.0159,4.5,4.5v2.25c0,0.4142-0.3358,0.75-0.75,0.75h-0.838l-0.668,5.343
-	C21.6967,22.218,21.378,22.4994,21,22.5H18z"
-    />
-    <path
-      fill="#555555"
-      d="M12,7.5c-2.0711,0-3.75-1.6789-3.75-3.75S9.9289,0,12,0s3.75,1.6789,3.75,3.75
-	C15.7478,5.8202,14.0702,7.4978,12,7.5L12,7.5z M12,1.5c-1.2426,0-2.25,1.0074-2.25,2.25S10.7574,6,12,6s2.25-1.0074,2.25-2.25
-	C14.2489,2.5078,13.2422,1.5011,12,1.5L12,1.5z"
-    />
-    <path
-      fill="#555555"
-      d="M9.75,24C9.3629,24.0034,9.0373,23.7104,9,23.325L8.321,16.5H6.75
-	C6.3358,16.5,6,16.1642,6,15.75V13.5c0-3.3137,2.6863-6,6-6s6,2.6863,6,6v2.25c0,0.4142-0.3358,0.75-0.75,0.75h-1.571L15,23.325
-	c-0.0373,0.3854-0.3629,0.6784-0.75,0.675H9.75z M13.571,22.5l0.683-6.825C14.2912,15.2912,14.6144,14.9987,15,15h1.5v-1.5
-	c0-2.4853-2.0147-4.5-4.5-4.5s-4.5,2.0147-4.5,4.5V15H9c0.3856-0.0013,0.7088,0.2912,0.746,0.675l0.682,6.825H13.571z"
-    />
-  </svg>
-);
diff --git a/src/components/Icons/WorkPeriods/index.jsx b/src/components/Icons/WorkPeriods/index.jsx
diff --git a/webpack.config.js b/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -4,14 +4,17 @@`
`4`	`4`	`svg {`
`5`	`5`	`display: block;`
`6`	`6`	`width: 100%;`
	`7`	`+ height: auto;`
`7`	`8`
	`9`	`+ path,`
`8`	`10`	`polygon {`
`9`	`11`	`fill: #aaa;`
`10`	`12`	`}`
`11`	`13`	`}`
`12`	`14`
`13`	`15`	`&.isActive {`
`14`	`16`	`svg {`
	`17`	`+ path,`
`15`	`18`	`polygon {`
`16`	`19`	`fill: #000;`
`17`	`20`	`}`