Improve icon performance

RivalsDB · Dec 18, 2021 · 8888ad3 · 8888ad3
1 parent 69ca324
commit 8888ad3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git 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
@@ -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