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.
2024-04-24 03:37:31 +02:00 · 2024-04-24 03:37:31 +02:00 · 790c52f012
commit 790c52f012
parent f0f9535200
62 changed files with 627 additions and 334 deletions
--- a/.eslintrc.cjs
+++ b/.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",
--- a/package.json
+++ b/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",
-        "hammerjs": "^2.0.8"
+        "mathjax": "^3.1.2"
    },
    "resolutions": {
        "canvas": "npm:empty-npm-package"
--- a/ts/editable/icons.ts
+++ b/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";
--- a/ts/editable/mathjax.ts
+++ b/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();

--- a/ts/editor/ClozeButtons.svelte
+++ b/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} />
--- a/ts/editor/CollapseBadge.svelte
+++ b/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 { chevronDown } from "./icons";
+    import Icon from "$lib/components/Icon.svelte";
+    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">
--- a/ts/editor/NoteEditor.svelte
+++ b/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>
--- a/ts/editor/PlainTextBadge.svelte
+++ b/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>

--- a/ts/editor/RichTextBadge.svelte
+++ b/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>

--- a/ts/editor/StickyBadge.svelte
+++ b/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>

--- a/ts/editor/editor-toolbar/BlockButtons.svelte
+++ b/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>
--- a/ts/editor/editor-toolbar/BoldButton.svelte
+++ b/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>
--- a/ts/editor/editor-toolbar/HighlightColorButton.svelte
+++ b/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}
-        {@html colorHelperIcon}
+        <Icon icon={highlightColorIcon} />
+        <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) => {
--- a/ts/editor/editor-toolbar/ImageOcclusionButton.svelte
+++ b/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>
--- a/ts/editor/editor-toolbar/ItalicButton.svelte
+++ b/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>
--- a/ts/editor/editor-toolbar/LatexButton.svelte
+++ b/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">
--- a/ts/editor/editor-toolbar/OptionsButton.svelte
+++ b/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">
--- a/ts/editor/editor-toolbar/RemoveFormatButton.svelte
+++ b/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">
--- a/ts/editor/editor-toolbar/SubscriptButton.svelte
+++ b/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>
--- a/ts/editor/editor-toolbar/SuperscriptButton.svelte
+++ b/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>
--- a/ts/editor/editor-toolbar/TemplateButtons.svelte
+++ b/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}
--- a/ts/editor/editor-toolbar/TextColorButton.svelte
+++ b/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}
-        {@html colorHelperIcon}
+        <Icon icon={textColorIcon} />
+        <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}
--- a/ts/editor/editor-toolbar/UnderlineButton.svelte
+++ b/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>
--- a/ts/editor/editor-toolbar/WithColorHelper.svelte
+++ b/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;

--- a/ts/editor/editor-toolbar/icons.ts
+++ b/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";
--- a/ts/editor/icons.ts
+++ b/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";
--- a/ts/editor/image-overlay/FloatButtons.svelte
+++ b/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 { floatLeftIcon, floatNoneIcon, floatRightIcon } from "./icons";
+    import {
+        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>
--- a/ts/editor/image-overlay/SizeSelect.svelte
+++ b/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 "./icons";
+    import { sizeActual, sizeClear, sizeMinimized } from "$lib/components/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>
--- a/ts/editor/image-overlay/icons.ts
+++ b/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";
--- a/ts/editor/mathjax-overlay/MathjaxButtons.svelte
+++ b/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>
--- a/ts/editor/mathjax-overlay/icons.ts
+++ b/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";
--- a/ts/image-occlusion/icons.ts
+++ b/ts/image-occlusion/icons.ts
--- a/ts/lib/components/HelpModal.svelte
+++ b/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
--- a/ts/lib/components/Icon.svelte
+++ b/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}
--- a/ts/lib/components/RevertButton.svelte
+++ b/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>
--- a/ts/lib/components/Select.svelte
+++ b/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>
--- a/ts/lib/components/SpinBox.svelte
+++ b/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}
--- a/ts/lib/components/icons.ts
+++ b/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 vsplitIcon_ from "@mdi/svg/svg/arrow-split-vertical.svg";
-import checkCircle_ from "@mdi/svg/svg/check-circle.svg";
-import chevronDown_ from "@mdi/svg/svg/chevron-down.svg";
-import chevronLeft_ from "@mdi/svg/svg/chevron-left.svg";
-import chevronRight_ from "@mdi/svg/svg/chevron-right.svg";
-import chevronUp_ from "@mdi/svg/svg/chevron-up.svg";
-import closeBox_ from "@mdi/svg/svg/close-box.svg";
-import dotsIcon_ from "@mdi/svg/svg/dots-vertical.svg";
-import horizontalHandle_ from "@mdi/svg/svg/drag-horizontal.svg";
-import verticalHandle_ from "@mdi/svg/svg/drag-vertical.svg";
-import infoCircle_ from "@mdi/svg/svg/help-circle.svg";
-import magnifyIcon_ from "@mdi/svg/svg/magnify.svg";
-import newBox_ from "@mdi/svg/svg/new-box.svg";
-import tagIcon_ from "@mdi/svg/svg/tag-outline.svg";
-import addTagIcon_ from "@mdi/svg/svg/tag-plus-outline.svg";
-import updateIcon_ from "@mdi/svg/svg/update.svg";
-import revertIcon_ from "bootstrap-icons/icons/arrow-counterclockwise.svg";
-import arrowLeftIcon_ from "bootstrap-icons/icons/arrow-left.svg";
-import arrowRightIcon_ from "bootstrap-icons/icons/arrow-right.svg";
-import minusIcon_ from "bootstrap-icons/icons/dash-lg.svg";
-import exclamationIcon_ from "bootstrap-icons/icons/exclamation-circle.svg";
-import plusIcon_ from "bootstrap-icons/icons/plus-lg.svg";
+import Alert_ from "@mdi/svg/svg/alert.svg?component";
+import alert_ from "@mdi/svg/svg/alert.svg?url";
+import AlignHorizontalCenter_ from "@mdi/svg/svg/align-horizontal-center.svg?component";
+import alignHorizontalCenter_ from "@mdi/svg/svg/align-horizontal-center.svg?url";
+import AlignHorizontalLeft_ from "@mdi/svg/svg/align-horizontal-left.svg?component";
+import alignHorizontalLeft_ from "@mdi/svg/svg/align-horizontal-left.svg?url";
+import AlignHorizontalRight_ from "@mdi/svg/svg/align-horizontal-right.svg?component";
+import alignHorizontalRight_ from "@mdi/svg/svg/align-horizontal-right.svg?url";
+import AlignVerticalBottom_ from "@mdi/svg/svg/align-vertical-bottom.svg?component";
+import alignVerticalBottom_ from "@mdi/svg/svg/align-vertical-bottom.svg?url";
+import AlignVerticalCenter_ from "@mdi/svg/svg/align-vertical-center.svg?component";
+import alignVerticalCenter_ from "@mdi/svg/svg/align-vertical-center.svg?url";
+import AlignVerticalTop_ from "@mdi/svg/svg/align-vertical-top.svg?component";
+import alignVerticalTop_ from "@mdi/svg/svg/align-vertical-top.svg?url";
+import CheckCircle_ from "@mdi/svg/svg/check-circle.svg?component";
+import checkCircle_ from "@mdi/svg/svg/check-circle.svg?url";
+import ChevronDown_ from "@mdi/svg/svg/chevron-down.svg?component";
+import chevronDown_ from "@mdi/svg/svg/chevron-down.svg?url";
+import ChevronUp_ from "@mdi/svg/svg/chevron-up.svg?component";
+import chevronUp_ from "@mdi/svg/svg/chevron-up.svg?url";
+import CloseBox_ from "@mdi/svg/svg/close-box.svg?component";
+import closeBox_ from "@mdi/svg/svg/close-box.svg?url";
+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__ */
-export function imageLink(url: string): string {
-    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;
-    }
-}
+import IncrementCloze_ from "../../icons/contain-plus.svg?component";
+import incrementCloze_ from "../../icons/contain-plus.svg?url";

-export const arrowLeftIcon = imageLink(arrowLeftIcon_);
-export const arrowRightIcon = imageLink(arrowRightIcon_);
-export const checkCircle = imageLink(checkCircle_);
-export const chevronDown = imageLink(chevronDown_);
-export const chevronLeft = imageLink(chevronLeft_);
-export const chevronRight = imageLink(chevronRight_);
-export const chevronUp = imageLink(chevronUp_);
-export const closeBox = imageLink(closeBox_);
-export const exclamationIcon = imageLink(exclamationIcon_);
-export const horizontalHandle = imageLink(horizontalHandle_);
-export const hsplitIcon = imageLink(hsplitIcon_);
-export const infoCircle = imageLink(infoCircle_);
-export const magnifyIcon = imageLink(magnifyIcon_);
-export const minusIcon = imageLink(minusIcon_);
-export const newBox = imageLink(newBox_);
-export const plusIcon = imageLink(plusIcon_);
-export const revertIcon = imageLink(revertIcon_);
-export const updateIcon = imageLink(updateIcon_);
-export const verticalHandle = imageLink(verticalHandle_);
-export const vsplitIcon = imageLink(vsplitIcon_);
-export const dotsIcon = imageLink(dotsIcon_);
-export const tagIcon = imageLink(tagIcon_);
-export const addTagIcon = imageLink(addTagIcon_);
+export const checkCircle = { url: checkCircle_, component: CheckCircle_ };
+export const chevronDown = { url: chevronDown_, component: ChevronDown_ };
+export const chevronUp = { url: chevronUp_, component: ChevronUp_ };
+export const closeBox = { url: closeBox_, component: CloseBox_ };
+export const dotsIcon = { url: dots_, component: Dots_ };
+export const horizontalHandle = { url: horizontalHandle_, component: HorizontalHandle_ };
+export const verticalHandle = { url: verticalHandle_, component: VerticalHandle_ };
+export const infoCircle = { url: infoCircle_, component: InfoCircle_ };
+export const magnifyIcon = { url: magnify_, component: Magnify_ };
+export const newBox = { url: newBox_, component: NewBox_ };
+export const tagIcon = { url: tag_, component: Tag_ };
+export const addTagIcon = { url: addTag_, component: AddTag_ };
+export const updateIcon = { url: update_, component: Update_ };
+export const revertIcon = { url: revert_, component: Revert_ };
+export const arrowLeftIcon = { url: arrowLeft_, component: ArrowLeft_ };
+export const arrowRightIcon = { url: arrowRight_, component: ArrowRight_ };
+export const minusIcon = { url: minus_, component: Minus_ };
+export const exclamationIcon = { url: exclamation_, component: Exclamation_ };
+export const plusIcon = { url: plus_, component: Plus_ };
+export const alertIcon = { url: alert_, component: Alert_ };
+export const plainTextIcon = { url: plainText_, component: PlainText_ };
+export const clozeIcon = { url: cloze_, component: Cloze_ };
+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_ };
--- a/ts/lib/components/types.ts
+++ b/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;
+};
--- a/ts/lib/tag-editor/TagDeleteBadge.svelte
+++ b/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 { deleteIcon } from "./icons";
+    import Icon from "$lib/components/Icon.svelte";
+    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>
--- a/ts/lib/tag-editor/icons.ts
+++ b/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";
--- a/ts/lib/tag-editor/tag-options-button/TagAddButton.svelte
+++ b/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}
-        {@html addTagIcon}
+        <Icon icon={tagIcon} />
+        <Icon icon={addTagIcon} />
    </IconConstrain>
    <span class="tags-info">
        <slot />
--- a/ts/lib/tag-editor/tag-options-button/TagsSelectedButton.svelte
+++ b/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">
--- a/ts/routes/change-notetype/Alert.svelte
+++ b/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>
--- a/ts/routes/change-notetype/NotetypeSelector.svelte
+++ b/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} />
--- a/ts/routes/change-notetype/StickyHeader.svelte
+++ b/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>
--- a/ts/routes/deck-options/GlobalLabel.svelte
+++ b/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>
--- a/ts/routes/deck-options/SaveButton.svelte
+++ b/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")}>
--- a/ts/routes/image-occlusion/Toast.svelte
+++ b/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 "./icons";
+    import { mdiClose } from "$lib/components/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>
--- a/ts/routes/image-occlusion/Toolbar.svelte
+++ b/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
--- a/ts/routes/image-occlusion/icons.ts
+++ b/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_);
--- a/ts/routes/image-occlusion/notes-toolbar/MoreTools.svelte
+++ b/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}
--- a/ts/routes/image-occlusion/notes-toolbar/TextFormatting.svelte
+++ b/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}

--- a/ts/routes/image-occlusion/tools/more-tools.ts
+++ b/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,
--- a/ts/routes/image-occlusion/tools/tool-buttons.ts
+++ b/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,
--- a/ts/routes/image-occlusion/tools/tool-undo-redo.ts
+++ b/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";

--- a/ts/routes/import-page/DetailsTable.svelte
+++ b/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>
--- a/ts/routes/import-page/QueueSummary.svelte
+++ b/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}
--- a/ts/routes/import-page/types.ts
+++ b/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 = {
--- a/ts/src/app.d.ts
+++ b/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 {
--- a/ts/vite.config.ts
+++ b/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: {
--- a/yarn.lock
+++ b/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"