fix: use proper icons for cargo-hold and drone-bay (#47)

src/Icon/Icon.tsx

@@ -6,6 +6,8 @@ const iconMapping = {
   "align-time": "texture/classes/fitting/statsicons/aligntime.png",
   "armor-hp": "texture/classes/fitting/statsicons/armorhp.png",
   "armor-repair-rate": "texture/classes/fitting/statsicons/armorrepairrate.png",
+  "cargo-hold": "texture/windowicons/ships.png",
+  "drone-bay": "texture/windowicons/dronebay.png",
   "em-resistance": "texture/classes/fitting/statsicons/emresistance.png",
   "explosive-resistance": "texture/classes/fitting/statsicons/explosiveresistance.png",
   "fitting-alliance": "texture/classes/fitting/taballiancefits.png",

src/ShipFitExtended/ShipFitExtended.module.css

@@ -40,7 +40,6 @@
 }
 .cargoText {
     display: inline-block;
-    margin-left: 10px;
     margin-top: 5px;
     text-align: right;
 }

src/ShipFitExtended/ShipFitExtended.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 
+import { Icon } from "../Icon";
 import { ShipFit } from "../ShipFit";
 import { ShipAttribute } from "../ShipAttribute";
 import { ShipSnapshotContext } from "../ShipSnapshotProvider";
@@ -9,7 +10,7 @@ import styles from "./ShipFitExtended.module.css";
 const CargoHold = () => {
   return <div>
     <div className={styles.cargoIcon}>
-      C
+      <Icon name="cargo-hold" size={32} />
     </div>
     <div className={styles.cargoText}>
       <div>
@@ -28,7 +29,7 @@ const CargoHold = () => {
 const DroneBay = () => {
   return <div>
     <div className={styles.cargoIcon}>
-      D
+      <Icon name="drone-bay" size={32} />
     </div>
     <div className={styles.cargoText}>
       <div>