Move svg content into js

Author: Marek Rozmus

examples/images/delete.svg

@@ -0,0 +1,43 @@
+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>
+  );
+};
+
+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 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>
+  );
+};

examples/images/icons.js

@@ -34,7 +34,6 @@
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
-    "classnames": "^2.2.6",
     "css-loader": "^3.2.0",
     "eslint": "^6.3.0",
     "eslint-config-prettier": "^6.2.0",
@@ -44,7 +43,6 @@
     "gh-pages": "^2.1.1",
     "html-webpack-plugin": "^3.2.0",
     "prettier": "^1.18.2",
-    "react-svg-loader": "^3.0.3",
     "style-loader": "^1.0.0",
     "stylelint": "^11.0.0",
     "stylelint-config-standard": "^19.0.0",
@@ -55,6 +53,7 @@
   },
   "dependencies": {
     "@sandstreamdev/react-swipeable-list": "^0.2.1",
+    "classnames": "^2.2.6",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   }

examples/images/mail.svg

@@ -7,9 +7,7 @@ import '@sandstreamdev/react-swipeable-list/dist/styles.css';
 
 import ListItem from './ComplexListItem';
 import ComplexItemContent from './ComplexItemContent';
-import MailIcon from '../images/mail.svg';
-import ReplyIcon from '../images/reply.svg';
-import DeleteIcon from '../images/delete.svg';
+import { MailIcon, ReplyIcon, DeleteIcon } from '../images/icons';
 import styles from './app.css';
 
 function App() {