Introducing an Icon component.

The component has a mapping of names and SVG contents. This removes the
need of an esbuild plugin.

LICENSES/ISC.txt

@@ -1,8 +0,0 @@
-ISC License:
-
-Copyright (c) 2004-2010 by Internet Systems Consortium, Inc. ("ISC")
-Copyright (c) 1995-2003 by Internet Software Consortium
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND ISC DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL ISC BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

esbuild/esbuild-svg.js

@@ -1,37 +0,0 @@
-// SPDX-FileCopyrightText: Copyright (c) Antoine Boulanger (https://github.com/ABXlink)
-//
-// SPDX-License-Identifier: ISC
-
-// Source: https://github.com/nativew/esbuild-plugin-svg
-
-const fs = require("fs")
-const path = require("path")
-
-const pluginSvg = (options = {}) => ({
-  name: "svg",
-  setup(build) {
-    const {customElement = false, namespace = "icon"} = options
-    const loader = customElement ? "js" : "text"
-
-    build.onLoad({filter: /\.svg$/}, async (args) => {
-      const fileName = path.basename(args.path, ".svg")
-      let contents = await fs.promises.readFile(args.path, "utf8")
-
-      if (customElement) {
-        contents = `
-					class SvgIcon extends HTMLElement {
-						connectedCallback() {
-							this.innerHTML = \`${contents}\`;
-						}
-					}
-					window.customElements.define('${namespace ? `${namespace}-` : ""}${fileName}', SvgIcon);
-					export default SvgIcon;
-				`
-      }
-
-      return {contents, loader}
-    })
-  },
-})
-
-module.exports = pluginSvg

gulpfile.js

@@ -13,7 +13,6 @@ const gulpPostcss = require("gulp-postcss")
 const gulpRename = require("gulp-rename")
 
 const sveltePlugin = require("esbuild-svelte")
-const svgPlugin = require("./esbuild/esbuild-svg")
 const DEST = path.resolve("./addon")
 
 // REUSE-IgnoreStart
@@ -46,12 +45,10 @@ function js_bundle(done) {
           metafile: false,
           minifyIdentifiers: process.env.NODE_ENV == "production",
           minifyWhitespace: process.env.NODE_ENV == "production",
-          plugins: [
-            sveltePlugin(),
-            svgPlugin({
-              customElement: true,
-            }),
-          ],
+          loader: {
+            ".svg": "text",
+          },
+          plugins: [sveltePlugin()],
         }),
       )
       .pipe(gulpHeader("//" + LICENSE_HEADER.join("\n//") + "\n"))

src/components/icon.svelte

@@ -0,0 +1,40 @@
+<!-- 
+SPDX-FileCopyrightText: © 2024 Olivier Meunier <olivier@neokraft.net>
+
+SPDX-License-Identifier: GPL-3.0-only
+-->
+<svelte:options immutable="{true}" />
+
+<script context="module">
+  const icons = {
+    info: require("boxicons/svg/regular/bx-info-circle.svg"),
+    "close-circle": require("boxicons/svg/solid/bxs-x-circle.svg"),
+    close: require("boxicons/svg/regular/bx-x.svg"),
+    "chevron-down": require("boxicons/svg/regular/bx-chevron-down.svg"),
+    "chevron-up": require("boxicons/svg/regular/bx-chevron-up.svg"),
+  }
+</script>
+
+<script>
+  import {onMount} from "svelte"
+
+  export let name
+  let className = ""
+  let container
+
+  export {className as class}
+
+  onMount(() => {
+    const icon = new DOMParser().parseFromString(icons[name], "image/svg+xml")
+    container.appendChild(icon.firstChild)
+  })
+</script>
+
+{#if icons[name] === undefined}
+  <span class="text-red-600">--missing-icon--</span>
+{:else}
+  <span
+    class="inline leading-none relative h-[1em] top-[-0.08em] [&_svg]:inline [&_svg]:h-[1em] [&_svg]:w-[1em] {className}"
+    bind:this="{container}">
+  </span>
+{/if}

src/components/tabs-current.svelte

@@ -6,8 +6,8 @@
 
   import browser from "webextension-polyfill"
   import {onMount} from "svelte"
-  import "boxicons/svg/regular/bx-info-circle.svg"
 
+  import Icon from "./icon.svelte"
   import Labels from "./labels.svelte"
   import {connected} from "../lib/store"
   import {tabItems, States} from "../lib/tabs"
@@ -99,7 +99,7 @@
     <div
       class="flex gap-1 p-1 items-start my-6 bg-blue-50 rounded shadow text-blue-800">
       <span class="fill-blue-700"
-        ><icon-bx-info-circle></icon-bx-info-circle></span>
+        ><Icon name="info" class="text-2xl"></Icon></span>
       <p class="grow">
         This page doesn't seem to be an article. You may try to save a selection
         instead of the whole page if Readeck yields unexpected results.

src/components/tabs-status.svelte

@@ -4,8 +4,7 @@
   // SPDX-License-Identifier: GPL-3.0-only
   "use strict"
 
-  import "boxicons/svg/solid/bxs-x-circle.svg"
-
+  import Icon from "./icon.svelte"
   import Progress from "./progress.svelte"
   import {savePage, getBookmark} from "../lib/readeck-api"
   import {serverURL} from "../lib/store"
@@ -195,9 +194,7 @@
           type="button"
           class="fill-gray-600 hf:fill-red-700"
           on:click="{close}">
-          <span class="h-4 w-4">
-            <icon-bxs-x-circle></icon-bxs-x-circle>
-          </span>
+          <Icon name="close-circle" class="text-lg"></Icon>
         </button>
       {/if}
     </div>