images.json

package.json

@@ -13,7 +13,8 @@
     "react-konva": "^16.13.0-6",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
-    "styled-components": "^5.2.0"
+    "styled-components": "^5.2.0",
+    "use-image": "^1.0.6"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -36,4 +37,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/App.js

@@ -6,6 +6,7 @@ import Calculate from "./components/calculate";
 import Header from "./components/header";
 import Home from "./components/home";
 import Learn from "./components/learn";
+import Ranking from "./components/Ranking";
 
 function App() {
   return (
@@ -16,6 +17,7 @@ function App() {
         <Route path="/calculate" component={Calculate} />
         <Route path="/learn" component={Learn} />
         <Route path="/about" component={About} />
+        <Route path="/ranking" component={Ranking} />
       </Router>
     </>
   );

src/assets/images/images.json

@@ -0,0 +1,42 @@
+[
+  {
+    "name": "coal",
+    "path": "M240.811,210.837l26.642-86.357H29.027l26.642,86.357c1.035,3.354,4.135,5.643,7.645,5.643h2.82,c6.143-9,16.849-15.875,29.014-15.875c12.165,0,22.871,6.875,29.014,15.875h48.894c6.143-9,16.849-15.875,29.014-15.875,c12.165,0,22.871,6.875,29.014,15.875h2.085C236.676,216.48,239.776,214.19,240.811,210.837z,M272.388,108.479l2.357-7.417c0.749-2.426,0.301-5.177-1.208-7.22c-1.508-2.045-3.897-3.363-6.437-3.363h-10.458,c0.589-3,0.906-5.915,0.906-9.108c0-26.785-21.715-48.388-48.5-48.388c-1.882,0-3.735,0.176-5.562,0.385,C202.512,14.761,187.116,0,168.265,0c-7.044,0-13.6,2.089-19.107,5.646c-5.507-3.557-12.063-5.624-19.106-5.624,c-18.851,0-34.247,14.792-35.223,33.399c-1.826-0.209-3.68-0.326-5.562-0.326c-26.785,0-48.5,21.49-48.5,48.275,c0,3.193,0.317,6.109,0.906,9.109H29.378c-2.54,0-4.929,1.431-6.437,3.476c-1.509,2.043-1.957,4.569-1.208,6.995l2.358,7.529,H272.388z,M203.224,253.983c9.671-0.6,17.337-8.613,17.337-18.436c0-10.213-8.28-18.492-18.493-18.492,c-10.213,0-18.493,8.279-18.493,18.492c0,6.049,2.917,11.402,7.406,14.777c-6.862-1.719-14.112-3.014-21.623-3.854,c-6.688-0.748-13.57-1.148-20.567-1.148c-7.13,0-14.14,0.41-20.944,1.182c-7.559,0.857-14.851,2.174-21.744,3.918,c4.564-3.367,7.538-8.768,7.538-14.875c0-10.213-8.279-18.492-18.493-18.492c-10.213,0-18.493,8.279-18.493,18.492,c0,9.902,7.789,17.963,17.569,18.447c-4.174,1.471-8.151,3.107-11.87,4.918c-2.78,1.355-5.378,2.564-7.8,4.064,c-14.748,9.135-22.763,21.503-22.763,33.503h194c0-12-8.098-24.462-22.992-33.608c-2.357-1.447-4.878-2.72-7.57-4.032,C211.47,257.009,207.447,255.47,203.224,253.983z"
+  },
+  {
+    "name": "fuel",
+    "path": "M9.5 3H9V1.5a.5.5 0 0 0-1 0V3a1 1 0 0 0 1 1v4.25a.25.25 0 1 1-.5 0V6.5A1.5 1.5 0 0 0 7 5V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V6a.5.5 0 0 1 .5.5v1.75a1.25 1.25 0 1 0 2.5 0V3.5a.5.5 0 0 0-.5-.5zM6 4.5a.49.49 0 0 1-.48.5h-3A.51.51 0 0 1 2 4.5V3a.5.5 0 0 1 .5-.5h3A.5.5 0 0 1 6 3v1.5z"
+  },
+  {
+    "name": "home",
+    "path": "M946.5 505L534.6 93.4a31.93 31.93 0 0 0-45.2 0L77.5 505c-12 12-18.8 28.3-18.8 45.3c0 35.3 28.7 64 64 64h43.4V908c0 17.7 14.3 32 32 32H448V716h112v224h265.9c17.7 0 32-14.3 32-32V614.3h43.4c17 0 33.3-6.7 45.3-18.8c24.9-25 24.9-65.5-.1-90.5z"
+  },
+  {
+    "name": "mobile-phone",
+    "path": "M3 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V2zm6 11a1 1 0 1 1-2 0a1 1 0 0 1 2 0z"
+  },
+  {
+    "name": "oil",
+    "path": "M58 23.571c0-.493-.391-.969-1.111-1.418V8.312C57.609 7.863 58 7.387 58 6.895C58 4.19 46.361 2 32 2C17.641 2 6 4.19 6 6.895c0 .493.391.968 1.111 1.417v13.842c-.72.449-1.111.924-1.111 1.417s.391.969 1.111 1.417v14.023C6.391 39.46 6 39.936 6 40.429s.391.969 1.111 1.417v13.842c-.72.449-1.111.924-1.111 1.417C6 59.808 17.641 62 32 62c14.361 0 26-2.192 26-4.895c0-.493-.391-.969-1.111-1.418v-13.84c.72-.45 1.111-.925 1.111-1.418s-.391-.969-1.111-1.418V24.989c.72-.449 1.111-.925 1.111-1.418M32 4c12.841 0 20.814 1.692 23.357 2.894C52.813 8.096 44.842 9.789 32 9.789c-12.84 0-20.813-1.693-23.358-2.895C11.187 5.692 19.159 4 32 4m0 55.823c-11.395 0-21.075-2.285-24.588-4.206c6.227.918 14.94 2.394 24.588 2.394c9.648 0 18.361-1.476 24.587-2.394c-3.511 1.921-13.192 4.206-24.587 4.206m0-16.312c-11.395 0-21.075-2.287-24.588-4.207c6.227.918 14.94 2.395 24.588 2.395c9.648 0 18.361-1.477 24.587-2.395c-3.511 1.92-13.192 4.207-24.587 4.207m0-16.859c-11.395 0-21.075-2.286-24.588-4.206c6.227.916 14.94 2.394 24.588 2.394c9.648 0 18.361-1.478 24.587-2.394c-3.511 1.92-13.192 4.206-24.587 4.206"
+  },
+  {
+    "name": "propane-tank",
+    "path": "M16 6V4a2 2 0 0 0-2-2h-4c-1.1 0-2 .9-2 2v2c-2.21 0-4 1.79-4 4v7c0 1.86 1.28 3.41 3 3.86V22h10v-1.14c1.72-.44 3-2 3-3.86v-7c0-2.21-1.79-4-4-4m-6-2h4v2h-4V4z"
+  },
+  {
+    "name": "lightbulb",
+    "path": "M12 3L2 12h3v8h14v-8h3m-9 6h-2v-1h2m.5-2.42V16h-3v-1.42a3 3 0 1 1 3 0z"
+  },
+  {
+    "name": "seedling",
+    "path": "M20.7 3.3S19.3 3 17.2 3c-5.5 0-15.6 2.1-14 17.8c1.1.1 2.2.2 3.2.2C24.3 21 20.7 3.3 20.7 3.3M7 17S7 7 17 7c0 0-6 2-10 10z"
+  },
+  {
+    "name": "trash",
+    "path": "M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z"
+  },
+  {
+    "name": "tree",
+    "path": "M8 0a.5.5 0 0 1 .416.223l3 4.5A.5.5 0 0 1 11 5.5h-.098l2.022 3.235a.5.5 0 0 1-.424.765h-.191l1.638 3.276a.5.5 0 0 1-.447.724h-11a.5.5 0 0 1-.447-.724L3.69 9.5H3.5a.5.5 0 0 1-.424-.765L5.098 5.5H5a.5.5 0 0 1-.416-.777l3-4.5A.5.5 0 0 1 8 0z,M7 13h2v3H7v-3z"
+  }
+]