fix: add optimized image

shinokada · Feb 1, 2023 · ccec39b · ccec39b
1 parent 98aa0f3
commit ccec39b
Show file tree

Hide file tree

Showing 10 changed files with 290 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@
 </p>
 
 <p align="center">
-<img src="https://raw.githubusercontent.com/shinokada/svelte-flag-icons/main/static/images/flag-all.png" />
+<img src="/static/images/flag-icons-optimized.png" width="650" />
 </p>
 
 260+ [Flag-icons](https://github.com/lipis/flag-icons) for Svelte. 
@@ -35,7 +35,7 @@ npm i -D svelte-flag-icons
 
 ## ISO 3166 Country Codes
 
-[ISO 3166 Country Codes](https://github.com/shinokada/svelte-flag-icons/blob/main/iso-3166-country-codes.md)
+[ISO 3166 Country Codes](/iso-3166-country-codes.md)
 
 ## Size
 
@@ -61,10 +61,6 @@ Use the `size` prop to change the flag sizes.
 
 ## CSS frameworks support
 
-<p align="center">
-<img src="https://raw.githubusercontent.com/shinokada/svelte-flags/main/static/images/flag2.png" />
-</p>
-
 You can change size and other CSS using the `class` prop.
 
 Tailwind CSS example:
@@ -161,7 +157,8 @@ All the credits goes to [flag-icons](https://github.com/lipis/flag-icons)
 
 - [Svelte-Icon-Sets](https://svelte-svg-icons.vercel.app/)
 
-## Experience lightning-fast browsing and offline access with Our PWA
+## PWA: Fast & Offline
 
 This website can be downloaded and installed on your device for offline access as a Progressive Web App.
+
 To install a PWA, look for the "Add to Home Screen" option in the browser's menu or settings. On most mobile devices, this option can be found by visiting the website, then selecting the "Options" or "Menu" button in the browser, and looking for the "Add to Home Screen" option. On some desktop browsers, right-click on the page and select "Install".
diff --git a/icon-list.md b/icon-list.md
@@ -266,3 +266,7 @@
 - Za.svelte
 - Zm.svelte
 - Zw.svelte
+
+## Back to Home
+
+[Back to Home](/)
diff --git a/iso-3166-country-codes.md b/iso-3166-country-codes.md
@@ -265,3 +265,8 @@
 | ZA            | South Africa                                         |
 | ZM            | Zambia                                               |
 | ZW            | Zimbabwe                                             |
+
+
+## Back to Home
+
+[Back to Home](/)
diff --git a/service-worker.js b/service-worker.js
@@ -8,7 +8,7 @@ const APP_PREFIX = 'svelte_flag_icons_';
 // you need to change this version (version_01, version_02…). 
 // If you don't change the version, the service worker will give your
 // users the old files!
-const VERSION = 'version_01';
+const VERSION = 'version_02';
 
 // The files to make available for offline use. make sure to add 
 // others to this list

diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,3 +1,275 @@
-<h1>Welcome to your library project</h1>
-<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+  import * as Icon from '$lib';
+  const random_hex_color_code = () => {
+    let n = (Math.random() * 0xfffff * 1000000).toString(16);
+    return '#' + n.slice(0, 6);
+  };
+</script>
+
+
+<Icon.Ac  size="40" color={random_hex_color_code()} />
+<Icon.Ad  size="40" color={random_hex_color_code()} />
+<Icon.Ae  size="40" color={random_hex_color_code()} />
+<Icon.Af  size="40" color={random_hex_color_code()} />
+<Icon.Ag  size="40" color={random_hex_color_code()} />
+<Icon.Ai  size="40" color={random_hex_color_code()} />
+<Icon.Al  size="40" color={random_hex_color_code()} />
+<Icon.Am  size="40" color={random_hex_color_code()} />
+<Icon.Ao  size="40" color={random_hex_color_code()} />
+<Icon.Aq  size="40" color={random_hex_color_code()} />
+<Icon.Ar  size="40" color={random_hex_color_code()} />
+<Icon.As  size="40" color={random_hex_color_code()} />
+<Icon.At  size="40" color={random_hex_color_code()} />
+<Icon.Au  size="40" color={random_hex_color_code()} />
+<Icon.Aw  size="40" color={random_hex_color_code()} />
+<Icon.Ax  size="40" color={random_hex_color_code()} />
+<Icon.Az  size="40" color={random_hex_color_code()} />
+<Icon.Ba  size="40" color={random_hex_color_code()} />
+<Icon.Bb  size="40" color={random_hex_color_code()} />
+<Icon.Bd  size="40" color={random_hex_color_code()} />
+<Icon.Be  size="40" color={random_hex_color_code()} />
+<Icon.Bf  size="40" color={random_hex_color_code()} />
+<Icon.Bg  size="40" color={random_hex_color_code()} />
+<Icon.Bh  size="40" color={random_hex_color_code()} />
+<Icon.Bi  size="40" color={random_hex_color_code()} />
+<Icon.Bj  size="40" color={random_hex_color_code()} />
+<Icon.Bl  size="40" color={random_hex_color_code()} />
+<Icon.Bm  size="40" color={random_hex_color_code()} />
+<Icon.Bn  size="40" color={random_hex_color_code()} />
+<Icon.Bo  size="40" color={random_hex_color_code()} />
+<Icon.Bq  size="40" color={random_hex_color_code()} />
+<Icon.Br  size="40" color={random_hex_color_code()} />
+<Icon.Bs  size="40" color={random_hex_color_code()} />
+<Icon.Bt  size="40" color={random_hex_color_code()} />
+<Icon.Bv  size="40" color={random_hex_color_code()} />
+<Icon.Bw  size="40" color={random_hex_color_code()} />
+<Icon.By  size="40" color={random_hex_color_code()} />
+<Icon.Bz  size="40" color={random_hex_color_code()} />
+<Icon.Ca  size="40" color={random_hex_color_code()} />
+<Icon.Cc  size="40" color={random_hex_color_code()} />
+<Icon.Cd  size="40" color={random_hex_color_code()} />
+<Icon.Cefta  size="40" color={random_hex_color_code()} />
+<Icon.Cf  size="40" color={random_hex_color_code()} />
+<Icon.Cg  size="40" color={random_hex_color_code()} />
+<Icon.Ch  size="40" color={random_hex_color_code()} />
+<Icon.Ci  size="40" color={random_hex_color_code()} />
+<Icon.Ck  size="40" color={random_hex_color_code()} />
+<Icon.Cl  size="40" color={random_hex_color_code()} />
+<Icon.Cm  size="40" color={random_hex_color_code()} />
+<Icon.Cn  size="40" color={random_hex_color_code()} />
+<Icon.Co  size="40" color={random_hex_color_code()} />
+<Icon.Cp  size="40" color={random_hex_color_code()} />
+<Icon.Cr  size="40" color={random_hex_color_code()} />
+<Icon.Cu  size="40" color={random_hex_color_code()} />
+<Icon.Cv  size="40" color={random_hex_color_code()} />
+<Icon.Cw  size="40" color={random_hex_color_code()} />
+<Icon.Cx  size="40" color={random_hex_color_code()} />
+<Icon.Cy  size="40" color={random_hex_color_code()} />
+<Icon.Cz  size="40" color={random_hex_color_code()} />
+<Icon.De  size="40" color={random_hex_color_code()} />
+<Icon.Dg  size="40" color={random_hex_color_code()} />
+<Icon.Dj  size="40" color={random_hex_color_code()} />
+<Icon.Dk  size="40" color={random_hex_color_code()} />
+<Icon.Dm  size="40" color={random_hex_color_code()} />
+<Icon.Do  size="40" color={random_hex_color_code()} />
+<Icon.Dz  size="40" color={random_hex_color_code()} />
+<Icon.Ea  size="40" color={random_hex_color_code()} />
+<Icon.Ec  size="40" color={random_hex_color_code()} />
+<Icon.Ee  size="40" color={random_hex_color_code()} />
+<Icon.Eg  size="40" color={random_hex_color_code()} />
+<Icon.Eh  size="40" color={random_hex_color_code()} />
+<Icon.Er  size="40" color={random_hex_color_code()} />
+<Icon.Es  size="40" color={random_hex_color_code()} />
+<Icon.EsCt  size="40" color={random_hex_color_code()} />
+<Icon.EsGa  size="40" color={random_hex_color_code()} />
+<Icon.Et  size="40" color={random_hex_color_code()} />
+<Icon.Eu  size="40" color={random_hex_color_code()} />
+<Icon.Fi  size="40" color={random_hex_color_code()} />
+<Icon.Fj  size="40" color={random_hex_color_code()} />
+<Icon.Fk  size="40" color={random_hex_color_code()} />
+<Icon.Fm  size="40" color={random_hex_color_code()} />
+<Icon.Fo  size="40" color={random_hex_color_code()} />
+<Icon.Fr  size="40" color={random_hex_color_code()} />
+<Icon.Ga  size="40" color={random_hex_color_code()} />
+<Icon.Gb  size="40" color={random_hex_color_code()} />
+<Icon.GbEng  size="40" color={random_hex_color_code()} />
+<Icon.GbNir  size="40" color={random_hex_color_code()} />
+<Icon.GbSct  size="40" color={random_hex_color_code()} />
+<Icon.GbWls  size="40" color={random_hex_color_code()} />
+<Icon.Gd  size="40" color={random_hex_color_code()} />
+<Icon.Ge  size="40" color={random_hex_color_code()} />
+<Icon.Gf  size="40" color={random_hex_color_code()} />
+<Icon.Gg  size="40" color={random_hex_color_code()} />
+<Icon.Gh  size="40" color={random_hex_color_code()} />
+<Icon.Gi  size="40" color={random_hex_color_code()} />
+<Icon.Gl  size="40" color={random_hex_color_code()} />
+<Icon.Gm  size="40" color={random_hex_color_code()} />
+<Icon.Gn  size="40" color={random_hex_color_code()} />
+<Icon.Gp  size="40" color={random_hex_color_code()} />
+<Icon.Gq  size="40" color={random_hex_color_code()} />
+<Icon.Gr  size="40" color={random_hex_color_code()} />
+<Icon.Gs  size="40" color={random_hex_color_code()} />
+<Icon.Gt  size="40" color={random_hex_color_code()} />
+<Icon.Gu  size="40" color={random_hex_color_code()} />
+<Icon.Gw  size="40" color={random_hex_color_code()} />
+<Icon.Gy  size="40" color={random_hex_color_code()} />
+<Icon.Hk  size="40" color={random_hex_color_code()} />
+<Icon.Hm  size="40" color={random_hex_color_code()} />
+<Icon.Hn  size="40" color={random_hex_color_code()} />
+<Icon.Hr  size="40" color={random_hex_color_code()} />
+<Icon.Ht  size="40" color={random_hex_color_code()} />
+<Icon.Hu  size="40" color={random_hex_color_code()} />
+<Icon.Ic  size="40" color={random_hex_color_code()} />
+<Icon.Id  size="40" color={random_hex_color_code()} />
+<Icon.Ie  size="40" color={random_hex_color_code()} />
+<Icon.Il  size="40" color={random_hex_color_code()} />
+<Icon.Im  size="40" color={random_hex_color_code()} />
+<Icon.In  size="40" color={random_hex_color_code()} />
+<Icon.Io  size="40" color={random_hex_color_code()} />
+<Icon.Iq  size="40" color={random_hex_color_code()} />
+<Icon.Ir  size="40" color={random_hex_color_code()} />
+<Icon.Is  size="40" color={random_hex_color_code()} />
+<Icon.It  size="40" color={random_hex_color_code()} />
+<Icon.Je  size="40" color={random_hex_color_code()} />
+<Icon.Jm  size="40" color={random_hex_color_code()} />
+<Icon.Jo  size="40" color={random_hex_color_code()} />
+<Icon.Jp  size="40" color={random_hex_color_code()} />
+<Icon.Ke  size="40" color={random_hex_color_code()} />
+<Icon.Kg  size="40" color={random_hex_color_code()} />
+<Icon.Kh  size="40" color={random_hex_color_code()} />
+<Icon.Ki  size="40" color={random_hex_color_code()} />
+<Icon.Km  size="40" color={random_hex_color_code()} />
+<Icon.Kn  size="40" color={random_hex_color_code()} />
+<Icon.Kp  size="40" color={random_hex_color_code()} />
+<Icon.Kr  size="40" color={random_hex_color_code()} />
+<Icon.Kw  size="40" color={random_hex_color_code()} />
+<Icon.Ky  size="40" color={random_hex_color_code()} />
+<Icon.Kz  size="40" color={random_hex_color_code()} />
+<Icon.La  size="40" color={random_hex_color_code()} />
+<Icon.Lb  size="40" color={random_hex_color_code()} />
+<Icon.Lc  size="40" color={random_hex_color_code()} />
+<Icon.Li  size="40" color={random_hex_color_code()} />
+<Icon.Lk  size="40" color={random_hex_color_code()} />
+<Icon.Lr  size="40" color={random_hex_color_code()} />
+<Icon.Ls  size="40" color={random_hex_color_code()} />
+<Icon.Lt  size="40" color={random_hex_color_code()} />
+<Icon.Lu  size="40" color={random_hex_color_code()} />
+<Icon.Lv  size="40" color={random_hex_color_code()} />
+<Icon.Ly  size="40" color={random_hex_color_code()} />
+<Icon.Ma  size="40" color={random_hex_color_code()} />
+<Icon.Mc  size="40" color={random_hex_color_code()} />
+<Icon.Md  size="40" color={random_hex_color_code()} />
+<Icon.Me  size="40" color={random_hex_color_code()} />
+<Icon.Mf  size="40" color={random_hex_color_code()} />
+<Icon.Mg  size="40" color={random_hex_color_code()} />
+<Icon.Mh  size="40" color={random_hex_color_code()} />
+<Icon.Mk  size="40" color={random_hex_color_code()} />
+<Icon.Ml  size="40" color={random_hex_color_code()} />
+<Icon.Mm  size="40" color={random_hex_color_code()} />
+<Icon.Mn  size="40" color={random_hex_color_code()} />
+<Icon.Mo  size="40" color={random_hex_color_code()} />
+<Icon.Mp  size="40" color={random_hex_color_code()} />
+<Icon.Mq  size="40" color={random_hex_color_code()} />
+<Icon.Mr  size="40" color={random_hex_color_code()} />
+<Icon.Ms  size="40" color={random_hex_color_code()} />
+<Icon.Mt  size="40" color={random_hex_color_code()} />
+<Icon.Mu  size="40" color={random_hex_color_code()} />
+<Icon.Mv  size="40" color={random_hex_color_code()} />
+<Icon.Mw  size="40" color={random_hex_color_code()} />
+<Icon.Mx  size="40" color={random_hex_color_code()} />
+<Icon.My  size="40" color={random_hex_color_code()} />
+<Icon.Mz  size="40" color={random_hex_color_code()} />
+<Icon.Na  size="40" color={random_hex_color_code()} />
+<Icon.Nc  size="40" color={random_hex_color_code()} />
+<Icon.Ne  size="40" color={random_hex_color_code()} />
+<Icon.Nf  size="40" color={random_hex_color_code()} />
+<Icon.Ng  size="40" color={random_hex_color_code()} />
+<Icon.Ni  size="40" color={random_hex_color_code()} />
+<Icon.Nl  size="40" color={random_hex_color_code()} />
+<Icon.No  size="40" color={random_hex_color_code()} />
+<Icon.Np  size="40" color={random_hex_color_code()} />
+<Icon.Nr  size="40" color={random_hex_color_code()} />
+<Icon.Nu  size="40" color={random_hex_color_code()} />
+<Icon.Nz  size="40" color={random_hex_color_code()} />
+<Icon.Om  size="40" color={random_hex_color_code()} />
+<Icon.Pa  size="40" color={random_hex_color_code()} />
+<Icon.Pe  size="40" color={random_hex_color_code()} />
+<Icon.Pf  size="40" color={random_hex_color_code()} />
+<Icon.Pg  size="40" color={random_hex_color_code()} />
+<Icon.Ph  size="40" color={random_hex_color_code()} />
+<Icon.Pk  size="40" color={random_hex_color_code()} />
+<Icon.Pl  size="40" color={random_hex_color_code()} />
+<Icon.Pm  size="40" color={random_hex_color_code()} />
+<Icon.Pn  size="40" color={random_hex_color_code()} />
+<Icon.Pr  size="40" color={random_hex_color_code()} />
+<Icon.Ps  size="40" color={random_hex_color_code()} />
+<Icon.Pt  size="40" color={random_hex_color_code()} />
+<Icon.Pw  size="40" color={random_hex_color_code()} />
+<Icon.Py  size="40" color={random_hex_color_code()} />
+<Icon.Qa  size="40" color={random_hex_color_code()} />
+<Icon.Re  size="40" color={random_hex_color_code()} />
+<Icon.Ro  size="40" color={random_hex_color_code()} />
+<Icon.Rs  size="40" color={random_hex_color_code()} />
+<Icon.Ru  size="40" color={random_hex_color_code()} />
+<Icon.Rw  size="40" color={random_hex_color_code()} />
+<Icon.Sa  size="40" color={random_hex_color_code()} />
+<Icon.Sb  size="40" color={random_hex_color_code()} />
+<Icon.Sc  size="40" color={random_hex_color_code()} />
+<Icon.Sd  size="40" color={random_hex_color_code()} />
+<Icon.Se  size="40" color={random_hex_color_code()} />
+<Icon.Sg  size="40" color={random_hex_color_code()} />
+<Icon.Sh  size="40" color={random_hex_color_code()} />
+<Icon.Si  size="40" color={random_hex_color_code()} />
+<Icon.Sj  size="40" color={random_hex_color_code()} />
+<Icon.Sk  size="40" color={random_hex_color_code()} />
+<Icon.Sl  size="40" color={random_hex_color_code()} />
+<Icon.Sm  size="40" color={random_hex_color_code()} />
+<Icon.Sn  size="40" color={random_hex_color_code()} />
+<Icon.So  size="40" color={random_hex_color_code()} />
+<Icon.Sr  size="40" color={random_hex_color_code()} />
+<Icon.Ss  size="40" color={random_hex_color_code()} />
+<Icon.St  size="40" color={random_hex_color_code()} />
+<Icon.Sv  size="40" color={random_hex_color_code()} />
+<Icon.Sx  size="40" color={random_hex_color_code()} />
+<Icon.Sy  size="40" color={random_hex_color_code()} />
+<Icon.Sz  size="40" color={random_hex_color_code()} />
+<Icon.Ta  size="40" color={random_hex_color_code()} />
+<Icon.Tc  size="40" color={random_hex_color_code()} />
+<Icon.Td  size="40" color={random_hex_color_code()} />
+<Icon.Tf  size="40" color={random_hex_color_code()} />
+<Icon.Tg  size="40" color={random_hex_color_code()} />
+<Icon.Th  size="40" color={random_hex_color_code()} />
+<Icon.Tj  size="40" color={random_hex_color_code()} />
+<Icon.Tk  size="40" color={random_hex_color_code()} />
+<Icon.Tl  size="40" color={random_hex_color_code()} />
+<Icon.Tm  size="40" color={random_hex_color_code()} />
+<Icon.Tn  size="40" color={random_hex_color_code()} />
+<Icon.To  size="40" color={random_hex_color_code()} />
+<Icon.Tr  size="40" color={random_hex_color_code()} />
+<Icon.Tt  size="40" color={random_hex_color_code()} />
+<Icon.Tv  size="40" color={random_hex_color_code()} />
+<Icon.Tw  size="40" color={random_hex_color_code()} />
+<Icon.Tz  size="40" color={random_hex_color_code()} />
+<Icon.Ua  size="40" color={random_hex_color_code()} />
+<Icon.Ug  size="40" color={random_hex_color_code()} />
+<Icon.Um  size="40" color={random_hex_color_code()} />
+<Icon.Un  size="40" color={random_hex_color_code()} />
+<Icon.Us  size="40" color={random_hex_color_code()} />
+<Icon.Uy  size="40" color={random_hex_color_code()} />
+<Icon.Uz  size="40" color={random_hex_color_code()} />
+<Icon.Va  size="40" color={random_hex_color_code()} />
+<Icon.Vc  size="40" color={random_hex_color_code()} />
+<Icon.Ve  size="40" color={random_hex_color_code()} />
+<Icon.Vg  size="40" color={random_hex_color_code()} />
+<Icon.Vi  size="40" color={random_hex_color_code()} />
+<Icon.Vn  size="40" color={random_hex_color_code()} />
+<Icon.Vu  size="40" color={random_hex_color_code()} />
+<Icon.Wf  size="40" color={random_hex_color_code()} />
+<Icon.Ws  size="40" color={random_hex_color_code()} />
+<Icon.Xk  size="40" color={random_hex_color_code()} />
+<Icon.Xx  size="40" color={random_hex_color_code()} />
+<Icon.Ye  size="40" color={random_hex_color_code()} />
+<Icon.Yt  size="40" color={random_hex_color_code()} />
+<Icon.Za  size="40" color={random_hex_color_code()} />
+<Icon.Zm  size="40" color={random_hex_color_code()} />
+<Icon.Zw  size="40" color={random_hex_color_code()} />
diff --git a/static/images/flag-all.png b/static/images/flag-all.png
diff --git a/static/images/flag-all.webp b/static/images/flag-all.webp
diff --git a/static/images/flag-icons-optimized.png b/static/images/flag-icons-optimized.png
diff --git a/static/images/flag-icons.png b/static/images/flag-icons.png