Added svgr to load svg

custom.d.ts

@@ -3,4 +3,10 @@ declare module "*.module.css" {
   export default classes;
 }
 
-declare module "*.svg";
+declare module "*.svg" {
+  const ref: React.RefForwardingComponent<
+    SVGSVGElement,
+    React.SVGAttributes<SVGSVGElement>
+  >;
+  export default ref;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "dev": "SNOWPACK_PUBLIC_API_URL=http://localhost:5000 SNOWPACK_PUBLIC_BASE_URL=http://localhost:8080 snowpack dev",
+    "dev": "SNOWPACK_PUBLIC_API_URL=http://localhost:8081 SNOWPACK_PUBLIC_BASE_URL=http://localhost:8080 snowpack dev",
     "build": "snowpack build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -11,12 +11,12 @@
     "@types/react-dom": "^17.0.3",
     "@types/snowpack-env": "^2.3.3",
     "snowpack": "^3.3.5",
+    "snowpack-plugin-svgr": "^0.1.2",
     "typescript": "^4.2.4"
   },
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "serve": "^12.0.0",
     "wouter": "^2.7.4"
   }
 }

public/logo.svg

@@ -2,8 +2,6 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="372"
-   height="512"
    viewBox="0 0 372 512"
    version="1.1"
    id="svg23656"
@@ -13,45 +11,12 @@
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview23658"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="true"
-     inkscape:document-units="px"
-     showgrid="false"
-     units="px"
-     inkscape:zoom="1.4142136"
-     inkscape:cx="90.863221"
-     inkscape:cy="228.74904"
-     inkscape:window-width="1916"
-     inkscape:window-height="1048"
-     inkscape:window-x="2"
-     inkscape:window-y="30"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1"
-     inkscape:snap-object-midpoints="true"
-     inkscape:snap-center="true"
-     showguides="true"
-     inkscape:guide-bbox="true"
-     inkscape:snap-intersection-paths="false"
-     height="372px" />
   <defs
      id="defs23653" />
   <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1">
-    <rect
-       style="fill:#feffff;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9862"
-       width="372"
-       height="512"
-       x="0"
-       y="0" />
     <g
        id="g9760">
       <path

snowpack.config.js

@@ -3,7 +3,7 @@
 
 /** @type {import("snowpack").SnowpackUserConfig } */
 module.exports = {
-  plugins: ["@snowpack/plugin-typescript"],
+  plugins: ["@snowpack/plugin-typescript", "snowpack-plugin-svgr"],
   packageOptions: {
     polyfillNode: true,
   },

src/App/Navbar/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import styles from "./Navbar.module.css";
-import logoIcon from "~/assets/logo.svg";
+import LogoIcon from "~/assets/logo.svg";
 import { useLocation, Link } from "wouter";
 
 export const Navbar = () => {
@@ -15,12 +15,7 @@ export const Navbar = () => {
       <Link href="/">
         {path === "/" ? (
           <a>
-            <img
-              className={styles.logo}
-              src={logoIcon}
-              alt="Publite logotype"
-              title="Publite"
-            />
+            <LogoIcon className={styles.logo} />
           </a>
         ) : (
           <a className={styles.title}>Publite</a>

src/assets/logo.svg

@@ -2,8 +2,6 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="372"
-   height="512"
    viewBox="0 0 372 512"
    version="1.1"
    id="svg23656"

src/assets/plus.svg

@@ -2,8 +2,6 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="120"
-   height="120"
    viewBox="0 0 31.75 31.75"
    version="1.1"
    id="svg5"

src/pages/Bookshelf/AddBook/AddBook.module.css

@@ -22,5 +22,6 @@
 
 .plus {
   height: 30px;
+  width: 30px;
   margin-right: 10px;
 }

src/pages/Bookshelf/AddBook/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useLocation } from "wouter";
 
-import plusIcon from "~/assets/plus.svg";
+import PlusIcon from "~/assets/plus.svg";
 import styles from "./AddBook.module.css";
 
 export const AddBook = () => {
@@ -14,7 +14,7 @@ export const AddBook = () => {
       }}
       className={styles.container}
     >
-      <img src={plusIcon} className={styles.plus} />
+      <PlusIcon className={styles.plus} />
       <h1 className={styles.caption}>Add book</h1>
     </button>
   );

src/pages/UploadForm/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from "react";
 import { useLocation } from "wouter";
 
-import plusIcon from "~/assets/plus.svg";
+import PlusIcon from "~/assets/plus.svg";
 import styles from "./UploadForm.module.css";
 import { submitFile, validateResponse, validState } from "~/utils/api";
 import { BookListContext } from "~/context";
@@ -51,7 +51,7 @@ export const UploadForm = ({ setLoading }: IPageProps) => {
       onDragOver={handleDragOver}
     >
       <label className={styles.label} htmlFor="file">
-        <img className={styles.plus} src={plusIcon} />
+        <PlusIcon className={styles.plus} />
         <span>
           Choose book file or drag and drop it
           <br />