diff --git a/playground/src/github.svg b/playground/src/github.svg
deleted file mode 100644
index 44e5855..0000000
--- a/playground/src/github.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/playground/src/github_light.svg b/playground/src/github_light.svg
deleted file mode 100644
index 43d9851..0000000
--- a/playground/src/github_light.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/playground/src/main.ts b/playground/src/main.ts
index 9c899f8..d0fa026 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -16,12 +16,6 @@ import { deflate } from "./deflate.ts";
import { inflate } from "./inflate.ts";
import { IPC } from "./ipc.ts";
import helpText from "./help.md?raw";
-import github from "./github.svg"
-import github_light from "./github_light.svg"
-import share from "./share.svg"
-import share_light from "./share_light.svg"
-import play from "./play.svg"
-import play_light from "./play_light.svg"
import { basicSetup, EditorView } from "codemirror";
import {Compartment, EditorState} from "@codemirror/state";
import { javascript } from "@codemirror/lang-javascript";
@@ -406,17 +400,8 @@ preload.then(() => {
}
});
-const icons: Record
= {
- 'play-dark': play,
- 'play-light': play_light,
- 'share-dark': share,
- 'share-light': share_light,
-};
-
function Icon({name}: {name: string}) {
- let dark = state.dark.value ? 'dark' : 'light'
- let src = icons[name + '-' + dark];
- return h('img', {src});
+ return h('svg', {'class':'icon'}, h('use', {href:`#${name}`}))
}
function EditWrap() {
@@ -444,11 +429,12 @@ function EditWrap() {
h("option", { value: "" }, "-- load sample --"),
options
),
- h("a", { href: 'https://github.com/dunhamsteve/newt', target: '_blank', title: "github" }, h('img', {src: state.dark.value ? github : github_light})),
+ // h("a", { href: 'https://github.com/dunhamsteve/newt', target: '_blank', title: "github" }, h('img', {src: state.dark.value ? github : github_light})),
+ h("a", { href: 'https://github.com/dunhamsteve/newt', target: '_blank', title: "github" }, h('svg', {'class':'icon'}, h('use', {href:'#github'}))),
h("div", { style: { flex: "1 1" } }),
h("div", {},
- h("button", { onClick: copyToClipboard, title: "copy url" }, h('img', {src: state.dark.value ? share : share_light})),
- h("button", { onClick: runOutput, title: "run program" }, h('img', {src: state.dark.value ? play : play_light})),
+ h("button", { onClick: copyToClipboard, title: "copy url" }, h('svg', {'class':'icon'}, h('use', {href:'#share'}))),
+ h("button", { onClick: runOutput, title: "run program" }, h('svg', {'class':'icon'}, h('use', {href:'#play'}))),
)
),
h("div", { className: "tabBody" }, h(Editor, { initialValue: value }))
diff --git a/playground/src/play.svg b/playground/src/play.svg
deleted file mode 100644
index 965be2c..0000000
--- a/playground/src/play.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/playground/src/play_light.svg b/playground/src/play_light.svg
deleted file mode 100644
index 47a9e72..0000000
--- a/playground/src/play_light.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/playground/src/share.svg b/playground/src/share.svg
deleted file mode 100644
index 11c547d..0000000
--- a/playground/src/share.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/playground/src/share_light.svg b/playground/src/share_light.svg
deleted file mode 100644
index a3e5cc9..0000000
--- a/playground/src/share_light.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/playground/style.css b/playground/style.css
index 39e73cc..bf72eab 100644
--- a/playground/style.css
+++ b/playground/style.css
@@ -15,7 +15,11 @@ svg.icon path {
a>img {
width: 20px;
}
-
+svg.icon {
+ color: var(--text-color);
+ width: 24px;
+ height: 24px;
+}
@media (prefers-color-scheme: dark) {
:root {
--tab-select-color: #eee;