Merge pull request #1095 from hgiesel/svgloader2

Use svg-loader to load svgs directly into ts packages

qt/aqt/data/web/css/vendor/BUILD.bazel

@@ -1,12 +1,9 @@
-load("//ts:vendor.bzl", "copy_bootstrap_css", "copy_bootstrap_icons")
+load("//ts:vendor.bzl", "copy_bootstrap_css")
 
 copy_bootstrap_css(name = "bootstrap")
 
-copy_bootstrap_icons(name = "bootstrap-icons")
-
 files = [
     "bootstrap",
-    "bootstrap-icons",
 ]
 
 directories = []

qt/aqt/editor.py

@@ -234,7 +234,6 @@ class Editor:
             _html % (bgcol, topbuts, tr.editing_show_duplicates()),
             css=[
                 "css/vendor/bootstrap.min.css",
-                "css/vendor/bootstrap-icons.css",
                 "css/editor.css",
             ],
             js=[

ts/BUILD.bazel

@@ -1,5 +1,6 @@
 load("//ts:prettier.bzl", "prettier", "prettier_test")
 load("//ts:sql_format.bzl", "sql_format_setup")
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
 
 prettier()
 
@@ -13,6 +14,12 @@ prettier_test(
 
 sql_format_setup()
 
+ts_library(
+    name = "image_module_support",
+    srcs = ["images.d.ts"],
+    visibility = ["//visibility:public"],
+)
+
 # Exported files
 #################
 

ts/editor/BUILD.bazel

@@ -2,6 +2,7 @@ load("@npm//@bazel/typescript:index.bzl", "ts_library")
 load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
 load("//ts:esbuild.bzl", "esbuild")
+load("//ts:vendor.bzl", "copy_bootstrap_icons")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 
 sass_binary(
@@ -21,16 +22,23 @@ ts_library(
     srcs = glob(["*.ts"]),
     tsconfig = "//ts:tsconfig.json",
     deps = [
+        "//ts:image_module_support",
         "//ts/html-filter",
     ],
 )
 
+copy_bootstrap_icons(
+    name = "bootstrap-icons",
+    icons = ["pin-angle.svg"],
+)
+
 esbuild(
     name = "editor",
     entry_point = "index_wrapper.ts",
     visibility = ["//visibility:public"],
     deps = [
         "editor_ts",
+        "bootstrap-icons",
     ],
 )
 

ts/editor/editor.scss

@@ -133,15 +133,18 @@ button.highlighted {
     }
 }
 
-.icon {
+.icon > svg {
-    cursor: pointer;
+    fill: var(--text-fg);
-    color: var(--text-fg);
+}
 
-    &.is-inactive::before {
+.pin-icon {
+    cursor: pointer;
+
+    &.is-inactive {
         opacity: 0.1;
     }
 
-    &.icon--hover::before {
+    &.icon--hover {
         opacity: 0.5;
     }
 }

ts/editor/labelContainer.ts

@@ -1,4 +1,5 @@
 import { bridgeCommand } from "./lib";
+import pinIcon from "./pin-angle.svg";
 
 function removeHoverIcon(evt: Event): void {
     const icon = evt.currentTarget as HTMLElement;
@@ -23,7 +24,8 @@ export class LabelContainer extends HTMLDivElement {
         this.appendChild(this.label);
 
         this.sticky = document.createElement("span");
-        this.sticky.className = "bi me-1 bi-pin-angle icon";
+        this.sticky.className = "icon pin-icon me-1";
+        this.sticky.innerHTML = pinIcon;
         this.sticky.hidden = true;
         this.appendChild(this.sticky);
 

ts/esbuild/upstream.bzl

@@ -66,6 +66,7 @@ def _esbuild_impl(ctx):
     args.add_joined(["--platform", ctx.attr.platform], join_with = "=")
     args.add_joined(["--target", ctx.attr.target], join_with = "=")
     args.add_joined(["--log-level", "info"], join_with = "=")
+    args.add_joined(["--loader", ".svg=text"], join_with = ":")
     args.add_joined(["--metafile", metafile.path], join_with = "=")
     args.add_all(ctx.attr.define, format_each = "--define:%s")
     args.add_all(ctx.attr.external, format_each = "--external:%s")

ts/images.d.ts

@@ -0,0 +1 @@
+declare module "*.svg";

ts/vendor.bzl

@@ -117,15 +117,11 @@ def copy_bootstrap_css(name = "bootstrap-css", visibility = ["//visibility:publi
         visibility = visibility,
     )
 
-def copy_bootstrap_icons(name = "bootstrap-icons", visibility = ["//visibility:public"]):
+def copy_bootstrap_icons(name = "bootstrap-icons", icons = [], visibility = ["//visibility:public"]):
     vendor_js_lib(
         name = name,
         pkg = _pkg_from_name(name),
-        include = [
+        include = ["icons/{}".format(icon) for icon in icons],
-            "font/bootstrap-icons.css",
+        strip_prefix = "icons/",
-            "font/fonts/bootstrap-icons.woff",
-            "font/fonts/bootstrap-icons.woff2",
-        ],
-        strip_prefix = "font/",
         visibility = visibility,
     )