From 8888ad346df2b81b601232255ffb0fc17d20e9ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luiz=20S=C3=B3crate?= <luiz@socrate.com.br>
Date: Sat, 18 Dec 2021 21:49:35 +0100
Subject: [PATCH] Improve icon performance

---
 client/src/UI/Icon.sass          | 15 +++++++++------
 client/src/UI/Layout/Header.sass | 11 +++++++----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/client/src/UI/Icon.sass b/client/src/UI/Icon.sass
index eb9d6495..e52f76f1 100644
--- a/client/src/UI/Icon.sass
+++ b/client/src/UI/Icon.sass
@@ -18,20 +18,23 @@
 $clan_icons: brujah gangrel malkavian nosferatu thinblood toreador tremere ventrue
 @each $icon in $clan_icons
   .ui-icon_#{$icon}
-    -webkit-mask-image: url("../../assets/icons/clan-#{$icon}.svg")
-    mask-image: url("../../assets/icons/clan-#{$icon}.svg")
+    --svg-ui-icon: url("data-url:../../assets/icons/clan-#{$icon}.svg")
+    -webkit-mask-image: var(--svg-ui-icon)
+    mask-image: var(--svg-ui-icon)
 
 $discipline_icons: animalism auspex blood_sorcery celerity dominate fortitude obsfuscate potence presence protean thin_blood_alchemy
 @each $icon in $discipline_icons
   .ui-icon_#{$icon}
-    -webkit-mask-image: url("../../assets/icons/discipline-#{$icon}.svg")
-    mask-image: url("../../assets/icons/discipline-#{$icon}.svg")
+    --svg-ui-icon: url("data-url:../../assets/icons/discipline-#{$icon}.svg")
+    -webkit-mask-image: var(--svg-ui-icon)
+    mask-image: var(--svg-ui-icon)
 
 $other_icons: action agenda alchemy attack blood bloodpotency bloodpotencyrequirement conspiracy crown damage delete edit faction haven influence influence_modifier leader library mental menu ongoing physical ranged reaction ritual save scheme shield social special title unhosted_action
 @each $icon in $other_icons
   .ui-icon_#{$icon}
-    -webkit-mask-image: url("../../assets/icons/icon-#{$icon}.svg")
-    mask-image: url("../../assets/icons/icon-#{$icon}.svg")
+    --svg-ui-icon: url("data-url:../../assets/icons/icon-#{$icon}.svg")
+    -webkit-mask-image: var(--svg-ui-icon)
+    mask-image: var(--svg-ui-icon)
 
 .ui-icon--colored
   &.ui-icon_bloodpotency
diff --git a/client/src/UI/Layout/Header.sass b/client/src/UI/Layout/Header.sass
index 0198e0e9..b1ad1ceb 100644
--- a/client/src/UI/Layout/Header.sass
+++ b/client/src/UI/Layout/Header.sass
@@ -29,16 +29,19 @@
   @media screen and ( min-width: $breakpoint-ipad--vertical)
     width: $largeLogoSize
   &__img
+    --svg-rivalsdb-ico: url("data-url:../../assets/logo/rivalsdb-ico.svg") no-repeat center center / contain
+
     width: 100%
     height: 100%
     display: block
     overflow: hidden
     background-color: var(--color-header-logo)
-    -webkit-mask: url("../../assets/logo/rivalsdb-ico.svg") no-repeat center center / contain
-    mask: url("../../assets/logo/rivalsdb-ico.svg") no-repeat center center / contain
+    -webkit-mask: var(--svg-rivalsdb-ico)
+    mask: var(--svg-rivalsdb-ico)
     @media screen and ( min-width: $breakpoint-ipad--vertical)
-      -webkit-mask-image: url("../../assets/logo/rivalsdb-logo.svg")
-      mask-image: url("../../assets/logo/rivalsdb-logo.svg")
+      --svg-rivalsdb-logo: url("data-url:../../assets/logo/rivalsdb-logo.svg")
+      -webkit-mask-image: var(--svg-rivalsdb-logo)
+      mask-image: var(--svg-rivalsdb-logo)
 
   &__txt
     display: none