diff options
| author | Josh Kingsley <josh@joshkingsley.me> | 2025-11-01 15:52:38 +0200 |
|---|---|---|
| committer | Josh Kingsley <josh@joshkingsley.me> | 2025-11-01 15:52:38 +0200 |
| commit | dad5b47f0bb480532043df8d488f5609f731b00d (patch) | |
| tree | 074bc0ba37578fd4ea5bf64a66ba9c730353ee9b | |
| parent | a472b004fb6470277541d763799cf42ae5e996b4 (diff) | |
feat(web): add icons
| -rw-r--r-- | web/src/components/icons/index.ts | 19 | ||||
| -rw-r--r-- | web/src/components/icons/svgs/minus16.svg | 3 | ||||
| -rw-r--r-- | web/src/components/icons/svgs/plus16.svg | 3 |
3 files changed, 25 insertions, 0 deletions
diff --git a/web/src/components/icons/index.ts b/web/src/components/icons/index.ts new file mode 100644 index 0000000..5731026 --- /dev/null +++ b/web/src/components/icons/index.ts @@ -0,0 +1,19 @@ +import plus16 from "./svgs/plus16.svg?raw"; +import minus16 from "./svgs/minus16.svg?raw"; + +function makeIconFactory(source: string) { + return (attrs?: object): SVGElement => { + const parser = new DOMParser(); + const doc = parser.parseFromString(source, "image/svg+xml"); + const svg = doc.documentElement as unknown as SVGElement; + + if (attrs) { + Object.entries(attrs).forEach(([k, v]) => svg.setAttribute(k, v)); + } + + return svg; + }; +} + +export const plus16Icon = makeIconFactory(plus16); +export const minus16Icon = makeIconFactory(minus16); diff --git a/web/src/components/icons/svgs/minus16.svg b/web/src/components/icons/svgs/minus16.svg new file mode 100644 index 0000000..d77dcfc --- /dev/null +++ b/web/src/components/icons/svgs/minus16.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4"> + <path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" /> +</svg> diff --git a/web/src/components/icons/svgs/plus16.svg b/web/src/components/icons/svgs/plus16.svg new file mode 100644 index 0000000..1d7b023 --- /dev/null +++ b/web/src/components/icons/svgs/plus16.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4"> + <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" /> +</svg> |
