SpareBank1 · dagfrode · Jun 17, 2026 · Jun 17, 2026 · Jun 17, 2026
@@ -0,0 +1,5 @@
+---
+"@sb1/indeks-css": patch
+---
+
+`ix-icon` viser ikke lenger en farget boks før web-componenten laster. Masken har nå en gjennomsiktig fallback (`--ii-icon-url` ikke satt), så ikonet er usynlig til `<ix-icon>` oppgraderes og setter ikon-URL-en.
@@ -9,8 +9,10 @@
     mask-size: cover;
     -webkit-mask-size: cover;
     mask-position: center;
-    mask-image: var(--ii-icon-url);
-    -webkit-mask-image: var(--ii-icon-url);
+    /* Fallback til en gjennomsiktig maske før web-componenten setter --ii-icon-url,
+       ellers vises hele background-color-boksen umaskert (FOUC) til WC-en laster. */
+    mask-image: var(--ii-icon-url, linear-gradient(#0000, #0000));
+    -webkit-mask-image: var(--ii-icon-url, linear-gradient(#0000, #0000));
     -webkit-mask-position: center;
     /* stylelint-enable plugin/no-unsupported-browser-features */
 }

@@ -163,6 +163,25 @@ Ikonet skal kommunisere gjennom form, ikke farge alene. Brukere med fargeblindhe
 </TabItem>
 </Tabs>
 
+## Unngå "blink" før web componenten laster
+
+Ikonet tegnes av CSS via `mask-image: var(--ii-icon-url)`. Det er web componenten som setter `--ii-icon-url` i sin `connectedCallback`. Frem til den kjører er variabelen ikke satt, og CSS faller tilbake til en gjennomsiktig maske — ikonet er da usynlig, ikke en farget boks.
+
+I React har dette ingen praktisk betydning: web componenten er allerede lastet når komponentene rendres. Men i ren HTML uten rammeverk — særlig sider som vises før `indeks-web`-scriptet er ferdig lastet fra CDN — kan ikonet blinke inn et lite øyeblikk etterpå.
+
+Du kan fjerne blinket helt ved å sette `--ii-icon-url` inline selv. Da tegnes ikonet umiddelbart, og web componenten overtar variabelen (og legger til aria) når den laster:
+
+```html live
+<ix-icon
+  name="hjem"
+  style="--ii-icon-url: url('https://cdn.sparebank1.no/icons/home.svg')"
+></ix-icon>
+```
+
+:::note Hacky, men trygt som fallback
+`--ii-icon-url` er en intern variabel (`--ii-`-prefiks). Den er ikke et offisielt API og kan i teorien endres. Bruk dette kun som en bevisst optimalisering for ikke-React-sider der blinket er et problem — for `name`-aliaser må du selv slå opp Material Design-filnavnet (f.eks. `hjem` → `home.svg`), mens `materialdesignname`-verdien er filnavnet direkte.
+:::
+
 ## Tilpasning med CSS
 
 Ikonets farge arves fra omgivende tekst via `color: inherit`. For å endre farge, sett `color` på et overordnet element.

@@ -44,6 +44,15 @@ const config: Config = {
     },
 
     headTags: [
+        {
+            // Koble til CDN tidlig — ikon-SVG-er (/icons/*.svg) og fonter hentes derfra ved runtime.
+            tagName: 'link',
+            attributes: {
+                rel: 'preconnect',
+                href: 'https://cdn.sparebank1.no',
+                crossorigin: 'anonymous',
+            },
+        },
         {
             tagName: 'link',
             attributes: {

@@ -6,6 +6,11 @@
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Indeks Eksempelapp</title>
+  <!-- Koble til CDN tidlig — gjelder både web components-scriptet og ikon-SVG-ene (samme origin). -->
+  <link rel="preconnect" href="https://cdn.sparebank1.no" crossorigin />
+  <!-- Forhåndslast web components-modulen så ix-* oppgraderes så tidlig som mulig (kortere FOUC). -->
+  <link rel="modulepreload" href="https://cdn.sparebank1.no/indeks/web/0.9.0/index.js" />
+  <script type="module" src="https://cdn.sparebank1.no/indeks/web/0.9.0/index.js"></script>
 </head>
 
 <body>

@@ -1,3 +1,6 @@
+<!-- Koble til CDN tidlig — ikon-SVG-er (/icons/*.svg) og fonter hentes derfra ved runtime. -->
+<link rel="preconnect" href="https://cdn.sparebank1.no" crossorigin />
+
 <style>
     .font-control {
         padding: 10px;