Svg icon (#3135)

* Add sveltekit-svg plugin to fix svg icon styling

Closes #3127.

* Unify svg icon usage

Moves all icons into ts/lib/components/icons.ts and uses a single component to render
them both with eslint and svelte-kit.

* Fix spinning revert icon not being centered

* Use svg earth icon for global label

* Add tooltip to global label icon

* Remove eslint-plugin-simple-import-sort

Imports are already sorted by dprint with conflicting rules.

.eslintrc.cjs

@@ -7,7 +7,6 @@ module.exports = {
     },
     plugins: [
         "import",
-        "simple-import-sort",
         "@typescript-eslint",
         "@typescript-eslint/eslint-plugin",
     ],
@@ -20,8 +19,6 @@ module.exports = {
         "no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
         "import/newline-after-import": "warn",
         "import/no-useless-path-segments": "warn",
-        "simple-import-sort/imports": "warn",
-        "simple-import-sort/exports": "warn",
         "prefer-const": "warn",
         "no-nested-ternary": "warn",
         "curly": "error",

package.json

@@ -16,6 +16,7 @@
     },
     "devDependencies": {
         "@bufbuild/protoc-gen-es": "^1.8.0",
+        "@poppanator/sveltekit-svg": "^4.2.1",
         "@sqltools/formatter": "^1.2.2",
         "@sveltejs/adapter-static": "^3.0.0",
         "@sveltejs/kit": "^2.4.1",
@@ -42,7 +43,6 @@
         "eslint": "^8.44.0",
         "eslint-plugin-compat": "^4.1.4",
         "eslint-plugin-import": "^2.25.4",
-        "eslint-plugin-simple-import-sort": "^10.0.0",
         "eslint-plugin-svelte": "^2",
         "license-checker-rseidelsohn": "^4.2.6",
         "prettier": "^2.4.1",
@@ -51,6 +51,7 @@
         "svelte-check": "^3.4.4",
         "svelte-preprocess": "^5.0.4",
         "svelte-preprocess-esbuild": "^3.0.1",
+        "svgo": "^3.2.0",
         "tslib": "^2.0.3",
         "tsx": "^3.12.0",
         "typescript": "^5.0.4",
@@ -69,13 +70,13 @@
         "codemirror": "^5.63.1",
         "d3": "^7.0.0",
         "fabric": "^5.3.0",
+        "hammerjs": "^2.0.8",
         "intl-pluralrules": "^2.0.0",
         "jquery": "^3.5.1",
         "jquery-ui-dist": "^1.12.1",
         "lodash-es": "^4.17.21",
         "marked": "^5.1.0",
-        "mathjax": "^3.1.2",
+        "mathjax": "^3.1.2"
-        "hammerjs": "^2.0.8"
     },
     "resolutions": {
         "canvas": "npm:empty-npm-package"

ts/editable/icons.ts

@@ -1,4 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-export { default as mathIcon } from "@mdi/svg/svg/math-integral-box.svg";

ts/editable/mathjax.ts

@@ -7,7 +7,7 @@
 
 import "mathjax/es5/tex-svg-full";
 
-import { mathIcon } from "./icons";
+import mathIcon from "@mdi/svg/svg/math-integral-box.svg?src";
 
 const parser = new DOMParser();
 

ts/editor/ClozeButtons.svelte

@@ -10,10 +10,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { get } from "svelte/store";
 
     import ButtonGroup from "$lib/components/ButtonGroup.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
+    import { clozeIcon, incrementClozeIcon } from "$lib/components/icons";
     import Shortcut from "$lib/components/Shortcut.svelte";
 
-    import { clozeIcon, incrementClozeIcon } from "./icons";
     import { context as noteEditorContext } from "./NoteEditor.svelte";
     import { editingInputIsRichText } from "./rich-text-input";
 
@@ -84,7 +85,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:click={onIncrementCloze}
         --border-left-radius="5px"
     >
-        {@html incrementClozeIcon}
+        <Icon icon={incrementClozeIcon} />
     </IconButton>
 
     <Shortcut
@@ -101,7 +102,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:click={onSameCloze}
         --border-right-radius="5px"
     >
-        {@html clozeIcon}
+        <Icon icon={clozeIcon} />
     </IconButton>
 
     <Shortcut keyCombination={sameKeyCombination} {event} on:action={onSameCloze} />

ts/editor/CollapseBadge.svelte

@@ -4,14 +4,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import Badge from "$lib/components/Badge.svelte";
-
+    import Icon from "$lib/components/Icon.svelte";
-    import { chevronDown } from "./icons";
+    import { chevronDown } from "$lib/components/icons";
 
     export let collapsed = false;
 </script>
 
 <div class="collapse-badge" class:collapsed>
-    <Badge iconSize={80}>{@html chevronDown}</Badge>
+    <Badge iconSize={80}><Icon icon={chevronDown} /></Badge>
 </div>
 
 <style lang="scss">

ts/editor/NoteEditor.svelte

@@ -48,6 +48,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import Absolute from "$lib/components/Absolute.svelte";
     import Badge from "$lib/components/Badge.svelte";
+    import Icon from "$lib/components/Icon.svelte";
+    import { alertIcon } from "$lib/components/icons";
     import { TagEditor } from "$lib/tag-editor";
     import { commitTagEdits } from "$lib/tag-editor/TagInput.svelte";
 
@@ -62,7 +64,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { FieldData } from "./EditorField.svelte";
     import EditorField from "./EditorField.svelte";
     import Fields from "./Fields.svelte";
-    import { alertIcon } from "./icons";
     import ImageOverlay from "./image-overlay";
     import { shrinkImagesByDefault } from "./image-overlay/ImageOverlay.svelte";
     import MathjaxOverlay from "./mathjax-overlay";
@@ -636,7 +637,7 @@ the AddCards dialog) should be implemented in the user of this component.
         <Absolute bottom right --margin="10px">
             <Notification>
                 <Badge --badge-color="tomato" --icon-align="top">
-                    {@html alertIcon}
+                    <Icon icon={alertIcon} />
                 </Badge>
                 <span>{@html hint}</span>
             </Notification>

ts/editor/PlainTextBadge.svelte

@@ -8,9 +8,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { createEventDispatcher, onDestroy } from "svelte";
 
     import Badge from "$lib/components/Badge.svelte";
+    import Icon from "$lib/components/Icon.svelte";
+    import { plainTextIcon } from "$lib/components/icons";
 
     import { context as editorFieldContext } from "./EditorField.svelte";
-    import { plainTextIcon } from "./icons";
 
     const animated = !document.body.classList.contains("reduce-motion");
 
@@ -44,7 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         tooltip="{tr.editingToggleHtmlEditor()} ({getPlatformString(keyCombination)})"
         iconSize={80}
     >
-        {@html plainTextIcon}
+        <Icon icon={plainTextIcon} />
     </Badge>
 </span>
 

ts/editor/RichTextBadge.svelte

@@ -8,9 +8,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { createEventDispatcher, onDestroy } from "svelte";
 
     import Badge from "$lib/components/Badge.svelte";
+    import Icon from "$lib/components/Icon.svelte";
+    import { richTextIcon } from "$lib/components/icons";
 
     import { context as editorFieldContext } from "./EditorField.svelte";
-    import { richTextIcon } from "./icons";
 
     const animated = !document.body.classList.contains("reduce-motion");
 
@@ -44,7 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         tooltip="{tr.editingToggleVisualEditor()} ({getPlatformString(keyCombination)})"
         iconSize={80}
     >
-        {@html richTextIcon}
+        <Icon icon={richTextIcon} />
     </Badge>
 </span>
 

ts/editor/StickyBadge.svelte

@@ -9,9 +9,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { onMount } from "svelte";
 
     import Badge from "$lib/components/Badge.svelte";
+    import Icon from "$lib/components/Icon.svelte";
+    import { stickyIcon } from "$lib/components/icons";
 
     import { context as editorFieldContext } from "./EditorField.svelte";
-    import { stickyIcon } from "./icons";
 
     const animated = !document.body.classList.contains("reduce-motion");
 
@@ -47,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})"
         widthMultiplier={0.7}
     >
-        {@html stickyIcon}
+        <Icon icon={stickyIcon} />
     </Badge>
 </span>
 

ts/editor/editor-toolbar/BlockButtons.svelte

@@ -17,14 +17,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     } from "$lib/components/ButtonGroupItem.svelte";
     import ButtonToolbar from "$lib/components/ButtonToolbar.svelte";
     import DynamicallySlottable from "$lib/components/DynamicallySlottable.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
-    import Popover from "$lib/components/Popover.svelte";
-    import WithFloating from "$lib/components/WithFloating.svelte";
-    import { execCommand } from "$lib/domlib";
-
-    import { context } from "../NoteEditor.svelte";
-    import { editingInputIsRichText } from "../rich-text-input";
-    import CommandIconButton from "./CommandIconButton.svelte";
     import {
         indentIcon,
         justifyCenterIcon,
@@ -35,7 +29,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         olIcon,
         outdentIcon,
         ulIcon,
-    } from "./icons";
+    } from "$lib/components/icons";
+    import Popover from "$lib/components/Popover.svelte";
+    import WithFloating from "$lib/components/WithFloating.svelte";
+    import { execCommand } from "$lib/domlib";
+
+    import { context } from "../NoteEditor.svelte";
+    import { editingInputIsRichText } from "../rich-text-input";
+    import CommandIconButton from "./CommandIconButton.svelte";
 
     export let api = {};
 
@@ -104,7 +105,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 shortcut="Control+,"
                 modeVariantKeys={listKeys}
             >
-                {@html ulIcon}
+                <Icon icon={ulIcon} />
             </CommandIconButton>
         </ButtonGroupItem>
 
@@ -115,7 +116,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 shortcut="Control+."
                 modeVariantKeys={listKeys}
             >
-                {@html olIcon}
+                <Icon icon={olIcon} />
             </CommandIconButton>
         </ButtonGroupItem>
 
@@ -132,7 +133,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         {disabled}
                         on:click={() => (showFloating = !showFloating)}
                     >
-                        {@html listOptionsIcon}
+                        <Icon icon={listOptionsIcon} />
                     </IconButton>
                 </span>
 
@@ -152,7 +153,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                         tooltip={tr.editingAlignLeft()}
                                         modeVariantKeys={justificationKeys}
                                     >
-                                        {@html justifyLeftIcon}
+                                        <Icon icon={justifyLeftIcon} />
                                     </CommandIconButton>
                                 </ButtonGroupItem>
 
@@ -162,7 +163,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                         tooltip={tr.editingCenter()}
                                         modeVariantKeys={justificationKeys}
                                     >
-                                        {@html justifyCenterIcon}
+                                        <Icon icon={justifyCenterIcon} />
                                     </CommandIconButton>
                                 </ButtonGroupItem>
 
@@ -172,7 +173,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                         tooltip={tr.editingAlignRight()}
                                         modeVariantKeys={justificationKeys}
                                     >
-                                        {@html justifyRightIcon}
+                                        <Icon icon={justifyRightIcon} />
                                     </CommandIconButton>
                                 </ButtonGroupItem>
 
@@ -182,7 +183,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                         tooltip={tr.editingJustify()}
                                         modeVariantKeys={justificationKeys}
                                     >
-                                        {@html justifyFullIcon}
+                                        <Icon icon={justifyFullIcon} />
                                     </CommandIconButton>
                                 </ButtonGroupItem>
                             </DynamicallySlottable>
@@ -199,7 +200,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                 --border-left-radius="5px"
                                 --border-right-radius="0px"
                             >
-                                {@html outdentIcon}
+                                <Icon icon={outdentIcon} />
                             </IconButton>
 
                             <IconButton
@@ -211,7 +212,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                 on:click={indentListItem}
                                 --border-right-radius="5px"
                             >
-                                {@html indentIcon}
+                                <Icon icon={indentIcon} />
                             </IconButton>
                         </ButtonGroup>
                     </ButtonToolbar>

ts/editor/editor-toolbar/BoldButton.svelte

@@ -6,9 +6,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "@generated/ftl";
     import { removeStyleProperties } from "@tslib/styling";
 
+    import Icon from "$lib/components/Icon.svelte";
+    import { boldIcon } from "$lib/components/icons";
     import type { MatchType } from "$lib/domlib/surround";
 
-    import { boldIcon } from "./icons";
     import TextAttributeButton from "./TextAttributeButton.svelte";
 
     function matcher(element: HTMLElement | SVGElement, match: MatchType): void {
@@ -37,5 +38,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     tooltip={tr.editingBoldText()}
     keyCombination="Control+B"
 >
-    {@html boldIcon}
+    <Icon icon={boldIcon} />
 </TextAttributeButton>

ts/editor/editor-toolbar/HighlightColorButton.svelte

@@ -9,14 +9,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { singleCallback } from "@tslib/typing";
     import { onMount } from "svelte";
 
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
+    import { chevronDown } from "$lib/components/icons";
+    import { highlightColorIcon } from "$lib/components/icons";
     import type { FormattingNode, MatchType } from "$lib/domlib/surround";
 
-    import { chevronDown } from "../icons";
     import { surrounder } from "../rich-text-input";
     import ColorPicker from "./ColorPicker.svelte";
     import { context as editorToolbarContext } from "./EditorToolbar.svelte";
-    import { highlightColorIcon } from "./icons";
     import WithColorHelper from "./WithColorHelper.svelte";
 
     export let color: string;
@@ -115,8 +116,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         {disabled}
         on:click={setTextColor}
     >
-        {@html highlightColorIcon}
+        <Icon icon={highlightColorIcon} />
-        {@html colorHelperIcon}
+        <Icon icon={colorHelperIcon} />
     </IconButton>
 
     <IconButton
@@ -126,7 +127,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         iconSize={120}
         --border-right-radius="5px"
     >
-        {@html chevronDown}
+        <Icon icon={chevronDown} />
         <ColorPicker
             value={color}
             on:input={(event) => {

ts/editor/editor-toolbar/ImageOcclusionButton.svelte

@@ -12,13 +12,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         updatePropsList,
     } from "$lib/components/ButtonGroupItem.svelte";
     import DynamicallySlottable from "$lib/components/DynamicallySlottable.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
+    import { mdiTableRefresh, mdiViewDashboard } from "$lib/components/icons";
 
     import {
         ioImageLoadedStore,
         ioMaskEditorVisible,
     } from "../../routes/image-occlusion/store";
-    import { mdiTableRefresh, mdiViewDashboard } from "./icons";
 
     export let api = {};
 </script>
@@ -40,7 +41,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 }}
                 tooltip={tr.editingImageOcclusionToggleMaskEditor()}
             >
-                {@html mdiViewDashboard}
+                <Icon icon={mdiViewDashboard} />
             </IconButton>
         </ButtonGroupItem>
         <ButtonGroupItem>
@@ -56,7 +57,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 }}
                 tooltip={tr.editingImageOcclusionReset()}
             >
-                {@html mdiTableRefresh}
+                <Icon icon={mdiTableRefresh} />
             </IconButton>
         </ButtonGroupItem>
     </DynamicallySlottable>

ts/editor/editor-toolbar/ItalicButton.svelte

@@ -6,9 +6,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "@generated/ftl";
     import { removeStyleProperties } from "@tslib/styling";
 
+    import Icon from "$lib/components/Icon.svelte";
+    import { italicIcon } from "$lib/components/icons";
     import type { MatchType } from "$lib/domlib/surround";
 
-    import { italicIcon } from "./icons";
     import TextAttributeButton from "./TextAttributeButton.svelte";
 
     function matcher(element: HTMLElement | SVGElement, match: MatchType): void {
@@ -36,5 +37,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     tooltip={tr.editingItalicText()}
     keyCombination="Control+I"
 >
-    {@html italicIcon}
+    <Icon icon={italicIcon} />
 </TextAttributeButton>

ts/editor/editor-toolbar/LatexButton.svelte

@@ -8,7 +8,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { wrapInternal } from "@tslib/wrap";
 
     import DropdownItem from "$lib/components/DropdownItem.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
+    import { functionIcon } from "$lib/components/icons";
     import Popover from "$lib/components/Popover.svelte";
     import Shortcut from "$lib/components/Shortcut.svelte";
     import WithFloating from "$lib/components/WithFloating.svelte";
@@ -17,7 +19,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { context as noteEditorContext } from "../NoteEditor.svelte";
     import type { RichTextInputAPI } from "../rich-text-input";
     import { editingInputIsRichText } from "../rich-text-input";
-    import { functionIcon } from "./icons";
 
     const { focusedInput } = noteEditorContext.get();
     $: richTextAPI = $focusedInput as RichTextInputAPI;
@@ -94,7 +95,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         {disabled}
         on:click={() => (showFloating = !showFloating)}
     >
-        {@html functionIcon}
+        <Icon icon={functionIcon} />
     </IconButton>
 
     <Popover slot="floating" --popover-padding-inline="0">

ts/editor/editor-toolbar/OptionsButton.svelte

@@ -8,14 +8,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import CheckBox from "$lib/components/CheckBox.svelte";
     import DropdownItem from "$lib/components/DropdownItem.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
+    import { cogIcon } from "$lib/components/icons";
     import Popover from "$lib/components/Popover.svelte";
     import WithFloating from "$lib/components/WithFloating.svelte";
 
     import { mathjaxConfig } from "../../editable/mathjax-element";
     import { shrinkImagesByDefault } from "../image-overlay/ImageOverlay.svelte";
     import { closeHTMLTags } from "../plain-text-input/PlainTextInput.svelte";
-    import { cogIcon } from "./icons";
 
     let showFloating = false;
 
@@ -46,7 +47,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         --padding-inline="8px"
         on:click={() => (showFloating = !showFloating)}
     >
-        {@html cogIcon}
+        <Icon icon={cogIcon} />
     </IconButton>
 
     <Popover slot="floating" --popover-padding-inline="0">

ts/editor/editor-toolbar/RemoveFormatButton.svelte

@@ -11,17 +11,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import CheckBox from "$lib/components/CheckBox.svelte";
     import DropdownItem from "$lib/components/DropdownItem.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
+    import { chevronDown } from "$lib/components/icons";
+    import { eraserIcon } from "$lib/components/icons";
     import Popover from "$lib/components/Popover.svelte";
     import Shortcut from "$lib/components/Shortcut.svelte";
     import WithFloating from "$lib/components/WithFloating.svelte";
     import type { MatchType } from "$lib/domlib/surround";
 
-    import { chevronDown } from "../icons";
     import { surrounder } from "../rich-text-input";
     import type { RemoveFormat } from "./EditorToolbar.svelte";
     import { context as editorToolbarContext } from "./EditorToolbar.svelte";
-    import { eraserIcon } from "./icons";
 
     const { removeFormats } = editorToolbarContext.get();
 
@@ -113,7 +114,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     on:click={remove}
     --border-left-radius="5px"
 >
-    {@html eraserIcon}
+    <Icon icon={eraserIcon} />
 </IconButton>
 
 <Shortcut {keyCombination} on:action={remove} />
@@ -129,7 +130,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         --border-right-radius="5px"
         on:click={() => (showFloating = !showFloating)}
     >
-        {@html chevronDown}
+        <Icon icon={chevronDown} />
     </IconButton>
 
     <Popover slot="floating" --popover-padding-inline="0">

ts/editor/editor-toolbar/SubscriptButton.svelte

@@ -6,9 +6,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "@generated/ftl";
     import { removeStyleProperties } from "@tslib/styling";
 
+    import Icon from "$lib/components/Icon.svelte";
+    import { subscriptIcon } from "$lib/components/icons";
     import type { MatchType } from "$lib/domlib/surround";
 
-    import { subscriptIcon } from "./icons";
     import TextAttributeButton from "./TextAttributeButton.svelte";
 
     export function matcher(element: HTMLElement | SVGElement, match: MatchType): void {
@@ -37,5 +38,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     keyCombination="Control+Shift+="
     exclusiveNames={["superscript"]}
 >
-    {@html subscriptIcon}
+    <Icon icon={subscriptIcon} />
 </TextAttributeButton>

ts/editor/editor-toolbar/SuperscriptButton.svelte

@@ -6,9 +6,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "@generated/ftl";
     import { removeStyleProperties } from "@tslib/styling";
 
+    import Icon from "$lib/components/Icon.svelte";
+    import { superscriptIcon } from "$lib/components/icons";
     import type { MatchType } from "$lib/domlib/surround";
 
-    import { superscriptIcon } from "./icons";
     import TextAttributeButton from "./TextAttributeButton.svelte";
 
     export function matcher(element: HTMLElement | SVGElement, match: MatchType): void {
@@ -37,5 +38,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     keyCombination="Control+="
     exclusiveNames={["subscript"]}
 >
-    {@html superscriptIcon}
+    <Icon icon={superscriptIcon} />
 </TextAttributeButton>

ts/editor/editor-toolbar/TemplateButtons.svelte

@@ -16,14 +16,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         updatePropsList,
     } from "$lib/components/ButtonGroupItem.svelte";
     import DynamicallySlottable from "$lib/components/DynamicallySlottable.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
+    import { micIcon, paperclipIcon } from "$lib/components/icons";
     import Shortcut from "$lib/components/Shortcut.svelte";
 
     import { context } from "../NoteEditor.svelte";
     import { setFormat } from "../old-editor-adapter";
     import type { RichTextInputAPI } from "../rich-text-input";
     import { editingInputIsRichText } from "../rich-text-input";
-    import { micIcon, paperclipIcon } from "./icons";
     import LatexButton from "./LatexButton.svelte";
 
     const { focusedInput } = context.get();
@@ -93,7 +94,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {disabled}
                 on:click={attachMediaOnFocus}
             >
-                {@html paperclipIcon}
+                <Icon icon={paperclipIcon} />
             </IconButton>
             <Shortcut
                 keyCombination={attachmentCombination}
@@ -110,7 +111,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {disabled}
                 on:click={attachRecordingOnFocus}
             >
-                {@html micIcon}
+                <Icon icon={micIcon} />
             </IconButton>
             <Shortcut
                 keyCombination={recordCombination}

ts/editor/editor-toolbar/TextColorButton.svelte

@@ -10,16 +10,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { singleCallback } from "@tslib/typing";
     import { onMount } from "svelte";
 
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
+    import { chevronDown } from "$lib/components/icons";
+    import { textColorIcon } from "$lib/components/icons";
     import Shortcut from "$lib/components/Shortcut.svelte";
     import type { FormattingNode, MatchType } from "$lib/domlib/surround";
 
     import { withFontColor } from "../helpers";
-    import { chevronDown } from "../icons";
     import { surrounder } from "../rich-text-input";
     import ColorPicker from "./ColorPicker.svelte";
     import { context as editorToolbarContext } from "./EditorToolbar.svelte";
-    import { textColorIcon } from "./icons";
     import WithColorHelper from "./WithColorHelper.svelte";
 
     export let color: string;
@@ -133,8 +134,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:click={setTextColor}
         --border-left-radius="5px"
     >
-        {@html textColorIcon}
+        <Icon icon={textColorIcon} />
-        {@html colorHelperIcon}
+        <Icon icon={colorHelperIcon} />
     </IconButton>
     <Shortcut keyCombination={setCombination} on:action={setTextColor} />
 
@@ -144,7 +145,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         widthMultiplier={0.5}
         iconSize={120}
     >
-        {@html chevronDown}
+        <Icon icon={chevronDown} />
         <ColorPicker
             keyCombination={pickCombination}
             value={color}

ts/editor/editor-toolbar/UnderlineButton.svelte

@@ -5,9 +5,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "@generated/ftl";
 
+    import Icon from "$lib/components/Icon.svelte";
+    import { underlineIcon } from "$lib/components/icons";
     import type { MatchType } from "$lib/domlib/surround";
 
-    import { underlineIcon } from "./icons";
     import TextAttributeButton from "./TextAttributeButton.svelte";
 
     function matcher(element: HTMLElement | SVGElement, match: MatchType): void {
@@ -24,5 +25,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     tooltip={tr.editingUnderlineText()}
     keyCombination="Control+U"
 >
-    {@html underlineIcon}
+    <Icon icon={underlineIcon} />
 </TextAttributeButton>

ts/editor/editor-toolbar/WithColorHelper.svelte

@@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { colorHelperIcon } from "./icons";
+    import { colorHelperIcon } from "$lib/components/icons";
 
     export let color: string;
 

ts/editor/editor-toolbar/icons.ts

@@ -1,28 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-export { default as cogIcon } from "@mdi/svg/svg/cog.svg";
-export { default as colorHelperIcon } from "@mdi/svg/svg/color-helper.svg";
-export { default as highlightColorIcon } from "@mdi/svg/svg/format-color-highlight.svg";
-export { default as textColorIcon } from "@mdi/svg/svg/format-color-text.svg";
-export { default as subscriptIcon } from "@mdi/svg/svg/format-subscript.svg";
-export { default as superscriptIcon } from "@mdi/svg/svg/format-superscript.svg";
-export { default as functionIcon } from "@mdi/svg/svg/function-variant.svg";
-export { default as paperclipIcon } from "@mdi/svg/svg/paperclip.svg";
-export { default as mdiRefresh } from "@mdi/svg/svg/refresh.svg";
-export { default as mdiTableRefresh } from "@mdi/svg/svg/table-refresh.svg";
-export { default as mdiViewDashboard } from "@mdi/svg/svg/view-dashboard.svg";
-export { default as eraserIcon } from "bootstrap-icons/icons/eraser.svg";
-export { default as justifyFullIcon } from "bootstrap-icons/icons/justify.svg";
-export { default as olIcon } from "bootstrap-icons/icons/list-ol.svg";
-export { default as ulIcon } from "bootstrap-icons/icons/list-ul.svg";
-export { default as micIcon } from "bootstrap-icons/icons/mic.svg";
-export { default as justifyCenterIcon } from "bootstrap-icons/icons/text-center.svg";
-export { default as indentIcon } from "bootstrap-icons/icons/text-indent-left.svg";
-export { default as outdentIcon } from "bootstrap-icons/icons/text-indent-right.svg";
-export { default as justifyLeftIcon } from "bootstrap-icons/icons/text-left.svg";
-export { default as listOptionsIcon } from "bootstrap-icons/icons/text-paragraph.svg";
-export { default as justifyRightIcon } from "bootstrap-icons/icons/text-right.svg";
-export { default as boldIcon } from "bootstrap-icons/icons/type-bold.svg";
-export { default as italicIcon } from "bootstrap-icons/icons/type-italic.svg";
-export { default as underlineIcon } from "bootstrap-icons/icons/type-underline.svg";

ts/editor/icons.ts

@@ -1,14 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-export { default as alertIcon } from "@mdi/svg/svg/alert.svg";
-export { default as chevronDown } from "@mdi/svg/svg/chevron-down.svg";
-export { default as chevronUp } from "@mdi/svg/svg/chevron-up.svg";
-export { default as plainTextIcon } from "@mdi/svg/svg/code-tags.svg";
-export { default as clozeIcon } from "@mdi/svg/svg/contain.svg";
-export { default as richTextIcon } from "@mdi/svg/svg/format-font.svg";
-export { default as stickyIcon } from "@mdi/svg/svg/pin-outline.svg";
-
-// This comment prevents disagreement between eslint-plugin-simple-sort and
-// dprint about whether .. or @ should come first.
-export { default as incrementClozeIcon } from "../icons/contain-plus.svg";

ts/editor/image-overlay/FloatButtons.svelte

@@ -8,9 +8,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { createEventDispatcher } from "svelte";
 
     import ButtonGroup from "$lib/components/ButtonGroup.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
-
+    import {
-    import { floatLeftIcon, floatNoneIcon, floatRightIcon } from "./icons";
+        floatLeftIcon,
+        floatNoneIcon,
+        floatRightIcon,
+    } from "$lib/components/icons";
 
     export let image: HTMLImageElement;
 
@@ -29,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }}
         --border-left-radius="5px"
     >
-        {@html floatLeftIcon}
+        <Icon icon={floatLeftIcon} />
     </IconButton>
 
     <IconButton
@@ -43,7 +47,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             setTimeout(() => dispatch("update"));
         }}
     >
-        {@html floatNoneIcon}
+        <Icon icon={floatNoneIcon} />
     </IconButton>
 
     <IconButton
@@ -55,6 +59,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }}
         --border-right-radius="5px"
     >
-        {@html floatRightIcon}
+        <Icon icon={floatRightIcon} />
     </IconButton>
 </ButtonGroup>

ts/editor/image-overlay/SizeSelect.svelte

@@ -9,9 +9,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Readable } from "svelte/store";
 
     import ButtonGroup from "$lib/components/ButtonGroup.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
-
+    import { sizeActual, sizeClear, sizeMinimized } from "$lib/components/icons";
-    import { sizeActual, sizeClear, sizeMinimized } from "./icons";
 
     export let isSizeConstrained: boolean;
     export let shrinkingDisabled: boolean;
@@ -31,7 +31,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:click={() => dispatch("imagetoggle")}
         --border-left-radius="5px"
     >
-        {@html icon}
+        <Icon {icon} />
     </IconButton>
 
     <IconButton
@@ -40,6 +40,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:click={() => dispatch("imageclear")}
         --border-right-radius="5px"
     >
-        {@html sizeClear}
+        <Icon icon={sizeClear} />
     </IconButton>
 </ButtonGroup>

ts/editor/image-overlay/icons.ts

@@ -1,9 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-export { default as floatLeftIcon } from "@mdi/svg/svg/format-float-left.svg";
-export { default as floatNoneIcon } from "@mdi/svg/svg/format-float-none.svg";
-export { default as floatRightIcon } from "@mdi/svg/svg/format-float-right.svg";
-export { default as sizeClear } from "@mdi/svg/svg/image-remove.svg";
-export { default as sizeActual } from "@mdi/svg/svg/image-size-select-actual.svg";
-export { default as sizeMinimized } from "@mdi/svg/svg/image-size-select-large.svg";

ts/editor/mathjax-overlay/MathjaxButtons.svelte

@@ -8,10 +8,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import ButtonGroup from "$lib/components/ButtonGroup.svelte";
     import ButtonToolbar from "$lib/components/ButtonToolbar.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
+    import { blockIcon, deleteIcon, inlineIcon } from "$lib/components/icons";
 
     import ClozeButtons from "../ClozeButtons.svelte";
-    import { blockIcon, deleteIcon, inlineIcon } from "./icons";
 
     export let isBlock: boolean;
 
@@ -26,7 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             on:click={() => dispatch("setinline")}
             --border-left-radius="5px"
         >
-            {@html inlineIcon}
+            <Icon icon={inlineIcon} />
         </IconButton>
 
         <IconButton
@@ -35,7 +36,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             on:click={() => dispatch("setblock")}
             --border-right-radius="5px"
         >
-            {@html blockIcon}
+            <Icon icon={blockIcon} />
         </IconButton>
     </ButtonGroup>
 
@@ -48,7 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             --border-left-radius="5px"
             --border-right-radius="5px"
         >
-            {@html deleteIcon}
+            <Icon icon={deleteIcon} />
         </IconButton>
     </ButtonGroup>
 </ButtonToolbar>

ts/editor/mathjax-overlay/icons.ts

@@ -1,6 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-export { default as deleteIcon } from "@mdi/svg/svg/delete.svg";
-export { default as inlineIcon } from "@mdi/svg/svg/format-wrap-square.svg";
-export { default as blockIcon } from "@mdi/svg/svg/format-wrap-top-bottom.svg";

ts/lib/components/HelpModal.svelte

@@ -9,6 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Modal from "bootstrap/js/dist/modal";
     import { createEventDispatcher, getContext, onDestroy, onMount } from "svelte";
 
+    import { infoCircle } from "$lib/components/icons";
     import { registerModalClosingHandler } from "$lib/sveltelib/modal-closing";
     import { pageTheme } from "$lib/sveltelib/theme";
 
@@ -16,7 +17,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Col from "./Col.svelte";
     import { modalsKey } from "./context-keys";
     import HelpSection from "./HelpSection.svelte";
-    import { infoCircle } from "./icons";
+    import Icon from "./Icon.svelte";
     import Row from "./Row.svelte";
     import { type HelpItem, HelpItemScheduler } from "./types";
 
@@ -76,7 +77,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <Badge on:click={() => modal.show()} iconSize={125}>
-    {@html infoCircle}
+    <Icon icon={infoCircle} />
 </Badge>
 
 <div

ts/lib/components/Icon.svelte

@@ -0,0 +1,15 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import type { IconData } from "./types";
+
+    export let icon: IconData;
+</script>
+
+{#if import.meta.env}
+    <svelte:component this={icon.component} />
+{:else}
+    {@html icon.url}
+{/if}

ts/lib/components/RevertButton.svelte

@@ -7,10 +7,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { cloneDeep, isEqual as isEqualLodash } from "lodash-es";
     import { getContext } from "svelte";
 
+    import { revertIcon } from "$lib/components/icons";
+
     import Badge from "./Badge.svelte";
     import { touchDeviceKey } from "./context-keys";
     import DropdownItem from "./DropdownItem.svelte";
-    import { revertIcon } from "./icons";
+    import Icon from "./Icon.svelte";
     import Popover from "./Popover.svelte";
     import WithFloating from "./WithFloating.svelte";
 
@@ -61,7 +63,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 }
             }}
         >
-            {@html revertIcon}
+            <Icon icon={revertIcon} />
         </Badge>
     </div>
 
@@ -70,7 +72,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             class={`spinner ${isTouchDevice ? "spin-always" : ""}`}
             on:click={() => revert()}
         >
-            {tr.deckConfigRevertButtonTooltip()}<Badge>{@html revertIcon}</Badge>
+            {tr.deckConfigRevertButtonTooltip()}<Badge iconSize={85}>
+                <Icon icon={revertIcon} />
+            </Badge>
         </DropdownItem>
     </Popover>
 </WithFloating>

ts/lib/components/Select.svelte

@@ -7,9 +7,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { createEventDispatcher, setContext } from "svelte";
     import { writable } from "svelte/store";
 
+    import { chevronDown } from "$lib/components/icons";
+
     import { selectKey } from "./context-keys";
+    import Icon from "./Icon.svelte";
     import IconConstrain from "./IconConstrain.svelte";
-    import { chevronDown } from "./icons";
     import Popover from "./Popover.svelte";
     import SelectOption from "./SelectOption.svelte";
     import WithFloating from "./WithFloating.svelte";
@@ -222,7 +224,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </div>
         <div class="chevron">
             <IconConstrain iconSize={80}>
-                {@html chevronDown}
+                <Icon icon={chevronDown} />
             </IconConstrain>
         </div>
     </div>

ts/lib/components/SpinBox.svelte

@@ -7,8 +7,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { isDesktop } from "@tslib/platform";
     import { tick } from "svelte";
 
+    import { chevronDown, chevronUp } from "$lib/components/icons";
+
+    import Icon from "./Icon.svelte";
     import IconConstrain from "./IconConstrain.svelte";
-    import { chevronDown, chevronUp } from "./icons";
 
     export let value: number;
     export let step = 1;
@@ -121,7 +123,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             }}
         >
             <IconConstrain>
-                {@html chevronDown}
+                <Icon icon={chevronDown} />
             </IconConstrain>
         </div>
         <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -149,7 +151,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             }}
         >
             <IconConstrain>
-                {@html chevronUp}
+                <Icon icon={chevronUp} />
             </IconConstrain>
         </div>
     {/if}

ts/lib/components/icons.ts

@@ -1,61 +1,281 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import hsplitIcon_ from "@mdi/svg/svg/arrow-split-horizontal.svg";
+import Alert_ from "@mdi/svg/svg/alert.svg?component";
-import vsplitIcon_ from "@mdi/svg/svg/arrow-split-vertical.svg";
+import alert_ from "@mdi/svg/svg/alert.svg?url";
-import checkCircle_ from "@mdi/svg/svg/check-circle.svg";
+import AlignHorizontalCenter_ from "@mdi/svg/svg/align-horizontal-center.svg?component";
-import chevronDown_ from "@mdi/svg/svg/chevron-down.svg";
+import alignHorizontalCenter_ from "@mdi/svg/svg/align-horizontal-center.svg?url";
-import chevronLeft_ from "@mdi/svg/svg/chevron-left.svg";
+import AlignHorizontalLeft_ from "@mdi/svg/svg/align-horizontal-left.svg?component";
-import chevronRight_ from "@mdi/svg/svg/chevron-right.svg";
+import alignHorizontalLeft_ from "@mdi/svg/svg/align-horizontal-left.svg?url";
-import chevronUp_ from "@mdi/svg/svg/chevron-up.svg";
+import AlignHorizontalRight_ from "@mdi/svg/svg/align-horizontal-right.svg?component";
-import closeBox_ from "@mdi/svg/svg/close-box.svg";
+import alignHorizontalRight_ from "@mdi/svg/svg/align-horizontal-right.svg?url";
-import dotsIcon_ from "@mdi/svg/svg/dots-vertical.svg";
+import AlignVerticalBottom_ from "@mdi/svg/svg/align-vertical-bottom.svg?component";
-import horizontalHandle_ from "@mdi/svg/svg/drag-horizontal.svg";
+import alignVerticalBottom_ from "@mdi/svg/svg/align-vertical-bottom.svg?url";
-import verticalHandle_ from "@mdi/svg/svg/drag-vertical.svg";
+import AlignVerticalCenter_ from "@mdi/svg/svg/align-vertical-center.svg?component";
-import infoCircle_ from "@mdi/svg/svg/help-circle.svg";
+import alignVerticalCenter_ from "@mdi/svg/svg/align-vertical-center.svg?url";
-import magnifyIcon_ from "@mdi/svg/svg/magnify.svg";
+import AlignVerticalTop_ from "@mdi/svg/svg/align-vertical-top.svg?component";
-import newBox_ from "@mdi/svg/svg/new-box.svg";
+import alignVerticalTop_ from "@mdi/svg/svg/align-vertical-top.svg?url";
-import tagIcon_ from "@mdi/svg/svg/tag-outline.svg";
+import CheckCircle_ from "@mdi/svg/svg/check-circle.svg?component";
-import addTagIcon_ from "@mdi/svg/svg/tag-plus-outline.svg";
+import checkCircle_ from "@mdi/svg/svg/check-circle.svg?url";
-import updateIcon_ from "@mdi/svg/svg/update.svg";
+import ChevronDown_ from "@mdi/svg/svg/chevron-down.svg?component";
-import revertIcon_ from "bootstrap-icons/icons/arrow-counterclockwise.svg";
+import chevronDown_ from "@mdi/svg/svg/chevron-down.svg?url";
-import arrowLeftIcon_ from "bootstrap-icons/icons/arrow-left.svg";
+import ChevronUp_ from "@mdi/svg/svg/chevron-up.svg?component";
-import arrowRightIcon_ from "bootstrap-icons/icons/arrow-right.svg";
+import chevronUp_ from "@mdi/svg/svg/chevron-up.svg?url";
-import minusIcon_ from "bootstrap-icons/icons/dash-lg.svg";
+import CloseBox_ from "@mdi/svg/svg/close-box.svg?component";
-import exclamationIcon_ from "bootstrap-icons/icons/exclamation-circle.svg";
+import closeBox_ from "@mdi/svg/svg/close-box.svg?url";
-import plusIcon_ from "bootstrap-icons/icons/plus-lg.svg";
+import Close_ from "@mdi/svg/svg/close.svg?component";
+import close_ from "@mdi/svg/svg/close.svg?url";
+import CodeTags_ from "@mdi/svg/svg/code-tags.svg?component";
+import PlainText_ from "@mdi/svg/svg/code-tags.svg?component";
+import codeTags_ from "@mdi/svg/svg/code-tags.svg?url";
+import plainText_ from "@mdi/svg/svg/code-tags.svg?url";
+import Cog_ from "@mdi/svg/svg/cog.svg?component";
+import cog_ from "@mdi/svg/svg/cog.svg?url";
+import ColorHelper_ from "@mdi/svg/svg/color-helper.svg?component";
+import colorHelper_ from "@mdi/svg/svg/color-helper.svg?url";
+import Cloze_ from "@mdi/svg/svg/contain.svg?component";
+import cloze_ from "@mdi/svg/svg/contain.svg?url";
+import Copy_ from "@mdi/svg/svg/content-copy.svg?component";
+import copy_ from "@mdi/svg/svg/content-copy.svg?url";
+import CursorDefaultOutline_ from "@mdi/svg/svg/cursor-default-outline.svg?component";
+import cursorDefaultOutline_ from "@mdi/svg/svg/cursor-default-outline.svg?url";
+import DeleteOutline_ from "@mdi/svg/svg/delete-outline.svg?component";
+import deleteOutline_ from "@mdi/svg/svg/delete-outline.svg?url";
+import Delete_ from "@mdi/svg/svg/delete.svg?component";
+import delete_ from "@mdi/svg/svg/delete.svg?url";
+import Dots_ from "@mdi/svg/svg/dots-vertical.svg?component";
+import dots_ from "@mdi/svg/svg/dots-vertical.svg?url";
+import HorizontalHandle_ from "@mdi/svg/svg/drag-horizontal.svg?component";
+import horizontalHandle_ from "@mdi/svg/svg/drag-horizontal.svg?url";
+import VerticalHandle_ from "@mdi/svg/svg/drag-vertical.svg?component";
+import verticalHandle_ from "@mdi/svg/svg/drag-vertical.svg?url";
+import Earth_ from "@mdi/svg/svg/earth.svg?component";
+import earth_ from "@mdi/svg/svg/earth.svg?url";
+import EllipseOutline_ from "@mdi/svg/svg/ellipse-outline.svg?component";
+import ellipseOutline_ from "@mdi/svg/svg/ellipse-outline.svg?url";
+import Eye_ from "@mdi/svg/svg/eye.svg?component";
+import eye_ from "@mdi/svg/svg/eye.svg?url";
+import FormatAlignCenter_ from "@mdi/svg/svg/format-align-center.svg?component";
+import formatAlignCenter_ from "@mdi/svg/svg/format-align-center.svg?url";
+import FormatBold_ from "@mdi/svg/svg/format-bold.svg?component";
+import formatBold_ from "@mdi/svg/svg/format-bold.svg?url";
+import HighlightColor_ from "@mdi/svg/svg/format-color-highlight.svg?component";
+import highlightColor_ from "@mdi/svg/svg/format-color-highlight.svg?url";
+import TextColor_ from "@mdi/svg/svg/format-color-text.svg?component";
+import textColor_ from "@mdi/svg/svg/format-color-text.svg?url";
+import FloatLeft_ from "@mdi/svg/svg/format-float-left.svg?component";
+import floatLeft_ from "@mdi/svg/svg/format-float-left.svg?url";
+import FloatNone_ from "@mdi/svg/svg/format-float-none.svg?component";
+import floatNone_ from "@mdi/svg/svg/format-float-none.svg?url";
+import FloatRight_ from "@mdi/svg/svg/format-float-right.svg?component";
+import floatRight_ from "@mdi/svg/svg/format-float-right.svg?url";
+import RichText_ from "@mdi/svg/svg/format-font.svg?component";
+import richText_ from "@mdi/svg/svg/format-font.svg?url";
+import FormatItalic_ from "@mdi/svg/svg/format-italic.svg?component";
+import formatItalic_ from "@mdi/svg/svg/format-italic.svg?url";
+import Subscript_ from "@mdi/svg/svg/format-subscript.svg?component";
+import subscript_ from "@mdi/svg/svg/format-subscript.svg?url";
+import Superscript_ from "@mdi/svg/svg/format-superscript.svg?component";
+import superscript_ from "@mdi/svg/svg/format-superscript.svg?url";
+import FormatUnderline_ from "@mdi/svg/svg/format-underline.svg?component";
+import formatUnderline_ from "@mdi/svg/svg/format-underline.svg?url";
+import Inline_ from "@mdi/svg/svg/format-wrap-square.svg?component";
+import inline_ from "@mdi/svg/svg/format-wrap-square.svg?url";
+import Block_ from "@mdi/svg/svg/format-wrap-top-bottom.svg?component";
+import block_ from "@mdi/svg/svg/format-wrap-top-bottom.svg?url";
+import Function_ from "@mdi/svg/svg/function-variant.svg?component";
+import function_ from "@mdi/svg/svg/function-variant.svg?url";
+import Group_ from "@mdi/svg/svg/group.svg?component";
+import group_ from "@mdi/svg/svg/group.svg?url";
+import InfoCircle_ from "@mdi/svg/svg/help-circle.svg?component";
+import infoCircle_ from "@mdi/svg/svg/help-circle.svg?url";
+import SizeClear_ from "@mdi/svg/svg/image-remove.svg?component";
+import sizeClear_ from "@mdi/svg/svg/image-remove.svg?url";
+import SizeActual_ from "@mdi/svg/svg/image-size-select-actual.svg?component";
+import sizeActual_ from "@mdi/svg/svg/image-size-select-actual.svg?url";
+import SizeMinimized_ from "@mdi/svg/svg/image-size-select-large.svg?component";
+import sizeMinimized_ from "@mdi/svg/svg/image-size-select-large.svg?url";
+import ZoomReset_ from "@mdi/svg/svg/magnify-expand.svg?component";
+import zoomReset_ from "@mdi/svg/svg/magnify-expand.svg?url";
+import ZoomOut_ from "@mdi/svg/svg/magnify-minus-outline.svg?component";
+import zoomOut_ from "@mdi/svg/svg/magnify-minus-outline.svg?url";
+import ZoomIn_ from "@mdi/svg/svg/magnify-plus-outline.svg?component";
+import zoomIn_ from "@mdi/svg/svg/magnify-plus-outline.svg?url";
+import MagnifyScan_ from "@mdi/svg/svg/magnify-scan.svg?component";
+import magnifyScan_ from "@mdi/svg/svg/magnify-scan.svg?url";
+import Magnify_ from "@mdi/svg/svg/magnify.svg?component";
+import magnify_ from "@mdi/svg/svg/magnify.svg?url";
+import Math_ from "@mdi/svg/svg/math-integral-box.svg?component";
+import math_ from "@mdi/svg/svg/math-integral-box.svg?url";
+import NewBox_ from "@mdi/svg/svg/new-box.svg?component";
+import newBox_ from "@mdi/svg/svg/new-box.svg?url";
+import Paperclip_ from "@mdi/svg/svg/paperclip.svg?component";
+import paperclip_ from "@mdi/svg/svg/paperclip.svg?url";
+import Sticky_ from "@mdi/svg/svg/pin-outline.svg?component";
+import sticky_ from "@mdi/svg/svg/pin-outline.svg?url";
+import RectangleOutline_ from "@mdi/svg/svg/rectangle-outline.svg?component";
+import rectangleOutline_ from "@mdi/svg/svg/rectangle-outline.svg?url";
+import Redo_ from "@mdi/svg/svg/redo.svg?component";
+import redo_ from "@mdi/svg/svg/redo.svg?url";
+import Refresh_ from "@mdi/svg/svg/refresh.svg?component";
+import refresh_ from "@mdi/svg/svg/refresh.svg?url";
+import SelectAll_ from "@mdi/svg/svg/select-all.svg?component";
+import selectAll_ from "@mdi/svg/svg/select-all.svg?url";
+import Square_ from "@mdi/svg/svg/square.svg?component";
+import square_ from "@mdi/svg/svg/square.svg?url";
+import TableRefresh_ from "@mdi/svg/svg/table-refresh.svg?component";
+import tableRefresh_ from "@mdi/svg/svg/table-refresh.svg?url";
+import Tag_ from "@mdi/svg/svg/tag-outline.svg?component";
+import tag_ from "@mdi/svg/svg/tag-outline.svg?url";
+import AddTag_ from "@mdi/svg/svg/tag-plus-outline.svg?component";
+import addTag_ from "@mdi/svg/svg/tag-plus-outline.svg?url";
+import TextBox_ from "@mdi/svg/svg/text-box.svg?component";
+import textBox_ from "@mdi/svg/svg/text-box.svg?url";
+import Undo_ from "@mdi/svg/svg/undo.svg?component";
+import undo_ from "@mdi/svg/svg/undo.svg?url";
+import UnfoldMoreHorizontal_ from "@mdi/svg/svg/unfold-more-horizontal.svg?component";
+import unfoldMoreHorizontal_ from "@mdi/svg/svg/unfold-more-horizontal.svg?url";
+import Ungroup_ from "@mdi/svg/svg/ungroup.svg?component";
+import ungroup_ from "@mdi/svg/svg/ungroup.svg?url";
+import Update_ from "@mdi/svg/svg/update.svg?component";
+import update_ from "@mdi/svg/svg/update.svg?url";
+import VectorPolygonVariant_ from "@mdi/svg/svg/vector-polygon-variant.svg?component";
+import vectorPolygonVariant_ from "@mdi/svg/svg/vector-polygon-variant.svg?url";
+import ViewDashboard_ from "@mdi/svg/svg/view-dashboard.svg?component";
+import viewDashboard_ from "@mdi/svg/svg/view-dashboard.svg?url";
+import Revert_ from "bootstrap-icons/icons/arrow-counterclockwise.svg?component";
+import revert_ from "bootstrap-icons/icons/arrow-counterclockwise.svg?url";
+import ArrowLeft_ from "bootstrap-icons/icons/arrow-left.svg?component";
+import arrowLeft_ from "bootstrap-icons/icons/arrow-left.svg?url";
+import ArrowRight_ from "bootstrap-icons/icons/arrow-right.svg?component";
+import arrowRight_ from "bootstrap-icons/icons/arrow-right.svg?url";
+import Minus_ from "bootstrap-icons/icons/dash-lg.svg?component";
+import minus_ from "bootstrap-icons/icons/dash-lg.svg?url";
+import Eraser_ from "bootstrap-icons/icons/eraser.svg?component";
+import eraser_ from "bootstrap-icons/icons/eraser.svg?url";
+import Exclamation_ from "bootstrap-icons/icons/exclamation-circle.svg?component";
+import exclamation_ from "bootstrap-icons/icons/exclamation-circle.svg?url";
+import JustifyFull_ from "bootstrap-icons/icons/justify.svg?component";
+import justifyFull_ from "bootstrap-icons/icons/justify.svg?url";
+import Ol_ from "bootstrap-icons/icons/list-ol.svg?component";
+import ol_ from "bootstrap-icons/icons/list-ol.svg?url";
+import Ul_ from "bootstrap-icons/icons/list-ul.svg?component";
+import ul_ from "bootstrap-icons/icons/list-ul.svg?url";
+import Mic_ from "bootstrap-icons/icons/mic.svg?component";
+import mic_ from "bootstrap-icons/icons/mic.svg?url";
+import Plus_ from "bootstrap-icons/icons/plus-lg.svg?component";
+import plus_ from "bootstrap-icons/icons/plus-lg.svg?url";
+import JustifyCenter_ from "bootstrap-icons/icons/text-center.svg?component";
+import justifyCenter_ from "bootstrap-icons/icons/text-center.svg?url";
+import Indent_ from "bootstrap-icons/icons/text-indent-left.svg?component";
+import indent_ from "bootstrap-icons/icons/text-indent-left.svg?url";
+import Outdent_ from "bootstrap-icons/icons/text-indent-right.svg?component";
+import outdent_ from "bootstrap-icons/icons/text-indent-right.svg?url";
+import JustifyLeft_ from "bootstrap-icons/icons/text-left.svg?component";
+import justifyLeft_ from "bootstrap-icons/icons/text-left.svg?url";
+import ListOptions_ from "bootstrap-icons/icons/text-paragraph.svg?component";
+import listOptions_ from "bootstrap-icons/icons/text-paragraph.svg?url";
+import JustifyRight_ from "bootstrap-icons/icons/text-right.svg?component";
+import justifyRight_ from "bootstrap-icons/icons/text-right.svg?url";
+import Bold_ from "bootstrap-icons/icons/type-bold.svg?component";
+import bold_ from "bootstrap-icons/icons/type-bold.svg?url";
+import Italic_ from "bootstrap-icons/icons/type-italic.svg?component";
+import italic_ from "bootstrap-icons/icons/type-italic.svg?url";
+import Underline_ from "bootstrap-icons/icons/type-underline.svg?component";
+import underline_ from "bootstrap-icons/icons/type-underline.svg?url";
 
-/* @__PURE__ */
+import IncrementCloze_ from "../../icons/contain-plus.svg?component";
-export function imageLink(url: string): string {
+import incrementCloze_ from "../../icons/contain-plus.svg?url";
-    if (import.meta.env) {
-        // in vite, we need to create the image link ourselves
-        return `<img src="${url}" />`;
-    } else {
-        // in legacy esbuild builds, the url is an image link already
-        return url;
-    }
-}
 
-export const arrowLeftIcon = imageLink(arrowLeftIcon_);
+export const checkCircle = { url: checkCircle_, component: CheckCircle_ };
-export const arrowRightIcon = imageLink(arrowRightIcon_);
+export const chevronDown = { url: chevronDown_, component: ChevronDown_ };
-export const checkCircle = imageLink(checkCircle_);
+export const chevronUp = { url: chevronUp_, component: ChevronUp_ };
-export const chevronDown = imageLink(chevronDown_);
+export const closeBox = { url: closeBox_, component: CloseBox_ };
-export const chevronLeft = imageLink(chevronLeft_);
+export const dotsIcon = { url: dots_, component: Dots_ };
-export const chevronRight = imageLink(chevronRight_);
+export const horizontalHandle = { url: horizontalHandle_, component: HorizontalHandle_ };
-export const chevronUp = imageLink(chevronUp_);
+export const verticalHandle = { url: verticalHandle_, component: VerticalHandle_ };
-export const closeBox = imageLink(closeBox_);
+export const infoCircle = { url: infoCircle_, component: InfoCircle_ };
-export const exclamationIcon = imageLink(exclamationIcon_);
+export const magnifyIcon = { url: magnify_, component: Magnify_ };
-export const horizontalHandle = imageLink(horizontalHandle_);
+export const newBox = { url: newBox_, component: NewBox_ };
-export const hsplitIcon = imageLink(hsplitIcon_);
+export const tagIcon = { url: tag_, component: Tag_ };
-export const infoCircle = imageLink(infoCircle_);
+export const addTagIcon = { url: addTag_, component: AddTag_ };
-export const magnifyIcon = imageLink(magnifyIcon_);
+export const updateIcon = { url: update_, component: Update_ };
-export const minusIcon = imageLink(minusIcon_);
+export const revertIcon = { url: revert_, component: Revert_ };
-export const newBox = imageLink(newBox_);
+export const arrowLeftIcon = { url: arrowLeft_, component: ArrowLeft_ };
-export const plusIcon = imageLink(plusIcon_);
+export const arrowRightIcon = { url: arrowRight_, component: ArrowRight_ };
-export const revertIcon = imageLink(revertIcon_);
+export const minusIcon = { url: minus_, component: Minus_ };
-export const updateIcon = imageLink(updateIcon_);
+export const exclamationIcon = { url: exclamation_, component: Exclamation_ };
-export const verticalHandle = imageLink(verticalHandle_);
+export const plusIcon = { url: plus_, component: Plus_ };
-export const vsplitIcon = imageLink(vsplitIcon_);
+export const alertIcon = { url: alert_, component: Alert_ };
-export const dotsIcon = imageLink(dotsIcon_);
+export const plainTextIcon = { url: plainText_, component: PlainText_ };
-export const tagIcon = imageLink(tagIcon_);
+export const clozeIcon = { url: cloze_, component: Cloze_ };
-export const addTagIcon = imageLink(addTagIcon_);
+export const richTextIcon = { url: richText_, component: RichText_ };
+export const stickyIcon = { url: sticky_, component: Sticky_ };
+export const mathIcon = { url: math_, component: Math_ };
+export const floatLeftIcon = { url: floatLeft_, component: FloatLeft_ };
+export const floatNoneIcon = { url: floatNone_, component: FloatNone_ };
+export const floatRightIcon = { url: floatRight_, component: FloatRight_ };
+export const sizeClear = { url: sizeClear_, component: SizeClear_ };
+export const sizeActual = { url: sizeActual_, component: SizeActual_ };
+export const sizeMinimized = { url: sizeMinimized_, component: SizeMinimized_ };
+export const cogIcon = { url: cog_, component: Cog_ };
+export const colorHelperIcon = { url: colorHelper_, component: ColorHelper_ };
+export const highlightColorIcon = { url: highlightColor_, component: HighlightColor_ };
+export const textColorIcon = { url: textColor_, component: TextColor_ };
+export const subscriptIcon = { url: subscript_, component: Subscript_ };
+export const superscriptIcon = { url: superscript_, component: Superscript_ };
+export const functionIcon = { url: function_, component: Function_ };
+export const paperclipIcon = { url: paperclip_, component: Paperclip_ };
+export const mdiRefresh = { url: refresh_, component: Refresh_ };
+export const mdiTableRefresh = { url: tableRefresh_, component: TableRefresh_ };
+export const mdiViewDashboard = { url: viewDashboard_, component: ViewDashboard_ };
+export const eraserIcon = { url: eraser_, component: Eraser_ };
+export const justifyFullIcon = { url: justifyFull_, component: JustifyFull_ };
+export const olIcon = { url: ol_, component: Ol_ };
+export const ulIcon = { url: ul_, component: Ul_ };
+export const micIcon = { url: mic_, component: Mic_ };
+export const justifyCenterIcon = { url: justifyCenter_, component: JustifyCenter_ };
+export const indentIcon = { url: indent_, component: Indent_ };
+export const outdentIcon = { url: outdent_, component: Outdent_ };
+export const justifyLeftIcon = { url: justifyLeft_, component: JustifyLeft_ };
+export const listOptionsIcon = { url: listOptions_, component: ListOptions_ };
+export const justifyRightIcon = { url: justifyRight_, component: JustifyRight_ };
+export const boldIcon = { url: bold_, component: Bold_ };
+export const italicIcon = { url: italic_, component: Italic_ };
+export const underlineIcon = { url: underline_, component: Underline_ };
+export const deleteIcon = { url: delete_, component: Delete_ };
+export const inlineIcon = { url: inline_, component: Inline_ };
+export const blockIcon = { url: block_, component: Block_ };
+export const mdiAlignHorizontalCenter = { url: alignHorizontalCenter_, component: AlignHorizontalCenter_ };
+export const mdiAlignHorizontalLeft = { url: alignHorizontalLeft_, component: AlignHorizontalLeft_ };
+export const mdiAlignHorizontalRight = { url: alignHorizontalRight_, component: AlignHorizontalRight_ };
+export const mdiAlignVerticalBottom = { url: alignVerticalBottom_, component: AlignVerticalBottom_ };
+export const mdiAlignVerticalCenter = { url: alignVerticalCenter_, component: AlignVerticalCenter_ };
+export const mdiAlignVerticalTop = { url: alignVerticalTop_, component: AlignVerticalTop_ };
+export const mdiClose = { url: close_, component: Close_ };
+export const mdiCodeTags = { url: codeTags_, component: CodeTags_ };
+export const mdiCopy = { url: copy_, component: Copy_ };
+export const mdiCursorDefaultOutline = { url: cursorDefaultOutline_, component: CursorDefaultOutline_ };
+export const mdiDeleteOutline = { url: deleteOutline_, component: DeleteOutline_ };
+export const mdiEllipseOutline = { url: ellipseOutline_, component: EllipseOutline_ };
+export const mdiEye = { url: eye_, component: Eye_ };
+export const mdiFormatAlignCenter = { url: formatAlignCenter_, component: FormatAlignCenter_ };
+export const mdiFormatBold = { url: formatBold_, component: FormatBold_ };
+export const mdiFormatItalic = { url: formatItalic_, component: FormatItalic_ };
+export const mdiFormatUnderline = { url: formatUnderline_, component: FormatUnderline_ };
+export const mdiGroup = { url: group_, component: Group_ };
+export const mdiZoomReset = { url: zoomReset_, component: ZoomReset_ };
+export const mdiZoomOut = { url: zoomOut_, component: ZoomOut_ };
+export const mdiZoomIn = { url: zoomIn_, component: ZoomIn_ };
+export const mdiMagnifyScan = { url: magnifyScan_, component: MagnifyScan_ };
+export const mdiRectangleOutline = { url: rectangleOutline_, component: RectangleOutline_ };
+export const mdiRedo = { url: redo_, component: Redo_ };
+export const mdiSelectAll = { url: selectAll_, component: SelectAll_ };
+export const mdiSquare = { url: square_, component: Square_ };
+export const mdiTextBox = { url: textBox_, component: TextBox_ };
+export const mdiUndo = { url: undo_, component: Undo_ };
+export const mdiUnfoldMoreHorizontal = { url: unfoldMoreHorizontal_, component: UnfoldMoreHorizontal_ };
+export const mdiUngroup = { url: ungroup_, component: Ungroup_ };
+export const mdiVectorPolygonVariant = { url: vectorPolygonVariant_, component: VectorPolygonVariant_ };
+export const incrementClozeIcon = { url: incrementCloze_, component: IncrementCloze_ };
+export const mdiEarth = { url: earth_, component: Earth_ };

ts/lib/components/types.ts

@@ -1,6 +1,8 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import type { ComponentType } from "svelte";
+
 export type Size = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 
@@ -15,3 +17,8 @@ export enum HelpItemScheduler {
     SM2 = 0,
     FSRS = 1,
 }
+
+export type IconData = {
+    url: string;
+    component: ComponentType;
+};

ts/lib/tag-editor/TagDeleteBadge.svelte

@@ -4,13 +4,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import Badge from "$lib/components/Badge.svelte";
-
+    import Icon from "$lib/components/Icon.svelte";
-    import { deleteIcon } from "./icons";
+    import { deleteIcon } from "$lib/components/icons";
 
     let className: string = "";
     export { className as class };
 </script>
 
 <Badge class="d-flex align-items-center ms-1 {className}" on:click iconSize={80}>
-    {@html deleteIcon}
+    <Icon icon={deleteIcon} />
 </Badge>

ts/lib/tag-editor/icons.ts

@@ -1,4 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-export { default as deleteIcon } from "bootstrap-icons/icons/x.svg";

ts/lib/tag-editor/tag-options-button/TagAddButton.svelte

@@ -7,6 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { getPlatformString } from "@tslib/shortcuts";
     import { createEventDispatcher } from "svelte";
 
+    import Icon from "$lib/components/Icon.svelte";
     import IconConstrain from "$lib/components/IconConstrain.svelte";
     import { addTagIcon, tagIcon } from "$lib/components/icons";
     import Shortcut from "$lib/components/Shortcut.svelte";
@@ -34,8 +35,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     on:focus={appendTag}
 >
     <IconConstrain>
-        {@html tagIcon}
+        <Icon icon={tagIcon} />
-        {@html addTagIcon}
+        <Icon icon={addTagIcon} />
     </IconConstrain>
     <span class="tags-info">
         <slot />

ts/lib/tag-editor/tag-options-button/TagsSelectedButton.svelte

@@ -10,6 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { createEventDispatcher, getContext } from "svelte";
 
     import DropdownItem from "$lib/components/DropdownItem.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import IconConstrain from "$lib/components/IconConstrain.svelte";
     import { dotsIcon } from "$lib/components/icons";
     import Popover from "$lib/components/Popover.svelte";
@@ -38,7 +39,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:click={() => (show = !show)}
         on:keydown={onEnterOrSpace(() => (show = !show))}
     >
-        <IconConstrain>{@html dotsIcon}</IconConstrain>
+        <IconConstrain><Icon icon={dotsIcon} /></IconConstrain>
     </div>
 
     <Popover slot="floating">

ts/routes/change-notetype/Alert.svelte

@@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { slide } from "svelte/transition";
 
     import Badge from "$lib/components/Badge.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import { minusIcon, plusIcon } from "$lib/components/icons";
 
     import { MapContext } from "./lib";
@@ -40,7 +41,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             aria-expanded={!collapsed}
         >
             <Badge iconSize={80}>
-                {@html icon}
+                <Icon {icon} />
             </Badge>
             {collapseMsg}
         </div>

ts/routes/change-notetype/NotetypeSelector.svelte

@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import Badge from "$lib/components/Badge.svelte";
     import ButtonToolbar from "$lib/components/ButtonToolbar.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import { arrowLeftIcon, arrowRightIcon } from "$lib/components/icons";
     import LabelButton from "$lib/components/LabelButton.svelte";
     import Select from "$lib/components/Select.svelte";
@@ -29,9 +30,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </LabelButton>
     <Badge iconSize={70}>
         {#if window.getComputedStyle(document.body).direction == "rtl"}
-            {@html arrowLeftIcon}
+            <Icon icon={arrowLeftIcon} />
         {:else}
-            {@html arrowRightIcon}
+            <Icon icon={arrowRightIcon} />
         {/if}
     </Badge>
     <Select class="flex-grow-1" list={options} bind:value {label} />

ts/routes/change-notetype/StickyHeader.svelte

@@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Badge from "$lib/components/Badge.svelte";
     import Col from "$lib/components/Col.svelte";
     import Container from "$lib/components/Container.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import { exclamationIcon } from "$lib/components/icons";
     import Row from "$lib/components/Row.svelte";
     import StickyContainer from "$lib/components/StickyContainer.svelte";
@@ -39,7 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         {heading}
         {#if unused.length > 0}
             <Badge iconSize={80}>
-                {@html exclamationIcon}
+                <Icon icon={exclamationIcon} />
             </Badge>
         {/if}
     </h1>

ts/routes/deck-options/GlobalLabel.svelte

@@ -3,7 +3,23 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import * as tr from "@generated/ftl";
+    import { mdiEarth } from "$lib/components/icons";
+    import Icon from "$lib/components/Icon.svelte";
+
     export let title: string;
 </script>
 
-{title} 🌐
+{title}
+<div class="inline-icon" title={tr.deckConfigAffectsEntireCollection()}>
+    <Icon icon={mdiEarth} />
+</div>
+
+<style lang="scss">
+    .inline-icon {
+        display: inline-block;
+        width: 1em;
+        fill: currentColor;
+        margin: 0.25em;
+    }
+</style>

ts/routes/deck-options/SaveButton.svelte

@@ -12,6 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import DropdownDivider from "$lib/components/DropdownDivider.svelte";
     import DropdownItem from "$lib/components/DropdownItem.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
     import { chevronDown } from "$lib/components/icons";
     import LabelButton from "$lib/components/LabelButton.svelte";
@@ -102,7 +103,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         --border-left-radius={rtl ? "var(--border-radius)" : "0"}
         iconSize={80}
     >
-        {@html chevronDown}
+        <Icon icon={chevronDown} />
     </IconButton>
     <Popover slot="floating">
         <DropdownItem on:click={() => dispatch("add")}>

ts/routes/image-occlusion/Toast.svelte

@@ -3,9 +3,9 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
-
+    import { mdiClose } from "$lib/components/icons";
-    import { mdiClose } from "./icons";
 
     export let type: "success" | "error" = "success";
     export let message;
@@ -20,7 +20,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <div class="toast {type === 'success' ? 'success' : 'error'}">
             {message}
             <IconButton iconSize={96} on:click={closeToast} class="toast-icon">
-                {@html mdiClose}
+                <Icon icon={mdiClose} />
             </IconButton>
         </div>
     </div>

ts/routes/image-occlusion/Toolbar.svelte

@@ -13,12 +13,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Readable } from "svelte/store";
 
     import DropdownItem from "$lib/components/DropdownItem.svelte";
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
+    import {
+        mdiEye,
+        mdiFormatAlignCenter,
+        mdiSquare,
+        mdiViewDashboard,
+    } from "$lib/components/icons";
     import Popover from "$lib/components/Popover.svelte";
     import Shortcut from "$lib/components/Shortcut.svelte";
     import WithFloating from "$lib/components/WithFloating.svelte";
 
-    import { mdiEye, mdiFormatAlignCenter, mdiSquare, mdiViewDashboard } from "./icons";
     import { emitChangeSignal } from "./MaskEditor.svelte";
     import { hideAllGuessOne, ioMaskEditorVisible, textEditingState } from "./store";
     import { drawEllipse, drawPolygon, drawRectangle, drawText } from "./tools/index";
@@ -226,7 +232,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 activeTool = tool.id;
             }}
         >
-            {@html tool.icon}
+            <Icon icon={tool.icon} />
         </IconButton>
         {#if $ioMaskEditorVisible && !$textEditingState}
             <Shortcut
@@ -254,7 +260,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {iconSize}
                 on:click={() => (showFloating = !showFloating)}
             >
-                {@html $hideAllGuessOne ? mdiViewDashboard : mdiSquare}
+                <Icon icon={$hideAllGuessOne ? mdiViewDashboard : mdiSquare} />
             </IconButton>
 
             <Popover slot="floating">
@@ -287,7 +293,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         ? !$undoStack.undoable
                         : !$undoStack.redoable}
                 >
-                    {@html tool.icon}
+                    <Icon icon={tool.icon} />
                 </IconButton>
                 {#if $ioMaskEditorVisible && !$textEditingState}
                     <Shortcut keyCombination={tool.shortcut} on:action={tool.action} />
@@ -308,7 +314,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         tool.action(canvas);
                     }}
                 >
-                    {@html tool.icon}
+                    <Icon icon={tool.icon} />
                 </IconButton>
                 {#if $ioMaskEditorVisible && !$textEditingState}
                     <Shortcut
@@ -334,7 +340,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     makeMaskTransparent(canvas, maksOpacity);
                 }}
             >
-                {@html mdiEye}
+                <Icon icon={mdiEye} />
             </IconButton>
             {#if $ioMaskEditorVisible && !$textEditingState}
                 <Shortcut
@@ -359,7 +365,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         undoStack.onObjectModified();
                     }}
                 >
-                    {@html tool.icon}
+                    <Icon icon={tool.icon} />
                 </IconButton>
                 {#if $ioMaskEditorVisible && !$textEditingState}
                     <Shortcut
@@ -387,7 +393,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         undoStack.onObjectModified();
                     }}
                 >
-                    {@html tool.icon}
+                    <Icon icon={tool.icon} />
                 </IconButton>
                 {#if $ioMaskEditorVisible && !$textEditingState}
                     <Shortcut
@@ -409,7 +415,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     leftPos = e.pageX - 100;
                 }}
             >
-                {@html mdiFormatAlignCenter}
+                <Icon icon={mdiFormatAlignCenter} />
             </IconButton>
         </div>
     </div>
@@ -427,7 +433,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     undoStack.onObjectModified();
                 }}
             >
-                {@html alignTool.icon}
+                <Icon icon={alignTool.icon} />
             </IconButton>
             {#if $ioMaskEditorVisible && !$textEditingState}
                 <Shortcut

ts/routes/image-occlusion/icons.ts

@@ -1,74 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-import mdiAlignHorizontalCenter_ from "@mdi/svg/svg/align-horizontal-center.svg";
-import mdiAlignHorizontalLeft_ from "@mdi/svg/svg/align-horizontal-left.svg";
-import mdiAlignHorizontalRight_ from "@mdi/svg/svg/align-horizontal-right.svg";
-import mdiAlignVerticalBottom_ from "@mdi/svg/svg/align-vertical-bottom.svg";
-import mdiAlignVerticalCenter_ from "@mdi/svg/svg/align-vertical-center.svg";
-import mdiAlignVerticalTop_ from "@mdi/svg/svg/align-vertical-top.svg";
-import mdiChevronDown_ from "@mdi/svg/svg/chevron-down.svg";
-import mdiClose_ from "@mdi/svg/svg/close.svg";
-import mdiCodeTags_ from "@mdi/svg/svg/code-tags.svg";
-import mdiCopy_ from "@mdi/svg/svg/content-copy.svg";
-import mdiCursorDefaultOutline_ from "@mdi/svg/svg/cursor-default-outline.svg";
-import mdiDeleteOutline_ from "@mdi/svg/svg/delete-outline.svg";
-import mdiEllipseOutline_ from "@mdi/svg/svg/ellipse-outline.svg";
-import mdiEye_ from "@mdi/svg/svg/eye.svg";
-import mdiFormatAlignCenter_ from "@mdi/svg/svg/format-align-center.svg";
-import mdiFormatBold_ from "@mdi/svg/svg/format-bold.svg";
-import mdiFormatItalic_ from "@mdi/svg/svg/format-italic.svg";
-import mdiFormatUnderline_ from "@mdi/svg/svg/format-underline.svg";
-import mdiGroup_ from "@mdi/svg/svg/group.svg";
-import mdiZoomReset_ from "@mdi/svg/svg/magnify-expand.svg";
-import mdiZoomOut_ from "@mdi/svg/svg/magnify-minus-outline.svg";
-import mdiZoomIn_ from "@mdi/svg/svg/magnify-plus-outline.svg";
-import mdiMagnifyScan_ from "@mdi/svg/svg/magnify-scan.svg";
-import mdiRectangleOutline_ from "@mdi/svg/svg/rectangle-outline.svg";
-import mdiRedo_ from "@mdi/svg/svg/redo.svg";
-import mdiRefresh_ from "@mdi/svg/svg/refresh.svg";
-import mdiSelectAll_ from "@mdi/svg/svg/select-all.svg";
-import mdiSquare_ from "@mdi/svg/svg/square.svg";
-import mdiTextBox_ from "@mdi/svg/svg/text-box.svg";
-import mdiUndo_ from "@mdi/svg/svg/undo.svg";
-import mdiUnfoldMoreHorizontal_ from "@mdi/svg/svg/unfold-more-horizontal.svg";
-import mdiUngroup_ from "@mdi/svg/svg/ungroup.svg";
-import mdiVectorPolygonVariant_ from "@mdi/svg/svg/vector-polygon-variant.svg";
-import mdiViewDashboard_ from "@mdi/svg/svg/view-dashboard.svg";
-
-import { imageLink } from "$lib/components/icons";
-
-export const mdiAlignHorizontalCenter = imageLink(mdiAlignHorizontalCenter_);
-export const mdiAlignHorizontalLeft = imageLink(mdiAlignHorizontalLeft_);
-export const mdiAlignHorizontalRight = imageLink(mdiAlignHorizontalRight_);
-export const mdiAlignVerticalBottom = imageLink(mdiAlignVerticalBottom_);
-export const mdiAlignVerticalCenter = imageLink(mdiAlignVerticalCenter_);
-export const mdiAlignVerticalTop = imageLink(mdiAlignVerticalTop_);
-export const mdiChevronDown = imageLink(mdiChevronDown_);
-export const mdiClose = imageLink(mdiClose_);
-export const mdiCodeTags = imageLink(mdiCodeTags_);
-export const mdiCopy = imageLink(mdiCopy_);
-export const mdiCursorDefaultOutline = imageLink(mdiCursorDefaultOutline_);
-export const mdiDeleteOutline = imageLink(mdiDeleteOutline_);
-export const mdiEllipseOutline = imageLink(mdiEllipseOutline_);
-export const mdiEye = imageLink(mdiEye_);
-export const mdiFormatAlignCenter = imageLink(mdiFormatAlignCenter_);
-export const mdiFormatBold = imageLink(mdiFormatBold_);
-export const mdiFormatItalic = imageLink(mdiFormatItalic_);
-export const mdiFormatUnderline = imageLink(mdiFormatUnderline_);
-export const mdiGroup = imageLink(mdiGroup_);
-export const mdiZoomReset = imageLink(mdiZoomReset_);
-export const mdiZoomOut = imageLink(mdiZoomOut_);
-export const mdiZoomIn = imageLink(mdiZoomIn_);
-export const mdiMagnifyScan = imageLink(mdiMagnifyScan_);
-export const mdiRectangleOutline = imageLink(mdiRectangleOutline_);
-export const mdiRedo = imageLink(mdiRedo_);
-export const mdiRefresh = imageLink(mdiRefresh_);
-export const mdiSelectAll = imageLink(mdiSelectAll_);
-export const mdiSquare = imageLink(mdiSquare_);
-export const mdiTextBox = imageLink(mdiTextBox_);
-export const mdiUndo = imageLink(mdiUndo_);
-export const mdiUnfoldMoreHorizontal = imageLink(mdiUnfoldMoreHorizontal_);
-export const mdiUngroup = imageLink(mdiUngroup_);
-export const mdiVectorPolygonVariant = imageLink(mdiVectorPolygonVariant_);
-export const mdiViewDashboard = imageLink(mdiViewDashboard_);

ts/routes/image-occlusion/notes-toolbar/MoreTools.svelte

@@ -3,9 +3,10 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
+    import { mdiCodeTags } from "$lib/components/icons";
 
-    import { mdiCodeTags } from "../icons";
     import { changePreviewHTMLView } from "./lib";
 
     export let iconSize;
@@ -27,6 +28,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:click={() => tool.action()}
         tooltip={tool.title}
     >
-        {@html tool.icon}
+        <Icon icon={tool.icon} />
     </IconButton>
 {/each}

ts/routes/image-occlusion/notes-toolbar/TextFormatting.svelte

@@ -5,11 +5,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "@generated/ftl";
 
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
+    import {
+        mdiFormatBold,
+        mdiFormatItalic,
+        mdiFormatUnderline,
+    } from "$lib/components/icons";
     import { execCommand } from "$lib/domlib";
 
-    import { mdiFormatBold, mdiFormatItalic, mdiFormatUnderline } from "../icons";
-
     export let iconSize;
 
     const textFormatting = [
@@ -49,7 +53,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             textFormat(tool);
         }}
     >
-        {@html tool.icon}
+        <Icon icon={tool.icon} />
     </IconButton>
 {/each}
 

ts/routes/image-occlusion/tools/more-tools.ts

@@ -18,7 +18,8 @@ import {
     mdiZoomIn,
     mdiZoomOut,
     mdiZoomReset,
-} from "../icons";
+} from "$lib/components/icons";
+
 import { deleteItem, duplicateItem, groupShapes, selectAllShapes, unGroupShapes } from "./lib";
 import {
     alignBottomKeyCombination,

ts/routes/image-occlusion/tools/tool-buttons.ts

@@ -9,7 +9,8 @@ import {
     mdiRectangleOutline,
     mdiTextBox,
     mdiVectorPolygonVariant,
-} from "../icons";
+} from "$lib/components/icons";
+
 import {
     cursorKeyCombination,
     ellipseKeyCombination,

ts/routes/image-occlusion/tools/tool-undo-redo.ts

@@ -5,7 +5,8 @@ import * as tr from "@generated/ftl";
 import { fabric } from "fabric";
 import { writable } from "svelte/store";
 
-import { mdiRedo, mdiUndo } from "../icons";
+import { mdiRedo, mdiUndo } from "$lib/components/icons";
+
 import { emitChangeSignal } from "../MaskEditor.svelte";
 import { redoKeyCombination, undoKeyCombination } from "./shortcuts";
 

ts/routes/import-page/DetailsTable.svelte

@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "@generated/ftl";
 
+    import Icon from "$lib/components/Icon.svelte";
     import IconButton from "$lib/components/IconButton.svelte";
     import { magnifyIcon } from "$lib/components/icons";
     import VirtualTable from "$lib/components/VirtualTable.svelte";
@@ -58,7 +59,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             showInBrowser([rows[index].note]);
                         }}
                     >
-                        {@html magnifyIcon}
+                        <Icon icon={magnifyIcon} />
                     </IconButton>
                 </td>
             </tr>

ts/routes/import-page/QueueSummary.svelte

@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "@generated/ftl";
 
+    import Icon from "$lib/components/Icon.svelte";
     import IconConstrain from "$lib/components/IconConstrain.svelte";
 
     import { showInBrowser } from "./lib";
@@ -23,7 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 {#if notes.length}
     <li>
         <IconConstrain>
-            {@html summary.icon}
+            <Icon icon={summary.icon} />
         </IconConstrain>
         {summary.summaryTemplate({ count: notes.length })}
         {#if summary.canBrowse}

ts/routes/import-page/types.ts

@@ -3,6 +3,8 @@
 
 import type { ImportResponse_Note } from "@generated/anki/import_export_pb";
 
+import type { IconData } from "$lib/components/types";
+
 export type LogQueue = {
     notes: ImportResponse_Note[];
     reason: string;
@@ -13,7 +15,7 @@ export type SummarizedLogQueues = {
     action: string;
     summaryTemplate: (args: { count: number }) => string;
     canBrowse: boolean;
-    icon: unknown;
+    icon: IconData;
 };
 
 export type NoteRow = {

ts/src/app.d.ts

@@ -1,3 +1,5 @@
+import "@poppanator/sveltekit-svg/dist/svg";
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {

ts/vite.config.ts

@@ -1,5 +1,6 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+import svg from "@poppanator/sveltekit-svg";
 import { sveltekit } from "@sveltejs/kit/vite";
 import { realpathSync } from "fs";
 import { defineConfig } from "vite";
@@ -17,7 +18,7 @@ const configure = (proxy: any, _options: any) => {
 };
 
 export default defineConfig({
-    plugins: [sveltekit()],
+    plugins: [sveltekit(), svg({})],
     test: {
         include: ["**/*.{test,spec}.{js,ts}"],
         cache: {

yarn.lock

@@ -450,11 +450,27 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.24.tgz#58601079e11784d20f82d0585865bb42305c4df3"
   integrity sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==
 
+"@poppanator/sveltekit-svg@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@poppanator/sveltekit-svg/-/sveltekit-svg-4.2.1.tgz#14de2a7701343e951aff3b347f2548f9936daa0d"
+  integrity sha512-w7jl4EVOOF+X+uv2BEUiMDJwds+GfbczwGpcS0+rsjIsKYmqmwMi4ts3bVZR9ZvdFHWy5rS84U+pSBClz6cbBg==
+  dependencies:
+    "@rollup/pluginutils" "^5.1.0"
+
 "@popperjs/core@^2.11.8", "@popperjs/core@^2.9.2":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@rollup/pluginutils@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
+  integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
 "@rollup/rollup-android-arm-eabi@4.9.6":
   version "4.9.6"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.6.tgz#66b8d9cb2b3a474d115500f9ebaf43e2126fe496"
@@ -578,6 +594,11 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
+"@trysound/sax@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
+  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
+
 "@types/bootstrap@^5.0.12":
   version "5.2.10"
   resolved "https://registry.yarnpkg.com/@types/bootstrap/-/bootstrap-5.2.10.tgz#58506463bccc6602bc051487ad8d3a6458f94c6c"
@@ -1273,6 +1294,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
 bootstrap-icons@^1.10.5:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz#03f9cb754ec005c52f9ee616e2e84a82cab3084b"
@@ -1453,7 +1479,7 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@7:
+commander@7, commander@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
@@ -1484,6 +1510,17 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.1.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
+    nth-check "^2.0.1"
+
 css-tree@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
@@ -1492,11 +1529,31 @@ css-tree@^2.3.1:
     mdn-data "2.0.30"
     source-map-js "^1.0.1"
 
+css-tree@~2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.2.1.tgz#36115d382d60afd271e377f9c5f67d02bd48c032"
+  integrity sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==
+  dependencies:
+    mdn-data "2.0.28"
+    source-map-js "^1.0.1"
+
+css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+csso@^5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-5.0.5.tgz#f9b7fe6cc6ac0b7d90781bb16d5e9874303e2ca6"
+  integrity sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==
+  dependencies:
+    css-tree "~2.2.0"
+
 cssom@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
@@ -1879,6 +1936,20 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
 domexception@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673"
@@ -1886,6 +1957,22 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
+domutils@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 dprint@=0.35.3:
   version "0.35.3"
   resolved "https://registry.yarnpkg.com/dprint/-/dprint-0.35.3.tgz#be89ff5e76b46c21d5db84015ee9232e82e9bc14"
@@ -1914,6 +2001,11 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+entities@^4.2.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 es-abstract@^1.22.1:
   version "1.22.3"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.3.tgz#48e79f5573198de6dee3589195727f4f74bc4f32"
@@ -2201,11 +2293,6 @@ eslint-plugin-import@^2.25.4:
     semver "^6.3.1"
     tsconfig-paths "^3.15.0"
 
-eslint-plugin-simple-import-sort@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-10.0.0.tgz#cc4ceaa81ba73252427062705b64321946f61351"
-  integrity sha512-AeTvO9UCMSNzIHRkg8S6c3RPy5YEwKWSQPx3DYghLedo2ZQxowPFLGDN1AZ2evfg6r6mjBSZSLxLFsWSu3acsw==
-
 eslint-plugin-svelte@^2:
   version "2.35.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-svelte/-/eslint-plugin-svelte-2.35.1.tgz#7b1e3c263b09dbc9293c25fe02d03d309725d2b9"
@@ -2332,6 +2419,11 @@ estraverse@^5.1.0, estraverse@^5.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
 estree-walker@^3.0.0, estree-walker@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-3.0.3.tgz#67c3e549ec402a487b4fc193d1953a524752340d"
@@ -3162,6 +3254,11 @@ mathjax@^3.1.2:
   resolved "https://registry.yarnpkg.com/mathjax/-/mathjax-3.2.2.tgz#c754d7b46a679d7f3fa03543d6b8bf124ddf9f6b"
   integrity sha512-Bt+SSVU8eBG27zChVewOicYs7Xsdt40qm4+UpHyX7k0/O9NliPc+x77k1/FEsPsjKPZGJvtRZM1vO+geW0OhGw==
 
+mdn-data@2.0.28:
+  version "2.0.28"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.28.tgz#5ec48e7bef120654539069e1ae4ddc81ca490eba"
+  integrity sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==
+
 mdn-data@2.0.30:
   version "2.0.30"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
@@ -3327,6 +3424,13 @@ npm-run-path@^5.1.0:
   dependencies:
     path-key "^4.0.0"
 
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
 nwsapi@^2.2.0:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.7.tgz#738e0707d3128cb750dddcfe90e4610482df0f30"
@@ -4133,6 +4237,19 @@ svelte@^4.0.1:
     magic-string "^0.30.4"
     periscopic "^3.1.0"
 
+svgo@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-3.2.0.tgz#7a5dff2938d8c6096e00295c2390e8e652fa805d"
+  integrity sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==
+  dependencies:
+    "@trysound/sax" "0.2.0"
+    commander "^7.2.0"
+    css-select "^5.1.0"
+    css-tree "^2.3.1"
+    css-what "^6.1.0"
+    csso "^5.0.5"
+    picocolors "^1.0.0"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"