FEATURE: Use SVG icons for some oneboxes (#12654)

app/assets/javascripts/discourse/app/initializers/post-decorations.js

@@ -1,5 +1,6 @@
 import highlightSyntax from "discourse/lib/highlight-syntax";
 import lightbox from "discourse/lib/lightbox";
+import { iconHTML } from "discourse-common/lib/icon-library";
 import { setTextDirections } from "discourse/lib/text-direction";
 import { setupLazyLoading } from "discourse/lib/lazy-load-images";
 import { withPluginApi } from "discourse/lib/plugin-api";
@@ -75,6 +76,33 @@ export default {
           { id: "safari-video-poster", afterAdopt: true, onlyStream: true }
         );
       }
+
+      const oneboxTypes = {
+        amazon: "discourse-amazon",
+        githubblob: "fab-github",
+        githubcommit: "fab-github",
+        githubpullrequest: "fab-github",
+        githubissue: "fab-github",
+        githubfile: "fab-github",
+        githubgist: "fab-github",
+        twitterstatus: "fab-twitter",
+        wikipedia: "fab-wikipedia-w",
+      };
+
+      api.decorateCookedElement(
+        (elem) => {
+          elem.querySelectorAll(".onebox").forEach((onebox) => {
+            Object.entries(oneboxTypes).forEach(([key, value]) => {
+              if (onebox.classList.contains(key)) {
+                onebox
+                  .querySelector(".source")
+                  .insertAdjacentHTML("afterbegin", iconHTML(value));
+              }
+            });
+          });
+        },
+        { id: "onebox-source-icons" }
+      );
     });
   },
 };

app/assets/stylesheets/common/base/onebox.scss

@@ -105,6 +105,15 @@ aside.onebox {
     display: flex;
     margin-bottom: 1em;
 
+    .d-icon {
+      margin-right: 5px;
+      margin-top: 2px;
+
+      &.d-icon-fab-twitter {
+        color: var(--twitter);
+      }
+    }
+
     a[href] {
       color: var(--primary-med-or-secondary-med);
       text-decoration: none;
@@ -112,15 +121,6 @@ aside.onebox {
   }
 
   @include onebox-favicon("stackexchange", "stackexchange");
-  @include onebox-favicon("twitterstatus", "twitter");
-  @include onebox-favicon("wikipedia", "wikipedia");
-  @include onebox-favicon("githubblob", "github");
-  @include onebox-favicon("githubcommit", "github");
-  @include onebox-favicon("githubpullrequest", "github");
-  @include onebox-favicon("githubissue", "github");
-  @include onebox-favicon("githubfile", "github");
-  @include onebox-favicon("githubgist", "github");
-  @include onebox-favicon("amazon", "amazon");
   @include onebox-favicon("instagram", "instagram");
   @include onebox-favicon("googledocs", "google_branding/logo_drive_48px");
   @include onebox-favicon("googledrive", "google_branding/logo_drive_48px");

lib/svg_sprite/svg_sprite.rb

@@ -31,7 +31,6 @@ module SvgSprite
     "book",
     "book-reader",
     "bookmark",
-    "discourse-bookmark-clock",
     "briefcase",
     "calendar-alt",
     "caret-down",
@@ -58,9 +57,11 @@ module SvgSprite
     "crosshairs",
     "cube",
     "desktop",
+    "discourse-amazon",
     "discourse-bell-exclamation",
     "discourse-bell-one",
     "discourse-bell-slash",
+    "discourse-bookmark-clock",
     "discourse-compress",
     "discourse-expand",
     "download",
@@ -85,6 +86,7 @@ module SvgSprite
     "fab-linux",
     "fab-twitter",
     "fab-twitter-square",
+    "fab-wikipedia-w",
     "fab-windows",
     "far-bell",
     "far-bell-slash",

vendor/assets/svg-icons/discourse-additional.svg

@@ -27,4 +27,9 @@ Additional SVG icons
   <symbol id='discourse-bell-slash' viewBox="0 0 448 512">
     <path d="M442.7 396.2L36.5 70.7c-6.9-5.5-17-4.4-22.5 2.5L4 85.6c-5.5 6.9-4.4 17 2.5 22.5l406.2 325.5c6.9 5.5 17 4.4 22.5-2.5l10-12.5c5.5-6.9 3.7-17.7-3.2-23.2l.7.8zM67.5 368c16.7-22 34.5-55.8 41.4-110.6l-45.5-35.6C60.2 312.6 27 342.5 8.6 362.3 2.6 368.7 0 376.4 0 384c.1 16.4 13 32 32.1 32h279.7l-61.4-48H67.5zM224 96c61.9 0 112 50.1 112 112 0 .2-.1.4-.1.6 0 16.8 1.2 31.8 2.8 45.7l59.5 46.5c-8.3-22.1-14.3-51.5-14.3-92.9 0-77.7-54.5-139.9-127.9-155.2V32c0-17.7-14.3-32-32-32s-32 14.3-32 32v20.8c-26 5.4-49.4 16.9-69.1 32.7l38.2 29.8C179 103.2 200.6 96 224 96zm0 416c35.3 0 64-28.6 64-64H160c0 35.4 28.7 64 64 64z"/>
   </symbol>
+  <!-- "Discourse Amazon" icon from svgrepo.com, with a brand-colored arrow -->
+  <symbol id='discourse-amazon' viewBox="0 0 291 291">
+    <path style="fill:#ff8a24;" d="M252.089,239.901c-120.033,57.126-194.528,9.331-242.214-19.7c-2.95-1.83-7.966,0.428-3.614,5.426 c15.886,19.263,67.95,65.692,135.909,65.692c68.005,0,108.462-37.107,113.523-43.58 C260.719,241.321,257.169,237.78,252.089,239.901z M285.8,221.284c-3.223-4.197-19.6-4.98-29.906-3.714 c-10.324,1.229-25.818,7.538-24.471,11.325c0.692,1.42,2.103,0.783,9.195,0.146c7.11-0.71,27.029-3.223,31.18,2.203 c4.17,5.462-6.354,31.49-8.275,35.687c-1.857,4.197,0.71,5.28,4.197,2.485c3.441-2.795,9.668-10.032,13.847-20.274 C285.718,238.845,288.249,224.479,285.8,221.284z"/>
+    <path d="M221.71,149.219V53.557C221.71,37.125,205.815,0,148.689,0C91.572,0,61.184,35.696,61.184,67.85 l47.74,4.27c0,0,10.633-32.136,35.313-32.136s22.987,19.992,22.987,24.316v20.784C135.607,86.149,57.096,95.18,57.096,161.382 c0,71.191,89.863,74.177,119.332,28.167c1.138,1.866,2.431,3.696,4.051,5.408c10.843,11.398,25.308,24.981,25.308,24.981 l36.852-36.415C242.658,183.513,221.71,167.071,221.71,149.219z M112.511,152.578c0-30.579,32.764-36.779,54.722-37.507v26.319 C167.224,193.527,112.511,185.634,112.511,152.578z"/>
+  </symbol>
 </svg>