From a09c271b55d6b68b0d777efc073caf4323b54050 Mon Sep 17 00:00:00 2001
From: Folyd <lyshuhow@gmail.com>
Date: Wed, 16 Oct 2024 11:35:08 +0800
Subject: [PATCH] Fix docs.rs svg icons

---
 extension/script/docs-rs.js | 26 ++++++++++++--------------
 extension/script/svgs.js    |  8 --------
 manifest.jsonnet            |  2 +-
 3 files changed, 13 insertions(+), 23 deletions(-)
 delete mode 100644 extension/script/svgs.js

diff --git a/extension/script/docs-rs.js b/extension/script/docs-rs.js
index 979174d..264d9cf 100644
--- a/extension/script/docs-rs.js
+++ b/extension/script/docs-rs.js
@@ -139,7 +139,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 
     advisoryMenu.innerHTML = `<a href="https://rustsec.org/${advisories.length > 0 ? `packages/${crateName}.html` : ""}"
                                 class="pure-menu-link" target="_blank">
-                <span class="fa-svg" aria-hidden="true" style="height:13px;width:13px;display:inline-block;vertical-align:middle;">${SVG_SHEILD}</span>
+                <span class="fa fa-solid fa-svg fa-shield" aria-hidden="true" style="height:13px;width:13px;display:inline-block;vertical-align:middle;"></span>
                 <span class="title">Security ${advisories.length}</span>
                 </a>
                 <div class="pure-menu-children rse-dropdown-content" role="menu">
@@ -281,12 +281,12 @@ function insertAddToExtensionElement(state) {
         } else {
             let svgIcon = document.querySelector(".add-to-extension .fa-svg");
             if (svgIcon) {
-                svgIcon.innerHTML = SVG_SPINNER;
+                svgIcon.className = "fa fa-solid fa-svg fa-spinner";
             }
             injectScripts("script/lib.js", "script/add-search-index.js");
         }
     };
-    let content, iconAttributes, iconFile;
+    let content, iconColor, iconClass;
     if (state === "latest") {
         content = `<p>
                       You already added this crate (v${installedVersion}). Click again to remove it.
@@ -294,28 +294,26 @@ function insertAddToExtensionElement(state) {
                       <span id="rse-here" style="text-decoration: underline; cursor: pointer">here</span>
                       to manage all your indexed crates.
                    </p>`;
-        iconAttributes = `class="fa-svg" style="color:green"`;
-        iconFile = SVG_CHECK_CIRCLE;
+        iconColor = "green";
+        iconClass = "fa-check-circle";
     } else if (state === "outdated") {
         content = `<p>You current version v${installedVersion} is outdated. Click to update to the v${crateVersion}.</p>`;
-        iconAttributes = `class="fa-svg" style="color:#e57300"`;
-        iconFile = SVG_ARROW_UP_CIRCLE;
+        iconColor = "#e57300";
+        iconClass = "fa-circle-arrow-up";
     } else if (state === "error") {
         // The error case: the user fail to install the crate.
         content = `<p>Oops! Some error happened. You can try again. <br><br>Or check the console and file an issue to report the error.</p>`;
-        iconAttributes = `class="fa-svg" style="color:#e62f07"`;
-        iconFile = SVG_ERROR;
+        iconColor = "#e62f07";
+        iconClass = "fa-error";
     } else {
         // The default case: need-to-install.
         content = `<p>Add this crate to Rust Search Extension then you can search it in the address bar.</p>`;
-        iconAttributes = `class="fa-svg" style="color:#121212"`;
-        iconFile = SVG_PLUS_CIRCLE;
+        iconColor = "#121212";
+        iconClass = "fa-plus-circle";
     }
     li.innerHTML = `<div class="add-to-extension"
                          aria-label="Add to Rust Search Extension">
-                         <span style="height:13px;width:13px;display:inline-block;vertical-align:middle;" ${iconAttributes}>
-                         ${iconFile}
-                         </span>
+                         <span style="color:${iconColor};height:13px;width:13px;display:inline-block;vertical-align:middle;" class="fa fa-solid fa-svg ${iconClass}"></span>
                          <span class="title"> to Rust Search Extension</span>
                     </div>
                     <div class="pure-menu-children" role="menu">
diff --git a/extension/script/svgs.js b/extension/script/svgs.js
deleted file mode 100644
index 277e0cc..0000000
--- a/extension/script/svgs.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// Those SVG files download from https://fontawesome.com/download
-const SVG_ARROW_UP_CIRCLE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm143.6 28.9l72.4-75.5V392c0 13.3 10.7 24 24 24h16c13.3 0 24-10.7 24-24V209.4l72.4 75.5c9.3 9.7 24.8 9.9 34.3.4l10.9-11c9.4-9.4 9.4-24.6 0-33.9L273 107.7c-9.4-9.4-24.6-9.4-33.9 0L106.3 240.4c-9.4 9.4-9.4 24.6 0 33.9l10.9 11c9.6 9.5 25.1 9.3 34.4-.4z"/></svg>`;
-const SVG_CHECK_CIRCLE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/></svg>`;
-const SVG_FLAG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M349.565 98.783C295.978 98.783 251.721 64 184.348 64c-24.955 0-47.309 4.384-68.045 12.013a55.947 55.947 0 0 0 3.586-23.562C118.117 24.015 94.806 1.206 66.338.048 34.345-1.254 8 24.296 8 56c0 19.026 9.497 35.825 24 45.945V488c0 13.255 10.745 24 24 24h16c13.255 0 24-10.745 24-24v-94.4c28.311-12.064 63.582-22.122 114.435-22.122 53.588 0 97.844 34.783 165.217 34.783 48.169 0 86.667-16.294 122.505-40.858C506.84 359.452 512 349.571 512 339.045v-243.1c0-23.393-24.269-38.87-45.485-29.016-34.338 15.948-76.454 31.854-116.95 31.854z"/></svg>`;
-const SVG_PLUS_CIRCLE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/></svg>`;
-const SVG_ERROR = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>`;
-const SVG_SHEILD = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M240 0c4.6 0 9.2 1 13.4 2.9L441.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C41.3 420.7 .5 239.2 0 140c-.1-26.2 16.3-47.9 38.3-57.2L226.7 2.9C230.8 1 235.4 0 240 0z"/></svg>`;
-const SVG_SPINNER = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg>`;
\ No newline at end of file
diff --git a/manifest.jsonnet b/manifest.jsonnet
index 4ea0432..47e99e0 100644
--- a/manifest.jsonnet
+++ b/manifest.jsonnet
@@ -43,7 +43,7 @@ json
 .setOptionsUi('manage/index.html')
 .addContentScript(
   matches=['*://docs.rs/*'],
-  js=['content-script-bundle.js'] + utils.js_files('script', ['lib', 'docs-rs', 'svgs', 'rust-src-navigate', 'semver']),
+  js=['content-script-bundle.js'] + utils.js_files('script', ['lib', 'docs-rs', 'rust-src-navigate', 'semver']),
   css=['script/docs-rs.css', 'script/details-toggle.css'],
 )
 .addContentScript(