From f8e03e2eccc7283d50c256f5cce512c4726486c3 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Sat, 1 Oct 2022 01:06:54 +0100
Subject: [PATCH] add latest

---
 quasar.config.js                              |   2 +-
 src/components/InfoCardBase.vue               |  73 +---
 src/components/ProductionChain.vue            |   2 +-
 src/components/info_card/InfoCardItem.vue     |  18 +
 .../info_card/InfoCardItemWorld.vue           |  23 +
 src/pages/AnnoBase.vue                        |   2 +-
 src/pages/AnnoExpansions.vue                  |   2 +-
 src/pages/data/icons.ts                       | 293 +++++++++++++
 src/pages/data/info-card.ts                   |  26 ++
 src/pages/data/production-chains-base.ts      | 394 ++++++------------
 .../data/production-chains-expansions.ts      |  71 +---
 11 files changed, 510 insertions(+), 396 deletions(-)
 create mode 100644 src/components/info_card/InfoCardItem.vue
 create mode 100644 src/components/info_card/InfoCardItemWorld.vue
 create mode 100644 src/pages/data/icons.ts
 create mode 100644 src/pages/data/info-card.ts

diff --git a/quasar.config.js b/quasar.config.js
index 1f40125..4a80b61 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -28,7 +28,7 @@ module.exports = configure(function (/* ctx */) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ['mermaid'],
+    boot: [],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ['app.scss'],
diff --git a/src/components/InfoCardBase.vue b/src/components/InfoCardBase.vue
index 0a5f620..b7d6785 100644
--- a/src/components/InfoCardBase.vue
+++ b/src/components/InfoCardBase.vue
@@ -1,66 +1,23 @@
 <template>
   <q-list separator class="big-font text-left">
-    <q-item>
-      <q-item-section avatar>
-        <q-img
-          src="~assets/annoIcons/Furs.webp"
-          class="info-icon"
-        ></q-img> </q-item-section
-      ><q-item-section
-        ><span
-          >Furs use Old World
-          <q-img
-            src="~assets/annoIcons/Icon_session_moderate_0.png"
-            class="info-small-icon"
-          ></q-img>
-          production rates.
-        </span></q-item-section
-      >
-    </q-item>
-    <q-item>
-      <q-item-section avatar>
-        <q-img
-          src="~assets/annoIcons/Clay.webp"
-          class="info-icon"
-        ></q-img></q-item-section
-      ><q-item-section
-        ><span
-          >Clay uses Old World
-          <q-img
-            src="~assets/annoIcons/Icon_session_moderate_0.png"
-            class="info-small-icon"
-          ></q-img>
-          production rates.
-        </span></q-item-section
-      >
-    </q-item>
-    <q-item>
-      <q-item-section avatar>
-        <q-img
-          src="~assets/annoIcons/Gold_Ore.webp"
-          class="info-icon"
-        ></q-img></q-item-section
-      ><q-item-section
-        ><span
-          >Gold mines use New World
-          <q-img
-            src="~assets/annoIcons/Icon_session_southamerica_0.png"
-            class="info-small-icon"
-          ></q-img>
-          production rates.</span
-        ></q-item-section
-      >
-    </q-item>
-    <q-item>
-      <q-item-section avatar>
-        <q-img src="~assets/electricityBorder.webp" class="info-icon"></q-img>
-      </q-item-section>
-      <q-item-section>Building has electricity</q-item-section>
-    </q-item>
+    <InfoCardItemWorld
+      v-for="item in worldItemData"
+      :key="item.icon"
+      v-bind="item"
+    ></InfoCardItemWorld>
+    <InfoCardItem
+      v-for="item in itemData"
+      :key="item.icon"
+      v-bind="item"
+    ></InfoCardItem>
   </q-list>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import InfoCardItem from './info_card/InfoCardItem.vue';
+import InfoCardItemWorld from './info_card/InfoCardItemWorld.vue';
+import { itemData, worldItemData } from 'src/pages/data/info-card';
+</script>
 
 <style lang="scss">
 .big-font {
diff --git a/src/components/ProductionChain.vue b/src/components/ProductionChain.vue
index 53d2f10..42ff87d 100644
--- a/src/components/ProductionChain.vue
+++ b/src/components/ProductionChain.vue
@@ -5,7 +5,7 @@
 
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue';
-import { mermaid } from 'boot/mermaid';
+import { mermaid } from 'composables/mermaid';
 
 // DOM Refs
 const diagram = ref<HTMLInputElement | null>(null);
diff --git a/src/components/info_card/InfoCardItem.vue b/src/components/info_card/InfoCardItem.vue
new file mode 100644
index 0000000..9b59825
--- /dev/null
+++ b/src/components/info_card/InfoCardItem.vue
@@ -0,0 +1,18 @@
+<template>
+  <q-item>
+    <q-item-section avatar>
+      <q-img :src="icon" class="info-icon"></q-img>
+    </q-item-section>
+    <q-item-section>
+      <span>{{ text }}</span>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps<{
+  icon: string;
+  text: string;
+}>();
+</script>
diff --git a/src/components/info_card/InfoCardItemWorld.vue b/src/components/info_card/InfoCardItemWorld.vue
new file mode 100644
index 0000000..b699916
--- /dev/null
+++ b/src/components/info_card/InfoCardItemWorld.vue
@@ -0,0 +1,23 @@
+<template>
+  <q-item>
+    <q-item-section avatar>
+      <q-img :src="icon" class="info-icon"></q-img>
+    </q-item-section>
+    <q-item-section>
+      <span>
+        {{ text }}
+        <q-img :src="worldIcon" class="info-small-icon"></q-img>
+        production rates.
+      </span>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps<{
+  icon: string;
+  worldIcon: string;
+  text: string;
+}>();
+</script>
diff --git a/src/pages/AnnoBase.vue b/src/pages/AnnoBase.vue
index 2fba7b2..c54b3ec 100644
--- a/src/pages/AnnoBase.vue
+++ b/src/pages/AnnoBase.vue
@@ -35,7 +35,7 @@
 import { productionChainsBase } from './data/production-chains-base';
 
 // Mermaid
-import { initialiseMermaid } from 'boot/mermaid';
+import { initialiseMermaid } from 'composables/mermaid';
 
 // Components
 import ChainTiers from 'components/ChainTiers.vue';
diff --git a/src/pages/AnnoExpansions.vue b/src/pages/AnnoExpansions.vue
index 53c7c0a..586e50c 100644
--- a/src/pages/AnnoExpansions.vue
+++ b/src/pages/AnnoExpansions.vue
@@ -31,7 +31,7 @@
 import { productionChainsExpansions } from './data/production-chains-expansions';
 
 // Mermaid
-import { initialiseMermaid } from 'boot/mermaid';
+import { initialiseMermaid } from 'composables/mermaid';
 
 // Components
 import ChainTiers from 'components/ChainTiers.vue';
diff --git a/src/pages/data/icons.ts b/src/pages/data/icons.ts
new file mode 100644
index 0000000..83a4d3b
--- /dev/null
+++ b/src/pages/data/icons.ts
@@ -0,0 +1,293 @@
+import alpacaWoolIcon from 'assets/annoIcons/Alpaca_wool.webp';
+import apiaryIcon from 'assets/annoIcons/Icon_beeswax_0.webp';
+import archdukeSchnitzel from 'assets/annoIcons/Archdukes_Schnitzel.webp';
+import arcticIcon from 'assets/annoIcons/Icon_session_passage_0.png';
+import artisnalKitchenIcon from 'assets/annoIcons/Goulash.webp';
+import bearIcon from 'assets/annoIcons/Bear_Hunting_Cabin.webp';
+import beefIcon from 'assets/annoIcons/Beef.webp';
+import bootsIcon from 'assets/annoIcons/Icon_leather_shoes_0.webp';
+import bowlerHatsIcon from 'assets/annoIcons/Bowler_hats.webp';
+import brassIcon from 'assets/annoIcons/Brass.webp';
+import breadIcon from 'assets/annoIcons/Bread.webp';
+import breweryIcon from 'assets/annoIcons/Beer.webp';
+import bricksIcon from 'assets/annoIcons/Bricks.webp';
+import camphorWaxIcon from 'assets/annoIcons/Camphor_Wax.webp';
+import candlesIcon from 'assets/annoIcons/Icon_candles_0.webp';
+import cannedFoodIcon from 'assets/annoIcons/Canned_food.webp';
+import caoutchoucIcon from 'assets/annoIcons/Caoutchouc.webp';
+import caribouIcon from 'assets/annoIcons/Caribou_Hunting_Cabin.webp';
+import ceramicsIcon from 'assets/annoIcons/Icon_ceramics_0.webp';
+import champagneIcon from 'assets/annoIcons/Champagne.webp';
+import charcoalKilnIcon from 'assets/annoIcons/Charcoal_kiln.webp';
+import chocolateIcon from 'assets/annoIcons/Chocolate.webp';
+import cigarIcon from 'assets/annoIcons/Cigars.webp';
+import cinnamonIcon from 'assets/annoIcons/Cinnamon.webp';
+import citrusIcon from 'assets/annoIcons/Citrus.webp';
+import clayIcon from 'assets/annoIcons/Clay.webp';
+import coachMakersIcon from 'assets/annoIcons/Chassis.webp';
+import coalIcon from 'assets/annoIcons/Coal.webp';
+import cocoaIcon from 'assets/annoIcons/Cocoa.webp';
+import coconutOilIcon from 'assets/annoIcons/Coconut_Oil.webp';
+import coffeeBeansIcon from 'assets/annoIcons/Coffee_beans.webp';
+import coffeeIcon from 'assets/annoIcons/Coffee.webp';
+import concreteFactory from 'assets/annoIcons/Reinforced_concrete.webp';
+import copperIcon from 'assets/annoIcons/Copper.webp';
+import cornIcon from 'assets/annoIcons/Corn.webp';
+import cottonIcon from 'assets/annoIcons/Cotton.webp';
+import cottonMillIcon from 'assets/annoIcons/Cotton_fabric.webp';
+import dryHouseIcon from 'assets/annoIcons/Icon_dried_meat_0.webp';
+import dynamiteIcon from 'assets/annoIcons/Dynamite.webp';
+import electricityIcon from 'assets/electricityBorder.webp';
+import embroidererIcon from 'assets/annoIcons/Icon_traditional_clothing_0.webp';
+import enbesaIcon from 'assets/annoIcons/Icon_session_land_of_lions_0.png';
+import feltIcon from 'assets/annoIcons/Felt.webp';
+import filamentIcon from 'assets/annoIcons/Carbon_filament.webp';
+import fishFritesIcon from 'assets/annoIcons/Fish_and_Frites.webp';
+import fishIcon from 'assets/annoIcons/Fish.webp';
+import fishOilIcon from 'assets/annoIcons/Fish_Oil.webp';
+import flourIcon from 'assets/annoIcons/Flour.webp';
+import friedPlantainsIcon from 'assets/annoIcons/Fried_plantains.webp';
+import fuelIcon from 'assets/annoIcons/Fuel.webp';
+import furCoatsIcon from 'assets/annoIcons/Fur_Coats.webp';
+import fursIcon from 'assets/annoIcons/Furs.webp';
+import gasIcon from 'assets/annoIcons/Arctic_Gas.webp';
+import gasPowerPlantIcon from 'assets/annoIcons/Icon_electric_works_gas_0.webp';
+import glassesIcon from 'assets/annoIcons/Glasses.webp';
+import glassIcon from 'assets/annoIcons/Glass.webp';
+import goldIcon from 'assets/annoIcons/Gold.webp';
+import goldOreIcon from 'assets/annoIcons/Gold_Ore.webp';
+import gooseIcon from 'assets/annoIcons/Goose_Farm.webp';
+import grainIcon from 'assets/annoIcons/Grain.webp';
+import gramophoneIcon from 'assets/annoIcons/Gramophone.webp';
+import grapesIcon from 'assets/annoIcons/Grapes.webp';
+import heavyWeaponsIcon from 'assets/annoIcons/Advanced_weapons.webp';
+import hibiscusFarmIcon from 'assets/annoIcons/Icon_hibiscus_farm_0.webp';
+import hibiscusTeaIcon from 'assets/annoIcons/Icon_hibiscus_tea_0.webp';
+import highWheelerIcon from 'assets/annoIcons/High_wheeler.webp';
+import hopFarmIcon from 'assets/annoIcons/Hops.webp';
+import huskyIcon from 'assets/annoIcons/Husky_Farm.webp';
+import huskySledIcon from 'assets/annoIcons/Husky_Sled_Factory.webp';
+import indigoIcon from 'assets/annoIcons/Icon_indigo_0.webp';
+import ironIcon from 'assets/annoIcons/Iron.webp';
+import jewelryIcon from 'assets/annoIcons/Jewelry.webp';
+import lanternsIcon from 'assets/annoIcons/Icon_lanterns_0.webp';
+import lemonadeIcon from 'assets/annoIcons/Lemonade.webp';
+import lightBulbIcon from 'assets/annoIcons/Light_bulb.webp';
+import limestoneIcon from 'assets/annoIcons/Cement.webp';
+import linenIcon from 'assets/annoIcons/Icon_linen_fabric_0.webp';
+import linseedIcon from 'assets/annoIcons/Icon_linen_farm_0.webp';
+import lobsterChemineeIcon from 'assets/annoIcons/Lobster_Cheminee.webp';
+import lobstersIcon from 'assets/annoIcons/Icon_seafood_0.webp';
+import luminerIcon from 'assets/annoIcons/Icon_scriptures_0.webp';
+import malthouseIcon from 'assets/annoIcons/Malt.webp';
+import marquetryIcon from 'assets/annoIcons/Wood_veneers.webp';
+import mudBricksIcon from 'assets/annoIcons/Icon_mud_bricks_0.webp';
+import newWorldIcon from 'assets/annoIcons/Icon_session_southamerica_0.png';
+import oilLampIcon from 'assets/annoIcons/Oil_Lamp_Factory.webp';
+import oilPowerPlantIcon from 'assets/annoIcons/Oil_Power_Plant.webp';
+import oilTankerIcon from 'assets/annoIcons/Oil_tanker.webp';
+import oilWellIcon from 'assets/annoIcons/OilWell.webp';
+import oldWorldIcon from 'assets/annoIcons/Icon_session_moderate_0.png';
+import paperIcon from 'assets/annoIcons/Icon_paper_0.webp';
+import parkasIcon from 'assets/annoIcons/Parka_Factory.webp';
+import pearlsIcon from 'assets/annoIcons/Pearls.webp';
+import pemmicanIcon from 'assets/annoIcons/Pemmican_Cookhouse.webp';
+import pigIcon from 'assets/annoIcons/Pigs.webp';
+import pigsIcon from 'assets/annoIcons/Pigs.webp';
+import pipesIcon from 'assets/annoIcons/Icon_tobacco_pipes_0.webp';
+import plantainPlantationIcon from 'assets/annoIcons/Plantains.webp';
+import pocketWatchesIcon from 'assets/annoIcons/Pocket_watch.webp';
+import ponchosIcon from 'assets/annoIcons/Poncho.webp';
+import potatoIcon from 'assets/annoIcons/Potato.webp';
+import redPeppersIcon from 'assets/annoIcons/Red_peppers.webp';
+import rumIcon from 'assets/annoIcons/Rum.webp';
+import sailmakersIcon from 'assets/annoIcons/Sails.webp';
+import saltIcon from 'assets/annoIcons/Salt.webp';
+import saltpeterIcon from 'assets/annoIcons/Saltpeter.webp';
+import sandIcon from 'assets/annoIcons/Quartz_sand.webp';
+import sangaIcon from 'assets/annoIcons/Icon_watusi_0.webp';
+import sausageIcon from 'assets/annoIcons/Sausages.webp';
+import schnappsIcon from 'assets/annoIcons/Schnapps.webp';
+import sealIcon from 'assets/annoIcons/Seal_Hunting_Docks.webp';
+import sewingMachinesIcon from 'assets/annoIcons/Sewing_machines.webp';
+import shampooIcon from 'assets/annoIcons/Shampoo.webp';
+import siloIcon from 'assets/annoIcons/Silo.webp';
+import sledFrameIcon from 'assets/annoIcons/Sled_Frame_Factory.webp';
+import sleepingBagIcon from 'assets/annoIcons/Sleeping_Bag_Factory.webp';
+import soapIcon from 'assets/annoIcons/Soap.webp';
+import souvenirsIcon from 'assets/annoIcons/Souvenirs.webp';
+import spicesIcon from 'assets/annoIcons/Icon_spices_0.webp';
+import steamCarriagesIcon from 'assets/annoIcons/Steam_carriages.webp';
+import steamMotorsIcon from 'assets/annoIcons/Steam_motors.webp';
+import steelBeamsIcon from 'assets/annoIcons/Steel_beams.webp';
+import steelIcon from 'assets/annoIcons/Steel.webp';
+import stroggofGoulashIcon from 'assets/annoIcons/Stroggof_Goulash.webp';
+import sugarCaneIcon from 'assets/annoIcons/Sugar_cane.webp';
+import sugarIcon from 'assets/annoIcons/Sugar.webp';
+import tailorsIcon from 'assets/annoIcons/Icon_suits_0.webp';
+import tallowIcon from 'assets/annoIcons/Tallow.webp';
+import tapestriesIcon from 'assets/annoIcons/Icon_tapestries_0.webp';
+import teffIcon from 'assets/annoIcons/Icon_teff_grass_0.webp';
+import teffMillIcon from 'assets/annoIcons/Icon_teff_flour_0.webp';
+import telephonesIcon from 'assets/annoIcons/Icon_telephones_0.webp';
+import timberIcon from 'assets/annoIcons/Timber.webp';
+import tobaccoIcon from 'assets/annoIcons/Tobacco.webp';
+import tortillasIcon from 'assets/annoIcons/Tortilla.webp';
+import tractorIcon from 'assets/annoIcons/TractorBarn.webp';
+import venisonEnCrouteIcon from 'assets/annoIcons/Venison_en_Croute.webp';
+import watIcon from 'assets/annoIcons/Icon_wat_stew_0.webp';
+import weaponsIcon from 'assets/annoIcons/Weapons.webp';
+import whalingIcon from 'assets/annoIcons/Whaling_Station.webp';
+import windowMakersIcon from 'assets/annoIcons/Windows.webp';
+import woodIcon from 'assets/annoIcons/Wood.webp';
+import woolIcon from 'assets/annoIcons/Wool.webp';
+import workClothesIcon from 'assets/annoIcons/Work_clothes.webp';
+import zincIcon from 'assets/annoIcons/Zinc.webp';
+
+export {
+  alpacaWoolIcon,
+  apiaryIcon,
+  archdukeSchnitzel,
+  arcticIcon,
+  artisnalKitchenIcon,
+  bearIcon,
+  beefIcon,
+  bootsIcon,
+  bowlerHatsIcon,
+  brassIcon,
+  breadIcon,
+  breweryIcon,
+  bricksIcon,
+  camphorWaxIcon,
+  candlesIcon,
+  cannedFoodIcon,
+  caoutchoucIcon,
+  caribouIcon,
+  ceramicsIcon,
+  champagneIcon,
+  charcoalKilnIcon,
+  chocolateIcon,
+  cigarIcon,
+  cinnamonIcon,
+  citrusIcon,
+  clayIcon,
+  coachMakersIcon,
+  coalIcon,
+  cocoaIcon,
+  coconutOilIcon,
+  coffeeBeansIcon,
+  coffeeIcon,
+  concreteFactory,
+  copperIcon,
+  cornIcon,
+  cottonIcon,
+  cottonMillIcon,
+  dryHouseIcon,
+  dynamiteIcon,
+  electricityIcon,
+  embroidererIcon,
+  enbesaIcon,
+  feltIcon,
+  filamentIcon,
+  fishFritesIcon,
+  fishIcon,
+  fishOilIcon,
+  flourIcon,
+  friedPlantainsIcon,
+  fuelIcon,
+  furCoatsIcon,
+  fursIcon,
+  gasIcon,
+  gasPowerPlantIcon,
+  glassesIcon,
+  glassIcon,
+  goldIcon,
+  goldOreIcon,
+  gooseIcon,
+  grainIcon,
+  gramophoneIcon,
+  grapesIcon,
+  heavyWeaponsIcon,
+  hibiscusFarmIcon,
+  hibiscusTeaIcon,
+  highWheelerIcon,
+  hopFarmIcon,
+  huskyIcon,
+  huskySledIcon,
+  indigoIcon,
+  ironIcon,
+  jewelryIcon,
+  lanternsIcon,
+  lemonadeIcon,
+  lightBulbIcon,
+  limestoneIcon,
+  linenIcon,
+  linseedIcon,
+  lobsterChemineeIcon,
+  lobstersIcon,
+  luminerIcon,
+  malthouseIcon,
+  marquetryIcon,
+  mudBricksIcon,
+  newWorldIcon,
+  oilLampIcon,
+  oilPowerPlantIcon,
+  oilTankerIcon,
+  oilWellIcon,
+  oldWorldIcon,
+  paperIcon,
+  parkasIcon,
+  pearlsIcon,
+  pemmicanIcon,
+  pigIcon,
+  pigsIcon,
+  pipesIcon,
+  plantainPlantationIcon,
+  pocketWatchesIcon,
+  ponchosIcon,
+  potatoIcon,
+  redPeppersIcon,
+  rumIcon,
+  sailmakersIcon,
+  saltIcon,
+  saltpeterIcon,
+  sandIcon,
+  sangaIcon,
+  sausageIcon,
+  schnappsIcon,
+  sealIcon,
+  sewingMachinesIcon,
+  shampooIcon,
+  siloIcon,
+  sledFrameIcon,
+  sleepingBagIcon,
+  soapIcon,
+  souvenirsIcon,
+  spicesIcon,
+  steamCarriagesIcon,
+  steamMotorsIcon,
+  steelBeamsIcon,
+  steelIcon,
+  stroggofGoulashIcon,
+  sugarCaneIcon,
+  sugarIcon,
+  tailorsIcon,
+  tallowIcon,
+  tapestriesIcon,
+  teffIcon,
+  teffMillIcon,
+  telephonesIcon,
+  timberIcon,
+  tobaccoIcon,
+  tortillasIcon,
+  tractorIcon,
+  venisonEnCrouteIcon,
+  watIcon,
+  weaponsIcon,
+  whalingIcon,
+  windowMakersIcon,
+  woodIcon,
+  woolIcon,
+  workClothesIcon,
+  zincIcon
+};
diff --git a/src/pages/data/info-card.ts b/src/pages/data/info-card.ts
new file mode 100644
index 0000000..b5d8ac8
--- /dev/null
+++ b/src/pages/data/info-card.ts
@@ -0,0 +1,26 @@
+import * as icons from 'src/pages/data/icons';
+
+export const worldItemData = [
+  {
+    icon: icons.fursIcon,
+    worldIcon: icons.oldWorldIcon,
+    text: 'Furs use Old World'
+  },
+  {
+    icon: icons.clayIcon,
+    worldIcon: icons.oldWorldIcon,
+    text: 'Clay uses Old World'
+  },
+  {
+    icon: icons.goldOreIcon,
+    worldIcon: icons.newWorldIcon,
+    text: 'Gold mines use New World'
+  }
+];
+
+export const itemData = [
+  {
+    icon: icons.electricityIcon,
+    text: 'Building has electricity'
+  }
+];
diff --git a/src/pages/data/production-chains-base.ts b/src/pages/data/production-chains-base.ts
index ea28afb..ac055c0 100644
--- a/src/pages/data/production-chains-base.ts
+++ b/src/pages/data/production-chains-base.ts
@@ -1,164 +1,6 @@
 import { TieredProductionChain } from './models';
 import endent from 'endent';
-
-// Icons
-// Regions
-import oldWorldIcon from 'assets/annoIcons/Icon_session_moderate_0.png';
-import enbesaIcon from 'assets/annoIcons/Icon_session_land_of_lions_0.png';
-import newWorldIcon from 'assets/annoIcons/Icon_session_southamerica_0.png';
-import arcticIcon from 'assets/annoIcons/Icon_session_passage_0.png';
-
-// Building Materials
-import woodIcon from 'assets/annoIcons/Wood.webp';
-import timberIcon from 'assets/annoIcons/Timber.webp';
-import clayIcon from 'assets/annoIcons/Clay.webp';
-import bricksIcon from 'assets/annoIcons/Bricks.webp';
-import charcoalKilnIcon from 'assets/annoIcons/Charcoal_kiln.webp';
-import coalIcon from 'assets/annoIcons/Coal.webp';
-import ironIcon from 'assets/annoIcons/Iron.webp';
-import steelIcon from 'assets/annoIcons/Steel.webp';
-import steelBeamsIcon from 'assets/annoIcons/Steel_beams.webp';
-import sandIcon from 'assets/annoIcons/Quartz_sand.webp';
-import glassIcon from 'assets/annoIcons/Glass.webp';
-import windowMakersIcon from 'assets/annoIcons/Windows.webp';
-import limestoneIcon from 'assets/annoIcons/Cement.webp';
-import concreteFactory from 'assets/annoIcons/Reinforced_concrete.webp';
-import teffIcon from 'assets/annoIcons/Icon_teff_grass_0.webp';
-import mudBricksIcon from 'assets/annoIcons/Icon_mud_bricks_0.webp';
-
-// Farmers & Workers
-import potatoIcon from 'assets/annoIcons/Potato.webp';
-import schnappsIcon from 'assets/annoIcons/Schnapps.webp';
-import woolIcon from 'assets/annoIcons/Wool.webp';
-import workClothesIcon from 'assets/annoIcons/Work_clothes.webp';
-import pigIcon from 'assets/annoIcons/Pigs.webp';
-import sausageIcon from 'assets/annoIcons/Sausages.webp';
-import grainIcon from 'assets/annoIcons/Grain.webp';
-import flourIcon from 'assets/annoIcons/Flour.webp';
-import breadIcon from 'assets/annoIcons/Bread.webp';
-import pigsIcon from 'assets/annoIcons/Pigs.webp';
-import tallowIcon from 'assets/annoIcons/Tallow.webp';
-import soapIcon from 'assets/annoIcons/Soap.webp';
-import breweryIcon from 'assets/annoIcons/Beer.webp';
-import malthouseIcon from 'assets/annoIcons/Malt.webp';
-import hopFarmIcon from 'assets/annoIcons/Hops.webp';
-import sailmakersIcon from 'assets/annoIcons/Sails.webp';
-
-// Artisans
-import beefIcon from 'assets/annoIcons/Beef.webp';
-import redPeppersIcon from 'assets/annoIcons/Red_peppers.webp';
-import artisnalKitchenIcon from 'assets/annoIcons/Goulash.webp';
-import cannedFoodIcon from 'assets/annoIcons/Canned_food.webp';
-import sewingMachinesIcon from 'assets/annoIcons/Sewing_machines.webp';
-import fursIcon from 'assets/annoIcons/Furs.webp';
-import furCoatsIcon from 'assets/annoIcons/Fur_Coats.webp';
-import sugarCaneIcon from 'assets/annoIcons/Sugar_cane.webp';
-import rumIcon from 'assets/annoIcons/Rum.webp';
-
-// Engineers
-import copperIcon from 'assets/annoIcons/Copper.webp';
-import zincIcon from 'assets/annoIcons/Zinc.webp';
-import brassIcon from 'assets/annoIcons/Brass.webp';
-import glassesIcon from 'assets/annoIcons/Glasses.webp';
-import caoutchoucIcon from 'assets/annoIcons/Caoutchouc.webp';
-import highWheelerIcon from 'assets/annoIcons/High_wheeler.webp';
-import goldOreIcon from 'assets/annoIcons/Gold_Ore.webp';
-import goldIcon from 'assets/annoIcons/Gold.webp';
-import pocketWatchesIcon from 'assets/annoIcons/Pocket_watch.webp';
-import filamentIcon from 'assets/annoIcons/Carbon_filament.webp';
-import lightBulbIcon from 'assets/annoIcons/Light_bulb.webp';
-
-// Investors
-import grapesIcon from 'assets/annoIcons/Grapes.webp';
-import champagneIcon from 'assets/annoIcons/Champagne.webp';
-import pearlsIcon from 'assets/annoIcons/Pearls.webp';
-import jewelryIcon from 'assets/annoIcons/Jewelry.webp';
-import gramophoneIcon from 'assets/annoIcons/Gramophone.webp';
-
-// Jornaleros & Obreros
-import cottonIcon from 'assets/annoIcons/Cotton.webp';
-import cottonMillIcon from 'assets/annoIcons/Cotton_fabric.webp';
-import plantainPlantationIcon from 'assets/annoIcons/Plantains.webp';
-import fishOilIcon from 'assets/annoIcons/Fish_Oil.webp';
-import friedPlantainsIcon from 'assets/annoIcons/Fried_plantains.webp';
-import alpacaWoolIcon from 'assets/annoIcons/Alpaca_wool.webp';
-import ponchosIcon from 'assets/annoIcons/Poncho.webp';
-import cornIcon from 'assets/annoIcons/Corn.webp';
-import tortillasIcon from 'assets/annoIcons/Tortilla.webp';
-import coffeeBeansIcon from 'assets/annoIcons/Coffee_beans.webp';
-import coffeeIcon from 'assets/annoIcons/Coffee.webp';
-import feltIcon from 'assets/annoIcons/Felt.webp';
-import bowlerHatsIcon from 'assets/annoIcons/Bowler_hats.webp';
-import marquetryIcon from 'assets/annoIcons/Wood_veneers.webp';
-import tobaccoIcon from 'assets/annoIcons/Tobacco.webp';
-import cigarIcon from 'assets/annoIcons/Cigars.webp';
-import sugarIcon from 'assets/annoIcons/Sugar.webp';
-import cocoaIcon from 'assets/annoIcons/Cocoa.webp';
-import chocolateIcon from 'assets/annoIcons/Chocolate.webp';
-
-// Explorers
-import whalingIcon from 'assets/annoIcons/Whaling_Station.webp';
-import caribouIcon from 'assets/annoIcons/Caribou_Hunting_Cabin.webp';
-import pemmicanIcon from 'assets/annoIcons/Pemmican_Cookhouse.webp';
-import sealIcon from 'assets/annoIcons/Seal_Hunting_Docks.webp';
-import gooseIcon from 'assets/annoIcons/Goose_Farm.webp';
-import sleepingBagIcon from 'assets/annoIcons/Sleeping_Bag_Factory.webp';
-import oilLampIcon from 'assets/annoIcons/Oil_Lamp_Factory.webp';
-
-// Technicians
-import bearIcon from 'assets/annoIcons/Bear_Hunting_Cabin.webp';
-import parkasIcon from 'assets/annoIcons/Parka_Factory.webp';
-import sledFrameIcon from 'assets/annoIcons/Sled_Frame_Factory.webp';
-import huskyIcon from 'assets/annoIcons/Husky_Farm.webp';
-import huskySledIcon from 'assets/annoIcons/Husky_Sled_Factory.webp';
-
-// Shepherds
-import linseedIcon from 'assets/annoIcons/Icon_linen_farm_0.webp';
-import linenIcon from 'assets/annoIcons/Icon_linen_fabric_0.webp';
-import embroidererIcon from 'assets/annoIcons/Icon_traditional_clothing_0.webp';
-import saltIcon from 'assets/annoIcons/Salt.webp';
-import sangaIcon from 'assets/annoIcons/Icon_watusi_0.webp';
-import dryHouseIcon from 'assets/annoIcons/Icon_dried_meat_0.webp';
-import hibiscusFarmIcon from 'assets/annoIcons/Icon_hibiscus_farm_0.webp';
-import hibiscusTeaIcon from 'assets/annoIcons/Icon_hibiscus_tea_0.webp';
-
-// Elders
-import indigoIcon from 'assets/annoIcons/Icon_indigo_0.webp';
-import ceramicsIcon from 'assets/annoIcons/Icon_ceramics_0.webp';
-import tapestriesIcon from 'assets/annoIcons/Icon_tapestries_0.webp';
-import spicesIcon from 'assets/annoIcons/Icon_spices_0.webp';
-import teffMillIcon from 'assets/annoIcons/Icon_teff_flour_0.webp';
-import lobstersIcon from 'assets/annoIcons/Icon_seafood_0.webp';
-import watIcon from 'assets/annoIcons/Icon_wat_stew_0.webp';
-import pipesIcon from 'assets/annoIcons/Icon_tobacco_pipes_0.webp';
-import paperIcon from 'assets/annoIcons/Icon_paper_0.webp';
-import luminerIcon from 'assets/annoIcons/Icon_scriptures_0.webp';
-import apiaryIcon from 'assets/annoIcons/Icon_beeswax_0.webp';
-import candlesIcon from 'assets/annoIcons/Icon_candles_0.webp';
-import lanternsIcon from 'assets/annoIcons/Icon_lanterns_0.webp';
-
-// Scholars
-import bootsIcon from 'assets/annoIcons/Icon_leather_shoes_0.webp';
-import tailorsIcon from 'assets/annoIcons/Icon_suits_0.webp';
-import telephonesIcon from 'assets/annoIcons/Icon_telephones_0.webp';
-
-// Weapons
-import weaponsIcon from 'assets/annoIcons/Weapons.webp';
-import saltpeterIcon from 'assets/annoIcons/Saltpeter.webp';
-import dynamiteIcon from 'assets/annoIcons/Dynamite.webp';
-import heavyWeaponsIcon from 'assets/annoIcons/Advanced_weapons.webp';
-
-// Machinery
-import steamMotorsIcon from 'assets/annoIcons/Steam_motors.webp';
-import coachMakersIcon from 'assets/annoIcons/Chassis.webp';
-import steamCarriagesIcon from 'assets/annoIcons/Steam_carriages.webp';
-
-// Electricity/Fuel/Silo
-import oilWellIcon from 'assets/annoIcons/OilWell.webp';
-import oilPowerPlantIcon from 'assets/annoIcons/Oil_Power_Plant.webp';
-import oilTankerIcon from 'assets/annoIcons/Oil_tanker.webp';
-import gasIcon from 'assets/annoIcons/Arctic_Gas.webp';
-import gasPowerPlantIcon from 'assets/annoIcons/Icon_electric_works_gas_0.webp';
+import * as icons from './icons';
 
 // Production Chains
 export const productionChainsBase: TieredProductionChain[] = [
@@ -170,8 +12,8 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'coalRatio',
         mermaidDefinition: endent`
         flowchart LR
-        Coal(<img src='${coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Charcoal(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Coal(<img src='${icons.coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Charcoal(<img src='${icons.charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
         Coal --> Charcoal
         `
       },
@@ -179,8 +21,8 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'goldRatio',
         mermaidDefinition: endent`
         flowchart LR
-        ArcticGold(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
-        NewWorldGold(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${newWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)
+        ArcticGold(<span class='icon-flex-row'><img src='${icons.goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${icons.arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
+        NewWorldGold(<span class='icon-flex-row'><img src='${icons.goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${icons.newWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)
         ArcticGold --> NewWorldGold
         `
       },
@@ -188,8 +30,8 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'furRatio',
         mermaidDefinition: endent`
         flowchart LR
-        ArcticFur(<span class='icon-flex-row'><img src='${fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
-        OldWorldFur(<span class='icon-flex-row'><img src='${fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)
+        ArcticFur(<span class='icon-flex-row'><img src='${icons.fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${icons.arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
+        OldWorldFur(<span class='icon-flex-row'><img src='${icons.fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${icons.oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)
         ArcticFur --> OldWorldFur
         `
       },
@@ -197,8 +39,8 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'clayRatio',
         mermaidDefinition: endent`
         flowchart LR
-        EnbesaClay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${enbesaIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
-        OldWorldClay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>2</span></span></span>)
+        EnbesaClay(<span class='icon-flex-row'><img src='${icons.clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${icons.enbesaIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
+        OldWorldClay(<span class='icon-flex-row'><img src='${icons.clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${icons.oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>2</span></span></span>)
         EnbesaClay --> OldWorldClay
         `
       }
@@ -212,8 +54,8 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'oilPowerPlant',
         mermaidDefinition: endent`
         flowchart LR
-        OilWell(<img src='${oilWellIcon}' class='icon-size' /><span class='ratio-count'>3</span>)
-        OilPowerPlant(<img src='${oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        OilWell(<img src='${icons.oilWellIcon}' class='icon-size' /><span class='ratio-count'>3</span>)
+        OilPowerPlant(<img src='${icons.oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
         OilWell --> OilPowerPlant
         `
       },
@@ -221,8 +63,8 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'oilTanker',
         mermaidDefinition: endent`
         flowchart LR
-        OilTanker(<img src='${oilTankerIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        OilPowerPlant(<img src='${oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>2-3</span>)
+        OilTanker(<img src='${icons.oilTankerIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        OilPowerPlant(<img src='${icons.oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>2-3</span>)
         OilTanker --> OilPowerPlant
         `
       },
@@ -230,8 +72,8 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'gasPowerPlant',
         mermaidDefinition: endent`
         flowchart LR
-        Gas(<img src='${gasIcon}' class='icon-size' /><span class='ratio-count'>6</span>)
-        GasPlant(<img src='${gasPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Gas(<img src='${icons.gasIcon}' class='icon-size' /><span class='ratio-count'>6</span>)
+        GasPlant(<img src='${icons.gasPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
         Gas --> GasPlant
         `
       }
@@ -245,8 +87,8 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'timber',
         mermaidDefinition: endent`
         flowchart LR
-        Wood(<img src='${woodIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Timber(<img src='${timberIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Wood(<img src='${icons.woodIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Timber(<img src='${icons.timberIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
         Wood --> Timber
         `
       },
@@ -254,8 +96,8 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'bricks',
         mermaidDefinition: endent`
         flowchart LR
-        Clay(<img src='${clayIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Bricks(<img src='${bricksIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Clay(<img src='${icons.clayIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Bricks(<img src='${icons.bricksIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
         Clay --> Bricks
         `
       },
@@ -263,10 +105,10 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'steelBeams',
         mermaidDefinition: endent`
         flowchart LR
-        CharcoalKiln(<span class='icon-flex-row'><img src='${charcoalKilnIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>)
-        Iron(<span class='icon-flex-row'><img src='${ironIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>)
-        Steel(<span class='icon-flex-row'><img src='${steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>)
-        SteelBeams(<img src='${steelBeamsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        CharcoalKiln(<span class='icon-flex-row'><img src='${icons.charcoalKilnIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>)
+        Iron(<span class='icon-flex-row'><img src='${icons.ironIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>)
+        Steel(<span class='icon-flex-row'><img src='${icons.steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>)
+        SteelBeams(<img src='${icons.steelBeamsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
         CharcoalKiln & Iron --> Steel --> SteelBeams
         `
       },
@@ -274,10 +116,10 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'windows',
         mermaidDefinition: endent`
         flowchart LR
-        Sand(<span class='icon-flex-row'><img src='${sandIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
-        GlassMakers(<span class='icon-flex-row'><img src='${glassIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
-        WindowMakers(<img src='${windowMakersIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Wood(<span class='icon-flex-row'><img src='${woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>)
+        Sand(<span class='icon-flex-row'><img src='${icons.sandIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
+        GlassMakers(<span class='icon-flex-row'><img src='${icons.glassIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
+        WindowMakers(<img src='${icons.windowMakersIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Wood(<span class='icon-flex-row'><img src='${icons.woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>)
         Sand --> GlassMakers --> WindowMakers
         Wood --> WindowMakers
         `
@@ -286,11 +128,11 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'concrete',
         mermaidDefinition: endent`
         flowchart LR
-        Iron(<span class='icon-flex-row'><img src='${ironIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>)
-        Coal(<span class='icon-flex-row'><img src='${coalIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>)
-        Steel(<span class='icon-flex-row'><img src='${steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
-        Concrete(<img src='${concreteFactory}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Limestone(<span class='icon-flex-row'><img src='${limestoneIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
+        Iron(<span class='icon-flex-row'><img src='${icons.ironIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>)
+        Coal(<span class='icon-flex-row'><img src='${icons.coalIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>)
+        Steel(<span class='icon-flex-row'><img src='${icons.steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
+        Concrete(<img src='${icons.concreteFactory}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Limestone(<span class='icon-flex-row'><img src='${icons.limestoneIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
         Iron & Coal --> Steel  --> Concrete
         Limestone --> Concrete
         `
@@ -298,9 +140,9 @@ export const productionChainsBase: TieredProductionChain[] = [
       {
         productionChain: 'mudBricks',
         mermaidDefinition: endent`
-        flowchart LR; Clay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>)
-        Teff(<img src='${teffIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        MudBricks(<img src='${mudBricksIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        flowchart LR; Clay(<span class='icon-flex-row'><img src='${icons.clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>)
+        Teff(<img src='${icons.teffIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        MudBricks(<img src='${icons.mudBricksIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
         Clay & Teff --> MudBricks
         `
       }
@@ -314,13 +156,13 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'steamMotors',
         mermaidDefinition: endent`
         flowchart LR
-        Coal(<img src='${coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Iron(<img src='${ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Steel(<img src='${steelIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
-        SteamMotors(<img src='${steamMotorsIcon}' class='icon-size' /><span class='ratio-count'>3</span>)
-        Copper(<img src='${copperIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
-        Zinc(<img src='${zincIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
-        Brass(<img src='${brassIcon}' class='icon-size' /><span class='ratio-count'>4</span>)
+        Coal(<img src='${icons.coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Iron(<img src='${icons.ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Steel(<img src='${icons.steelIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        SteamMotors(<img src='${icons.steamMotorsIcon}' class='icon-size' /><span class='ratio-count'>3</span>)
+        Copper(<img src='${icons.copperIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Zinc(<img src='${icons.zincIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Brass(<img src='${icons.brassIcon}' class='icon-size' /><span class='ratio-count'>4</span>)
         style SteamMotors stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7
         Coal & Iron --> Steel --> SteamMotors
         Copper & Zinc --> Brass --> SteamMotors
@@ -330,11 +172,11 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'steamCarriages',
         mermaidDefinition: endent`
         flowchart LR
-        SteamMotors(<img src='${steamMotorsIcon}' class='icon-size' /><span class='ratio-count'>3</span>)
-        SteamCarriages(<img src='${steamCarriagesIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
-        Wood(<img src='${woodIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Caoutchouc(<img src='${caoutchoucIcon}' class='icon-size' /><span class='ratio-count'>4</span>)
-        Coaches(<img src='${coachMakersIcon}' class='icon-size' /><span class='ratio-count'>8</span>)
+        SteamMotors(<img src='${icons.steamMotorsIcon}' class='icon-size' /><span class='ratio-count'>3</span>)
+        SteamCarriages(<img src='${icons.steamCarriagesIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Wood(<img src='${icons.woodIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Caoutchouc(<img src='${icons.caoutchoucIcon}' class='icon-size' /><span class='ratio-count'>4</span>)
+        Coaches(<img src='${icons.coachMakersIcon}' class='icon-size' /><span class='ratio-count'>8</span>)
         SteamCarriages
         style SteamMotors stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7
         style SteamCarriages stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7
@@ -352,8 +194,8 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'workClothes',
         mermaidDefinition: endent`
         flowchart LR
-        Wool(<img src='${woolIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        WorkClothes(<img src='${workClothesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Wool(<img src='${icons.woolIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        WorkClothes(<img src='${icons.workClothesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
         Wool --> WorkClothes
         `
       },
@@ -361,8 +203,8 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'schnapps',
         mermaidDefinition: endent`
         flowchart LR
-        Potato(<img src='${potatoIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Schnapps(<img src='${schnappsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Potato(<img src='${icons.potatoIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Schnapps(<img src='${icons.schnappsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
         Potato --> Schnapps
         `
       },
@@ -370,8 +212,8 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'sausages',
         mermaidDefinition: endent`
         flowchart LR
-        Pig(<img src='${pigIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Sausages(<img src='${sausageIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Pig(<img src='${icons.pigIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Sausages(<img src='${icons.sausageIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
         Pig --> Sausages
         `
       },
@@ -379,9 +221,9 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'bread',
         mermaidDefinition: endent`
         flowchart LR
-        Grain(<img src='${grainIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
-        Flour(<img src='${flourIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Bread(<img src='${breadIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Grain(<img src='${icons.grainIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Flour(<img src='${icons.flourIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Bread(<img src='${icons.breadIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
         Grain --> Flour --> Bread
         `
       },
@@ -389,9 +231,9 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'soap',
         mermaidDefinition: endent`
         flowchart LR
-        Pigs(<img src='${pigsIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
-        Tallow(<img src='${tallowIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
-        Soap(<img src='${soapIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Pigs(<img src='${icons.pigsIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Tallow(<img src='${icons.tallowIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Soap(<img src='${icons.soapIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
         Pigs --> Tallow --> Soap
         `
       },
@@ -399,10 +241,10 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'beer',
         mermaidDefinition: endent`
         flowchart LR
-        Grain(<img src='${grainIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
-        Malthouse(<img src='${malthouseIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Brewery(<img src='${breweryIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
-        HopFarm(<img src='${hopFarmIcon}' class='icon-size' /><span class='ratio-count'>3</span>)
+        Grain(<img src='${icons.grainIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Malthouse(<img src='${icons.malthouseIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Brewery(<img src='${icons.breweryIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        HopFarm(<img src='${icons.hopFarmIcon}' class='icon-size' /><span class='ratio-count'>3</span>)
         Grain --> Malthouse --> Brewery
         HopFarm --> Brewery
         `
@@ -417,11 +259,11 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'cannedFood',
         mermaidDefinition: endent`
         flowchart LR
-        Beef(<span class='icon-flex-row'><img src='${beefIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>)
-        RedPepper(<span class='icon-flex-row'><img src='${redPeppersIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>)
-        ArtisnalKitchen(<span class='icon-flex-row'><img src='${artisnalKitchenIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>)
-        Cannery(<img src='${cannedFoodIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Iron(<span class='icon-flex-row'><img src='${ironIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>16%</span><span class='ratio-count'>1</span></span></span>)
+        Beef(<span class='icon-flex-row'><img src='${icons.beefIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>)
+        RedPepper(<span class='icon-flex-row'><img src='${icons.redPeppersIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>)
+        ArtisnalKitchen(<span class='icon-flex-row'><img src='${icons.artisnalKitchenIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>)
+        Cannery(<img src='${icons.cannedFoodIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Iron(<span class='icon-flex-row'><img src='${icons.ironIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>16%</span><span class='ratio-count'>1</span></span></span>)
         Beef & RedPepper --> ArtisnalKitchen --> Cannery
         Iron --> Cannery
         `
@@ -430,12 +272,12 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'sewingMachines',
         mermaidDefinition: endent`
         flowchart LR
-        Charcoal(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Steel(<img src='${steelIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        SewingMachines(<img src='${sewingMachinesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Iron(<span class='icon-flex-row'><img src='${ironIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
+        Charcoal(<img src='${icons.charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Steel(<img src='${icons.steelIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        SewingMachines(<img src='${icons.sewingMachinesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Iron(<span class='icon-flex-row'><img src='${icons.ironIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
         Steel
-        Wood(<span class='icon-flex-row'><img src='${woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
+        Wood(<span class='icon-flex-row'><img src='${icons.woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
         Charcoal &  Iron --> Steel --> SewingMachines
         Wood --> SewingMachines
         `
@@ -444,9 +286,9 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'rum',
         mermaidDefinition: endent`
         flowchart LR
-        SugarCane(<img src='${sugarCaneIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Wood(<span class='icon-flex-row'><img src='${woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
-        Rum(<img src='${rumIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        SugarCane(<img src='${icons.sugarCaneIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Wood(<span class='icon-flex-row'><img src='${icons.woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
+        Rum(<img src='${icons.rumIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
         SugarCane & Wood --> Rum
         `
       },
@@ -454,10 +296,10 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'furs',
         mermaidDefinition: endent`
         flowchart LR
-        Cotton(<img src='${cottonIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
-        CottonMill(<img src='${cottonMillIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        FurCoats(<img src='${furCoatsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Furs(<img src='${fursIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Cotton(<img src='${icons.cottonIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        CottonMill(<img src='${icons.cottonMillIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        FurCoats(<img src='${icons.furCoatsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Furs(<img src='${icons.fursIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
         Cotton --> CottonMill --> FurCoats
         Furs --> FurCoats
         `
@@ -470,19 +312,19 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'highWheeler',
-        mermaidDefinition: `flowchart LR; Coal(<img src='${coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<img src='${ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Steel(<img src='${steelIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> HighWheeler(<img src='${highWheelerIcon}' class='icon-size' /><span class='ratio-count'>1</span>); style HighWheeler stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;; Caoutchouc(<img src='${caoutchoucIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> HighWheeler`
+        mermaidDefinition: `flowchart LR; Coal(<img src='${icons.coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<img src='${icons.ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Steel(<img src='${icons.steelIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> HighWheeler(<img src='${icons.highWheelerIcon}' class='icon-size' /><span class='ratio-count'>1</span>); style HighWheeler stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;; Caoutchouc(<img src='${icons.caoutchoucIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> HighWheeler`
       },
       {
         productionChain: 'glasses',
-        mermaidDefinition: `flowchart LR; Sand(<span class='icon-flex-row'><img src='${sandIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Glass(<span class='icon-flex-row'><img src='${glassIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Glasses(<img src='${glassesIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Copper(<span class='icon-flex-row'><img src='${copperIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) & Zinc(<span class='icon-flex-row'><img src='${zincIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Brass(<span class='icon-flex-row'><img src='${brassIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>) --> Glasses`
+        mermaidDefinition: `flowchart LR; Sand(<span class='icon-flex-row'><img src='${icons.sandIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Glass(<span class='icon-flex-row'><img src='${icons.glassIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Glasses(<img src='${icons.glassesIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Copper(<span class='icon-flex-row'><img src='${icons.copperIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) & Zinc(<span class='icon-flex-row'><img src='${icons.zincIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Brass(<span class='icon-flex-row'><img src='${icons.brassIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>) --> Glasses`
       },
       {
         productionChain: 'pocketWatches',
-        mermaidDefinition: `flowchart LR; GoldOre(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>83%</span><span class='ratio-count'>4</span></span></span>) & Coal(<span class='icon-flex-row'><img src='${coalIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Gold(<span class='icon-flex-row'><img src='${goldIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>) --> PocketWatches(<img src='${pocketWatchesIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Sand(<span class='icon-flex-row'><img src='${sandIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>) --> Glass(<span class='icon-flex-row'><img src='${glassIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>) --> PocketWatches; style PocketWatches stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;`
+        mermaidDefinition: `flowchart LR; GoldOre(<span class='icon-flex-row'><img src='${icons.goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>83%</span><span class='ratio-count'>4</span></span></span>) & Coal(<span class='icon-flex-row'><img src='${icons.coalIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Gold(<span class='icon-flex-row'><img src='${icons.goldIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>) --> PocketWatches(<img src='${icons.pocketWatchesIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Sand(<span class='icon-flex-row'><img src='${icons.sandIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>) --> Glass(<span class='icon-flex-row'><img src='${icons.glassIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>) --> PocketWatches; style PocketWatches stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;`
       },
       {
         productionChain: 'lightBulb',
-        mermaidDefinition: `flowchart LR; Charcoal(<span class='icon-flex-row'><img src='${charcoalKilnIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Filament(<img src='${filamentIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> LightBulb(<img src='${lightBulbIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Sand(<span class='icon-flex-row'><img src='${sandIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Glass(<span class='icon-flex-row'><img src='${glassIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> LightBulb`
+        mermaidDefinition: `flowchart LR; Charcoal(<span class='icon-flex-row'><img src='${icons.charcoalKilnIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Filament(<img src='${icons.filamentIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> LightBulb(<img src='${icons.lightBulbIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Sand(<span class='icon-flex-row'><img src='${icons.sandIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Glass(<span class='icon-flex-row'><img src='${icons.glassIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> LightBulb`
       }
     ]
   },
@@ -492,15 +334,15 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'champagne',
-        mermaidDefinition: `flowchart LR; Sand(<img src='${sandIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> GlassMakers(<img src='${glassIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Champagne(<img src='${champagneIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Grapes(<img src='${grapesIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> Champagne`
+        mermaidDefinition: `flowchart LR; Sand(<img src='${icons.sandIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> GlassMakers(<img src='${icons.glassIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Champagne(<img src='${icons.champagneIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Grapes(<img src='${icons.grapesIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> Champagne`
       },
       {
         productionChain: 'jewelry',
-        mermaidDefinition: `flowchart LR; Charcoal(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & GoldOre(<img src='${goldOreIcon}' class='icon-size' /><span class='ratio-count'>5</span>) --> Gold(<img src='${goldIcon}' class='icon-size' /><span class='ratio-count'>2</span>) -->Jewelry(<img src='${jewelryIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Pearls(<img src='${pearlsIcon}' class='icon-size' /><span class='ratio-count'>3</span>) --> Jewelry`
+        mermaidDefinition: `flowchart LR; Charcoal(<img src='${icons.charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & GoldOre(<img src='${icons.goldOreIcon}' class='icon-size' /><span class='ratio-count'>5</span>) --> Gold(<img src='${icons.goldIcon}' class='icon-size' /><span class='ratio-count'>2</span>) -->Jewelry(<img src='${icons.jewelryIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Pearls(<img src='${icons.pearlsIcon}' class='icon-size' /><span class='ratio-count'>3</span>) --> Jewelry`
       },
       {
         productionChain: 'gramophone',
-        mermaidDefinition: `flowchart LR; Wood(<span class='icon-flex-row'><img src='${woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>) --> Marquetry(<img src='${marquetryIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Gramophone(<img src='${gramophoneIcon}' class='icon-size' /><span class='ratio-count'>1</span>); style Gramophone stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;; Copper(<span class='icon-flex-row'><img src='${copperIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Zinc(<span class='icon-flex-row'><img src='${zincIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Brass(<img src='${brassIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Gramophone`
+        mermaidDefinition: `flowchart LR; Wood(<span class='icon-flex-row'><img src='${icons.woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>) --> Marquetry(<img src='${icons.marquetryIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Gramophone(<img src='${icons.gramophoneIcon}' class='icon-size' /><span class='ratio-count'>1</span>); style Gramophone stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;; Copper(<span class='icon-flex-row'><img src='${icons.copperIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Zinc(<span class='icon-flex-row'><img src='${icons.zincIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Brass(<img src='${icons.brassIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Gramophone`
       }
     ]
   },
@@ -510,15 +352,15 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'pemmican',
-        mermaidDefinition: `flowchart LR; Whaling(<img src='${whalingIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Caribou(<img src='${caribouIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Pemmican(<img src='${pemmicanIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; Whaling(<img src='${icons.whalingIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Caribou(<img src='${icons.caribouIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Pemmican(<img src='${icons.pemmicanIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'sleepingBag',
-        mermaidDefinition: `flowchart LR; Seal(<span class='icon-flex-row'><img src='${sealIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Goose(<img src='${gooseIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> SleepingBag(<img src='${sleepingBagIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; Seal(<span class='icon-flex-row'><img src='${icons.sealIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Goose(<img src='${icons.gooseIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> SleepingBag(<img src='${icons.sleepingBagIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'oilLamp',
-        mermaidDefinition: `flowchart LR; Copper(<span class='icon-flex-row'><img src='${copperIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Zinc(<span class='icon-flex-row'><img src='${zincIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Brass(<img src='${brassIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> OilLamp(<img src='${oilLampIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Whaling(<img src='${whalingIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> OilLamp`
+        mermaidDefinition: `flowchart LR; Copper(<span class='icon-flex-row'><img src='${icons.copperIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Zinc(<span class='icon-flex-row'><img src='${icons.zincIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Brass(<img src='${icons.brassIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> OilLamp(<img src='${icons.oilLampIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Whaling(<img src='${icons.whalingIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> OilLamp`
       }
     ]
   },
@@ -528,11 +370,11 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'parkas',
-        mermaidDefinition: `flowchart LR; Bears(<img src='${bearIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Seal(<span class='icon-flex-row'><img src='${sealIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Parkas(<img src='${parkasIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; Bears(<img src='${icons.bearIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Seal(<span class='icon-flex-row'><img src='${icons.sealIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Parkas(<img src='${icons.parkasIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'huskySled',
-        mermaidDefinition: `flowchart LR; Wood(<span class='icon-flex-row'><img src='${woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>) & Seal(<span class='icon-flex-row'><img src='${sealIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> SledFrame(<img src='${sledFrameIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> HuskySled(<img src='${huskySledIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Husky(<img src='${huskyIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> HuskySled`
+        mermaidDefinition: `flowchart LR; Wood(<span class='icon-flex-row'><img src='${icons.woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>) & Seal(<span class='icon-flex-row'><img src='${icons.sealIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> SledFrame(<img src='${icons.sledFrameIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> HuskySled(<img src='${icons.huskySledIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Husky(<img src='${icons.huskyIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> HuskySled`
       }
     ]
   },
@@ -542,15 +384,15 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'finery',
-        mermaidDefinition: `flowchart LR; Linseed(<img src='${linseedIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Linen(<span class='icon-flex-row'><img src='${linenIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Embroidery(<img src='${embroidererIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; Linseed(<img src='${icons.linseedIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Linen(<span class='icon-flex-row'><img src='${icons.linenIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Embroidery(<img src='${icons.embroidererIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'driedMeat',
-        mermaidDefinition: `flowchart LR; Salt(<img src='${saltIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Sanga(<img src='${sangaIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> DryHouse(<img src='${dryHouseIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; Salt(<img src='${icons.saltIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Sanga(<img src='${icons.sangaIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> DryHouse(<img src='${icons.dryHouseIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'hibiscusTea',
-        mermaidDefinition: `flowchart LR; HibiscusFarm(<span class='icon-flex-row'><img src='${hibiscusFarmIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>) --> HibiscusTea(<img src='${hibiscusTeaIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; HibiscusFarm(<span class='icon-flex-row'><img src='${icons.hibiscusFarmIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>) --> HibiscusTea(<img src='${icons.hibiscusTeaIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       }
     ]
   },
@@ -560,27 +402,27 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'ceramics',
-        mermaidDefinition: `flowchart LR; Clay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Indigo(<img src='${indigoIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Ceramics(<img src='${ceramicsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; Clay(<span class='icon-flex-row'><img src='${icons.clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Indigo(<img src='${icons.indigoIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Ceramics(<img src='${icons.ceramicsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'tapestries',
-        mermaidDefinition: `flowchart LR; Linseed(<img src='${linseedIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Linen(<img src='${linenIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Tapestry(<img src='${tapestriesIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Indigo(<img src='${indigoIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Tapestry`
+        mermaidDefinition: `flowchart LR; Linseed(<img src='${icons.linseedIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Linen(<img src='${icons.linenIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Tapestry(<img src='${icons.tapestriesIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Indigo(<img src='${icons.indigoIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Tapestry`
       },
       {
         productionChain: 'wat',
-        mermaidDefinition: `flowchart LR; Teff(<img src='${teffIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Spices(<img src='${spicesIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> TeffMill(<span class='icon-flex-row'><img src='${teffMillIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Wat(<img src='${watIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Lobster(<img src='${lobstersIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Wat`
+        mermaidDefinition: `flowchart LR; Teff(<img src='${icons.teffIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Spices(<img src='${icons.spicesIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> TeffMill(<span class='icon-flex-row'><img src='${icons.teffMillIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Wat(<img src='${icons.watIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Lobster(<img src='${icons.lobstersIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Wat`
       },
       {
         productionChain: 'pipes',
-        mermaidDefinition: `flowchart LR; Clay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>16%</span><span class='ratio-count'>1</span></span></span>) & Tobacco(<span class='icon-flex-row'><img src='${tobaccoIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>) --> Pipes(<img src='${pipesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; Clay(<span class='icon-flex-row'><img src='${icons.clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>16%</span><span class='ratio-count'>1</span></span></span>) & Tobacco(<span class='icon-flex-row'><img src='${icons.tobaccoIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>) --> Pipes(<img src='${icons.pipesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'luminer',
-        mermaidDefinition: `flowchart LR; Wood(<span class='icon-flex-row'><img src='${woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>) --> Paper(<span class='icon-flex-row'><img src='${paperIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>) --> Luminer(<img src='${luminerIcon}' class='icon-size' /><span class='ratio-count'>1</span>); IndigoIcon(<img src='${indigoIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Luminer`
+        mermaidDefinition: `flowchart LR; Wood(<span class='icon-flex-row'><img src='${icons.woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>) --> Paper(<span class='icon-flex-row'><img src='${icons.paperIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>) --> Luminer(<img src='${icons.luminerIcon}' class='icon-size' /><span class='ratio-count'>1</span>); IndigoIcon(<img src='${icons.indigoIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Luminer`
       },
       {
         productionChain: 'lanterns',
-        mermaidDefinition: `flowchart LR; Sand(<span class='icon-flex-row'><img src='${sandIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Glass(<span class='icon-flex-row'><img src='${glassIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Lanterns(<img src='${lanternsIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Cotton(<img src='${cottonIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Apiary(<span class='icon-flex-row'><img src='${apiaryIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Candles(<span class='icon-flex-row'><img src='${candlesIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Lanterns`
+        mermaidDefinition: `flowchart LR; Sand(<span class='icon-flex-row'><img src='${icons.sandIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Glass(<span class='icon-flex-row'><img src='${icons.glassIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Lanterns(<img src='${icons.lanternsIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Cotton(<img src='${icons.cottonIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Apiary(<span class='icon-flex-row'><img src='${icons.apiaryIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Candles(<span class='icon-flex-row'><img src='${icons.candlesIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Lanterns`
       }
     ]
   },
@@ -590,15 +432,15 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'boots',
-        mermaidDefinition: `flowchart LR; Sanga(<img src='${sangaIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Boots(<img src='${bootsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; Sanga(<img src='${icons.sangaIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Boots(<img src='${icons.bootsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'tailors',
-        mermaidDefinition: `flowchart LR; Cotton(<img src='${cottonIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> CottonMill(<span class='icon-flex-row'><img src='${cottonMillIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Tailors(<img src='${tailorsIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Linseed(<img src='${linseedIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Linen(<span class='icon-flex-row'><img src='${linenIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Tailors`
+        mermaidDefinition: `flowchart LR; Cotton(<img src='${icons.cottonIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> CottonMill(<span class='icon-flex-row'><img src='${icons.cottonMillIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Tailors(<img src='${icons.tailorsIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Linseed(<img src='${icons.linseedIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Linen(<span class='icon-flex-row'><img src='${icons.linenIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Tailors`
       },
       {
         productionChain: 'telephones',
-        mermaidDefinition: `flowchart LR; Coal(<span class='icon-flex-row'><img src='${coalIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Filament(<span class='icon-flex-row'><img src='${filamentIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>) --> Telephones(<img src='${telephonesIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Wood(<span class='icon-flex-row'><img src='${woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Marquetry(<span class='icon-flex-row'><img src='${marquetryIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>) --> Telephones; style Telephones stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;`
+        mermaidDefinition: `flowchart LR; Coal(<span class='icon-flex-row'><img src='${icons.coalIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Filament(<span class='icon-flex-row'><img src='${icons.filamentIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>) --> Telephones(<img src='${icons.telephonesIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Wood(<span class='icon-flex-row'><img src='${icons.woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Marquetry(<span class='icon-flex-row'><img src='${icons.marquetryIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>) --> Telephones; style Telephones stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;`
       }
     ]
   },
@@ -608,11 +450,11 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'oldWorldSails',
-        mermaidDefinition: `flowchart LR; Wool(<img src='${woolIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Sailmakers(<img src='${sailmakersIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; Wool(<img src='${icons.woolIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Sailmakers(<img src='${icons.sailmakersIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'newWorldSails',
-        mermaidDefinition: `flowchart LR; Cotton(<img src='${cottonIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> CottonMill(<img src='${cottonMillIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Sailmakers(<img src='${sailmakersIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; Cotton(<img src='${icons.cottonIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> CottonMill(<img src='${icons.cottonMillIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Sailmakers(<img src='${icons.sailmakersIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       }
     ]
   },
@@ -622,11 +464,11 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'weapons',
-        mermaidDefinition: `flowchart LR; charcoalKiln(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<span class='icon-flex-row'><img src='${ironIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Steel(<span class='icon-flex-row'><img src='${steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Weapons(<img src='${weaponsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; charcoalKiln(<img src='${icons.charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<span class='icon-flex-row'><img src='${icons.ironIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Steel(<span class='icon-flex-row'><img src='${icons.steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Weapons(<img src='${icons.weaponsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'heavyWeapons',
-        mermaidDefinition: `flowchart LR; Saltpeter(<img src='${saltpeterIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Dynamite(<img src='${dynamiteIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> HeavyWeapons(<img src='${heavyWeaponsIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Pig(<img src='${pigsIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Tallow(<img src='${tallowIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Dynamite; Charcoal(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<span class='icon-flex-row'><img src='${ironIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Steel(<span class='icon-flex-row'><img src='${steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> HeavyWeapons; style HeavyWeapons stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7`
+        mermaidDefinition: `flowchart LR; Saltpeter(<img src='${icons.saltpeterIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Dynamite(<img src='${icons.dynamiteIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> HeavyWeapons(<img src='${icons.heavyWeaponsIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Pig(<img src='${icons.pigsIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Tallow(<img src='${icons.tallowIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Dynamite; Charcoal(<img src='${icons.charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<span class='icon-flex-row'><img src='${icons.ironIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Steel(<span class='icon-flex-row'><img src='${icons.steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> HeavyWeapons; style HeavyWeapons stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7`
       }
     ]
   },
@@ -636,15 +478,15 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'advancedCoffee',
-        mermaidDefinition: `flowchart LR; Grain(<img src='${grainIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> MaltHouse(<img src='${malthouseIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Coffee(<img src='${coffeeIcon}' class='icon-size' /><span class='ratio-count'>1</span>); style Coffee stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;;`
+        mermaidDefinition: `flowchart LR; Grain(<img src='${icons.grainIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> MaltHouse(<img src='${icons.malthouseIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Coffee(<img src='${icons.coffeeIcon}' class='icon-size' /><span class='ratio-count'>1</span>); style Coffee stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;;`
       },
       {
         productionChain: 'advancedRum',
-        mermaidDefinition: `flowchart LR; Coal(<img src='${coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Potato(<img src='${potatoIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Rum(<img src='${rumIcon}' class='icon-size' /><span class='ratio-count'>2</span>); style Rum stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;;`
+        mermaidDefinition: `flowchart LR; Coal(<img src='${icons.coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Potato(<img src='${icons.potatoIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Rum(<img src='${icons.rumIcon}' class='icon-size' /><span class='ratio-count'>2</span>); style Rum stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;;`
       },
       {
         productionChain: 'advancedCotton',
-        mermaidDefinition: `flowchart LR; Sheep(<img src='${woolIcon}' class='icon-size' /><span class='ratio-count'>2</span>) & Wood(<img src='${woodIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Cotton(<img src='${cottonMillIcon}' class='icon-size' /><span class='ratio-count'>2</span>); style Cotton stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;;`
+        mermaidDefinition: `flowchart LR; Sheep(<img src='${icons.woolIcon}' class='icon-size' /><span class='ratio-count'>2</span>) & Wood(<img src='${icons.woodIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Cotton(<img src='${icons.cottonMillIcon}' class='icon-size' /><span class='ratio-count'>2</span>); style Cotton stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;;`
       }
     ]
   },
@@ -656,31 +498,31 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'plantains',
-        mermaidDefinition: `flowchart LR; PlantainPlantation(<img src='${plantainPlantationIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & FishOil(<img src='${fishOilIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> FriedPlantains(<img src='${friedPlantainsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; PlantainPlantation(<img src='${icons.plantainPlantationIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & FishOil(<img src='${icons.fishOilIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> FriedPlantains(<img src='${icons.friedPlantainsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'ponchos',
-        mermaidDefinition: `flowchart LR; AlpacaWool(<img src='${alpacaWoolIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Ponchos(<img src='${ponchosIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; AlpacaWool(<img src='${icons.alpacaWoolIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Ponchos(<img src='${icons.ponchosIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'tortillas',
-        mermaidDefinition: `flowchart LR; Beef(<img src='${beefIcon}' class='icon-size' /><span class='ratio-count'>2</span>) & Corn(<img src='${cornIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Tortillas(<img src='${tortillasIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; Beef(<img src='${icons.beefIcon}' class='icon-size' /><span class='ratio-count'>2</span>) & Corn(<img src='${icons.cornIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Tortillas(<img src='${icons.tortillasIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'coffee',
-        mermaidDefinition: `flowchart LR; CoffeeBeans(<img src='${coffeeBeansIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Coffee(<img src='${coffeeIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; CoffeeBeans(<img src='${icons.coffeeBeansIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Coffee(<img src='${icons.coffeeIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'bowlerHats',
-        mermaidDefinition: `flowchart LR; Cotton(<img src='${cottonIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> CottonMill(<img src='${cottonMillIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> BowlerHats(<img src='${bowlerHatsIcon}' class='icon-size' /><span class='ratio-count'>1</span>); AlpacaWool(<img src='${alpacaWoolIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Felt(<img src='${feltIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> BowlerHats`
+        mermaidDefinition: `flowchart LR; Cotton(<img src='${icons.cottonIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> CottonMill(<img src='${icons.cottonMillIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> BowlerHats(<img src='${icons.bowlerHatsIcon}' class='icon-size' /><span class='ratio-count'>1</span>); AlpacaWool(<img src='${icons.alpacaWoolIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Felt(<img src='${icons.feltIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> BowlerHats`
       },
       {
         productionChain: 'cigars',
-        mermaidDefinition: `flowchart LR; Wood(<span class='icon-flex-row'><img src='${woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Marquetry(<img src='${marquetryIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Cigars(<img src='${cigarIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Tobacco(<img src='${tobaccoIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> Cigars`
+        mermaidDefinition: `flowchart LR; Wood(<span class='icon-flex-row'><img src='${icons.woodIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Marquetry(<img src='${icons.marquetryIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Cigars(<img src='${icons.cigarIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Tobacco(<img src='${icons.tobaccoIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> Cigars`
       },
       {
         productionChain: 'chocolate',
-        mermaidDefinition: `flowchart LR; SugarCane(<img src='${sugarCaneIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Sugar(<img src='${sugarIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Chocolate(<img src='${chocolateIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Cocoa(<img src='${cocoaIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Chocolate`
+        mermaidDefinition: `flowchart LR; SugarCane(<img src='${icons.sugarCaneIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Sugar(<img src='${icons.sugarIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Chocolate(<img src='${icons.chocolateIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Cocoa(<img src='${icons.cocoaIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Chocolate`
       }
     ]
   }
diff --git a/src/pages/data/production-chains-expansions.ts b/src/pages/data/production-chains-expansions.ts
index 5b2dcb7..0162a02 100644
--- a/src/pages/data/production-chains-expansions.ts
+++ b/src/pages/data/production-chains-expansions.ts
@@ -1,50 +1,5 @@
 import { TieredProductionChain } from './models';
-
-// Farmers & Workers
-import grainIcon from 'assets/annoIcons/Grain.webp';
-import teffIcon from 'assets/annoIcons/Icon_teff_grass_0.webp';
-import pigsIcon from 'assets/annoIcons/Pigs.webp';
-
-// Jornaleros & Obreros
-import cornIcon from 'assets/annoIcons/Corn.webp';
-
-// Electricity/Fuel/Silo
-import oilWellIcon from 'assets/annoIcons/OilWell.webp';
-import fuelIcon from 'assets/annoIcons/Fuel.webp';
-import tractorIcon from 'assets/annoIcons/TractorBarn.webp';
-import siloIcon from 'assets/annoIcons/Silo.webp';
-
-// Tourists
-import tallowIcon from 'assets/annoIcons/Tallow.webp';
-import soapIcon from 'assets/annoIcons/Soap.webp';
-import coconutOilIcon from 'assets/annoIcons/Coconut_Oil.webp';
-import cinnamonIcon from 'assets/annoIcons/Cinnamon.webp';
-import shampooIcon from 'assets/annoIcons/Shampoo.webp';
-import citrusIcon from 'assets/annoIcons/Citrus.webp';
-import lemonadeIcon from 'assets/annoIcons/Lemonade.webp';
-import sugarCaneIcon from 'assets/annoIcons/Sugar_cane.webp';
-import sugarIcon from 'assets/annoIcons/Sugar.webp';
-import saltpeterIcon from 'assets/annoIcons/Saltpeter.webp';
-import camphorWaxIcon from 'assets/annoIcons/Camphor_Wax.webp';
-import souvenirsIcon from 'assets/annoIcons/Souvenirs.webp';
-import sandIcon from 'assets/annoIcons/Quartz_sand.webp';
-import glassIcon from 'assets/annoIcons/Glass.webp';
-import cottonIcon from 'assets/annoIcons/Cotton.webp';
-
-// Restaurant
-import potatoIcon from 'assets/annoIcons/Potato.webp';
-import archdukeSchnitzel from 'assets/annoIcons/Archdukes_Schnitzel.webp';
-import beefIcon from 'assets/annoIcons/Beef.webp';
-import redPeppersIcon from 'assets/annoIcons/Red_peppers.webp';
-import stroggofGoulashIcon from 'assets/annoIcons/Stroggof_Goulash.webp';
-import fishIcon from 'assets/annoIcons/Fish.webp';
-import fishFritesIcon from 'assets/annoIcons/Fish_and_Frites.webp';
-import caribouIcon from 'assets/annoIcons/Caribou_Hunting_Cabin.webp';
-import flourIcon from 'assets/annoIcons/Flour.webp';
-import venisonEnCrouteIcon from 'assets/annoIcons/Venison_en_Croute.webp';
-import lobstersIcon from 'assets/annoIcons/Icon_seafood_0.webp';
-import tobaccoIcon from 'assets/annoIcons/Tobacco.webp';
-import lobsterChemineeIcon from 'assets/annoIcons/Lobster_Cheminee.webp';
+import * as icons from './icons';
 
 export const productionChainsExpansions: TieredProductionChain[] = [
   {
@@ -53,11 +8,11 @@ export const productionChainsExpansions: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'tractorGrain',
-        mermaidDefinition: `flowchart LR; TractorGrain(<span class='icon-flex-row'><img src='${grainIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${tractorIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>) --> Grain(<img src='${grainIcon}' class='icon-size' /><span class='ratio-count'>4</span>)`
+        mermaidDefinition: `flowchart LR; TractorGrain(<span class='icon-flex-row'><img src='${icons.grainIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${icons.tractorIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>) --> Grain(<img src='${icons.grainIcon}' class='icon-size' /><span class='ratio-count'>4</span>)`
       },
       {
         productionChain: 'siloPig',
-        mermaidDefinition: `flowchart LR; SiloPig(<span class='icon-flex-row'><img src='${pigsIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${siloIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>) --> Pig(<img src='${pigsIcon}' class='icon-size' /><span class='ratio-count'>2.66</span>)`
+        mermaidDefinition: `flowchart LR; SiloPig(<span class='icon-flex-row'><img src='${icons.pigsIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${icons.siloIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>) --> Pig(<img src='${icons.pigsIcon}' class='icon-size' /><span class='ratio-count'>2.66</span>)`
       }
     ]
   },
@@ -67,11 +22,11 @@ export const productionChainsExpansions: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'tractor',
-        mermaidDefinition: `flowchart LR; OilWell(<img src='${oilWellIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Fuel(<img src='${fuelIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Tractor(<img src='${tractorIcon}' class='icon-size' /><span class='ratio-count'>20</span>)`
+        mermaidDefinition: `flowchart LR; OilWell(<img src='${icons.oilWellIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Fuel(<img src='${icons.fuelIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Tractor(<img src='${icons.tractorIcon}' class='icon-size' /><span class='ratio-count'>20</span>)`
       },
       {
         productionChain: 'silos',
-        mermaidDefinition: `flowchart TB; Grain(<img src='${grainIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Corn(<img src='${cornIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Teff(<img src='${teffIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Silo(<img src='${siloIcon}' class='icon-size' /><span class='ratio-count'>5</span>); Grain --> Silo; Corn --> Silo; Teff --> Silo`
+        mermaidDefinition: `flowchart TB; Grain(<img src='${icons.grainIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Corn(<img src='${icons.cornIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Teff(<img src='${icons.teffIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Silo(<img src='${icons.siloIcon}' class='icon-size' /><span class='ratio-count'>5</span>); Grain --> Silo; Corn --> Silo; Teff --> Silo`
       }
     ]
   },
@@ -81,15 +36,15 @@ export const productionChainsExpansions: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'shampoo',
-        mermaidDefinition: `flowchart LR; CoconutOil(<img src='${coconutOilIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Cinnamon(<img src='${cinnamonIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Shampoo(<img src='${shampooIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Pigs(<img src='${pigsIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Tallow(<img src='${tallowIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Soap(<img src='${soapIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Shampoo`
+        mermaidDefinition: `flowchart LR; CoconutOil(<img src='${icons.coconutOilIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Cinnamon(<img src='${icons.cinnamonIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Shampoo(<img src='${icons.shampooIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Pigs(<img src='${icons.pigsIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Tallow(<img src='${icons.tallowIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Soap(<img src='${icons.soapIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Shampoo`
       },
       {
         productionChain: 'lemonade',
-        mermaidDefinition: `flowchart LR; SugarCane(<img src='${sugarCaneIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Sugar(<img src='${sugarIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Lemonade(<img src='${lemonadeIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Citrus(<img src='${citrusIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Saltpeter(<img src='${saltpeterIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> Lemonade`
+        mermaidDefinition: `flowchart LR; SugarCane(<img src='${icons.sugarCaneIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Sugar(<img src='${icons.sugarIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Lemonade(<img src='${icons.lemonadeIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Citrus(<img src='${icons.citrusIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Saltpeter(<img src='${icons.saltpeterIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> Lemonade`
       },
       {
         productionChain: 'souvenirs',
-        mermaidDefinition: `flowchart LR; CamphorWax(<img src='${camphorWaxIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Souvenirs(<img src='${souvenirsIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Sand(<img src='${sandIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Glass(<img src='${glassIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Souvenirs; Cotton(<img src='${cottonIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Souvenirs`
+        mermaidDefinition: `flowchart LR; CamphorWax(<img src='${icons.camphorWaxIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Souvenirs(<img src='${icons.souvenirsIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Sand(<img src='${icons.sandIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Glass(<img src='${icons.glassIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Souvenirs; Cotton(<img src='${icons.cottonIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Souvenirs`
       }
     ]
   },
@@ -99,23 +54,23 @@ export const productionChainsExpansions: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'archdukeSchnitzel',
-        mermaidDefinition: `flowchart LR; Pigs0(<img src='${pigsIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Schnitzel(<img src='${archdukeSchnitzel}' class='icon-size' /><span class='ratio-count'>1</span>); Potato(<span class='icon-flex-row'><img src='${potatoIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Schnitzel; Pigs1(<img src='${pigsIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Tallow(<img src='${tallowIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Schnitzel`
+        mermaidDefinition: `flowchart LR; Pigs0(<img src='${icons.pigsIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Schnitzel(<img src='${icons.archdukeSchnitzel}' class='icon-size' /><span class='ratio-count'>1</span>); Potato(<span class='icon-flex-row'><img src='${icons.potatoIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Schnitzel; Pigs1(<img src='${icons.pigsIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Tallow(<img src='${icons.tallowIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Schnitzel`
       },
       {
         productionChain: 'stroggofGoulash',
-        mermaidDefinition: `flowchart LR; Beef(<img src='${beefIcon}' class='icon-size' /><span class='ratio-count'>2</span>) & RedPeppers(<img src='${redPeppersIcon}' class='icon-size' /><span class='ratio-count'>2</span>) & Corn(<img src='${cornIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> StroggofGoulash(<img src='${stroggofGoulashIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; Beef(<img src='${icons.beefIcon}' class='icon-size' /><span class='ratio-count'>2</span>) & RedPeppers(<img src='${icons.redPeppersIcon}' class='icon-size' /><span class='ratio-count'>2</span>) & Corn(<img src='${icons.cornIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> StroggofGoulash(<img src='${icons.stroggofGoulashIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'fishFrites',
-        mermaidDefinition: `flowchart LR; Fish(<span class='icon-flex-row'><img src='${fishIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Potato(<span class='icon-flex-row'><img src='${potatoIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Citrus(<span class='icon-flex-row'><img src='${citrusIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> FishFrites(<img src='${fishFritesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; Fish(<span class='icon-flex-row'><img src='${icons.fishIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Potato(<span class='icon-flex-row'><img src='${icons.potatoIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Citrus(<span class='icon-flex-row'><img src='${icons.citrusIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> FishFrites(<img src='${icons.fishFritesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       },
       {
         productionChain: 'venisonEnCroute',
-        mermaidDefinition: `flowchart LR; Grain(<img src='${grainIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Flour(<span class='icon-flex-row'><img src='${flourIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> VenisonEnCroute(<img src='${venisonEnCrouteIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Potato(<span class='icon-flex-row'><img src='${potatoIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Caribou(<img src='${caribouIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> VenisonEnCroute`
+        mermaidDefinition: `flowchart LR; Grain(<img src='${icons.grainIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Flour(<span class='icon-flex-row'><img src='${icons.flourIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> VenisonEnCroute(<img src='${icons.venisonEnCrouteIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Potato(<span class='icon-flex-row'><img src='${icons.potatoIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Caribou(<img src='${icons.caribouIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> VenisonEnCroute`
       },
       {
         productionChain: 'lobsterCheminee',
-        mermaidDefinition: `flowchart LR; Lobster(<img src='${lobstersIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Ctirus(<span class='icon-flex-row'><img src='${citrusIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Tobacco(<img src='${tobaccoIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> LobsterCheminee(<img src='${lobsterChemineeIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `flowchart LR; Lobster(<img src='${icons.lobstersIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Ctirus(<span class='icon-flex-row'><img src='${icons.citrusIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) & Tobacco(<img src='${icons.tobaccoIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> LobsterCheminee(<img src='${icons.lobsterChemineeIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       }
     ]
   }