From 997adfd04c57f952e07ffee7d3e341a8228b9408 Mon Sep 17 00:00:00 2001 From: Steve Dunham Date: Sun, 11 Jan 2026 09:37:58 -0800 Subject: [PATCH] handle icons differently in playground --- playground/index.html | 5 +++++ playground/src/github.svg | 1 - playground/src/github_light.svg | 1 - playground/src/main.ts | 24 +++++------------------- playground/src/play.svg | 1 - playground/src/play_light.svg | 1 - playground/src/share.svg | 1 - playground/src/share_light.svg | 1 - playground/style.css | 6 +++++- 9 files changed, 15 insertions(+), 26 deletions(-) delete mode 100644 playground/src/github.svg delete mode 100644 playground/src/github_light.svg delete mode 100644 playground/src/play.svg delete mode 100644 playground/src/play_light.svg delete mode 100644 playground/src/share.svg delete mode 100644 playground/src/share_light.svg diff --git a/playground/index.html b/playground/index.html index 7ee3ffc..9b06868 100644 --- a/playground/index.html +++ b/playground/index.html @@ -7,6 +7,11 @@ Newt Playground + + + + +
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;