Update App Icons + Favicon (#1659)

* adding updated app-icon + favicon assets

* adding PWA manifest.json to manage app icons

* updating eleventyConfig to pass through manifest.json

* updating head.njk to include update app-icon references/assets

* removing unused webawesome logo + mark assets

packages/webawesome/docs/.eleventy.js

@@ -350,6 +350,9 @@ export default async function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy(glob);
   }
 
+  // Passthrough copy for manifest.json (PWA manifest file)
+  eleventyConfig.addPassthroughCopy('manifest.json');
+
   // // SSR plugin
   // if (!isDev) {
   //   //

packages/webawesome/docs/_includes/head.njk

@@ -15,8 +15,11 @@
 	document.documentElement.classList.toggle('wa-dark', isDark);
 </script>
 
-<link rel="icon" href="/assets/images/webawesome-logo.svg" />
-<link rel="apple-touch-icon" href="/assets/images/app-icon.png">
+<link rel="manifest" href="/manifest.json" />
+<link rel="icon" href="/assets/images/app-icons/favicon.ico" sizes="any">
+<link rel="icon" href="/assets/images/app-icons/icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/assets/images/app-icons/apple-touch-icon.png">
+
 <link rel="preconnect" href="https://cdn.jsdelivr.net">
 <script type="module" src="/dist/webawesome.loader.js"></script>
 

packages/webawesome/docs/assets/images/app-icons/app-icon.svg

@@ -0,0 +1 @@
+<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m18.608 5.8c0 1.04658-.6184 1.94874-1.5097 2.36103l5.3017 4.63897 5.2196-1.0439c-.2647-.3858-.4196-.8529-.4196-1.3561 0-1.32548 1.0745-2.4 2.4-2.4s2.4 1.07452 2.4 2.4c0 1.3085-1.0471 2.3724-2.3491 2.3995l-5.7878 12.3578c-.5267 1.1245-1.6562 1.8427-2.8979 1.8427h-9.9303c-1.2417 0-2.37129-.7182-2.89794-1.8427l-5.78784-12.3578c-1.30199-.0271-2.34912-1.091-2.34912-2.3995 0-1.32548 1.07452-2.4 2.4-2.4s2.4 1.07452 2.4 2.4c0 .5032-.15488.9703-.41957 1.3561l5.21957 1.0439 5.3072-4.64383c-.8857-.4145-1.4992-1.31368-1.4992-2.35617 0-1.43594 1.1641-2.6 2.6-2.6s2.6 1.16406 2.6 2.6z" fill="#f36944" fill-rule="evenodd"/></svg>

packages/webawesome/docs/assets/images/app-icons/icon.svg

@@ -0,0 +1 @@
+<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m18.608 5.8c0 1.04658-.6184 1.94874-1.5097 2.36103l5.3017 4.63897 5.2196-1.0439c-.2647-.3858-.4196-.8529-.4196-1.3561 0-1.32548 1.0745-2.4 2.4-2.4s2.4 1.07452 2.4 2.4c0 1.3085-1.0471 2.3724-2.3491 2.3995l-5.7878 12.3578c-.5267 1.1245-1.6562 1.8427-2.8979 1.8427h-9.9303c-1.2417 0-2.37129-.7182-2.89794-1.8427l-5.78784-12.3578c-1.30199-.0271-2.34912-1.091-2.34912-2.3995 0-1.32548 1.07452-2.4 2.4-2.4s2.4 1.07452 2.4 2.4c0 .5032-.15488.9703-.41957 1.3561l5.21957 1.0439 5.3072-4.64383c-.8857-.4145-1.4992-1.31368-1.4992-2.35617 0-1.43594 1.1641-2.6 2.6-2.6s2.6 1.16406 2.6 2.6z" fill="#f36944" fill-rule="evenodd"/></svg>

packages/webawesome/docs/assets/images/web-awesome-mark-black.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.63 3.625C11.63 4.27911 11.2435 4.84296 10.6865 5.10064L14 8L17.2622 7.34755C17.0968 7.10642 17 6.81452 17 6.5C17 5.67157 17.6716 5 18.5 5C19.3284 5 20 5.67157 20 6.5C20 7.31157 19.3555 7.9726 18.5504 7.99917L15.0307 15.8207C14.7077 16.5384 13.9939 17 13.2068 17H6.79317C6.00615 17 5.29229 16.5384 4.96933 15.8207L1.44963 7.99917C0.64452 7.9726 0 7.31157 0 6.5C0 5.67157 0.671573 5 1.5 5C2.32843 5 3 5.67157 3 6.5C3 6.81452 2.9032 7.10642 2.73777 7.34755L6 8L9.31702 5.09761C8.76346 4.83855 8.38 4.27656 8.38 3.625C8.38 2.72754 9.10754 2 10.005 2C10.9025 2 11.63 2.72754 11.63 3.625Z" fill="currentColor"/>
-</svg>

packages/webawesome/docs/assets/images/webawesome-logo.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z" fill="var(--wa-brand-orange, #f36944)"/>
-</svg>

packages/webawesome/docs/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "Web Awesome",
+  "short_name": "Web Awesome",
+  "description": "Build better with Web Awesome, the open source library of web components from Font Awesome.",
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#f36944",
+  "background_color": "#ffffff",
+  "icons": [
+    {
+      "src": "/assets/images/app-icons/app-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/images/app-icons/app-icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}