init with working gulp file and all needed dependencies. Next step to actually...

init with working gulp file and all needed dependencies. Next step to actually create a working test site with the created TypeScript definitions

src/icons/slider.svg

+<svg viewBox="0 0 100 50"
+  xmlns="http://www.w3.org/2000/svg">
+<line stroke-linecap="round" x1="20" y1="25" x2="80" y2="25" stroke="#bdbdbd" stroke-width="30"/>
+<circle cx="25" cy="25" r="23" stroke-width="3" fill="#ececec"/>
+</svg>
\ No newline at end of file

src/icons/toc.svg

+<svg viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
+<line x1="5" y1="10" x2="5" y2="95" stroke-dasharray="15, 15" style="stroke:black;stroke-width:20"/>
+<line x1="25" y1="17.5" x2="100" y2="17.5" style="stroke:black;stroke-width:10"/>
+<line x1="25" y1="47.5" x2="100" y2="47.5" style="stroke:black;stroke-width:10"/>
+<line x1="25" y1="77.5" x2="100" y2="77.5" style="stroke:black;stroke-width:10"/>
+</svg>
\ No newline at end of file

src/ts/icon-definitions.ts

+export const all_slides_icon = `<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
<line x1="5" y1="5" x2="5" y2="95" style="stroke-width:8"/>
<line x1="95" y1="5" x2="95" y2="95" style="stroke-width:8"/>
<text x="50" y="50" dominant-baseline="middle" text-anchor="middle" font-size="100">n</text>
</svg>`;
+
+export const font_minus_icon = `<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
<text x="50" y="95" text-anchor="middle" font-size="80">A</text>
<text x="60" y="45" font-weight="bold" font-size="55">-</text>
</svg>`;
+
+export const font_plus_icon = `<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
<text x="50" y="95" text-anchor="middle" font-size="100">A</text>
<text x="55" y="40" font-weight="bold" font-size="55">+</text>
</svg>`;
+
+export const font_reset_icon = `<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
<text x="50" y="95" text-anchor="middle" font-size="90">A</text>
</svg>`;
+
+export const help_icon = `<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
<g transform="scale(0.7)">
<path fill="none" stroke-width="20" d="M45,67c0-13 1-19 8-26c7-9 18-10 28-8c10,2 22,12 22,26c0,14-11,19-15,22c-7,2-10,6-11,11v20m0,12v16"/>
</g>
</svg>`;
+
+export const hide_icon = `<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
<line stroke-linecap="round" x1="20" y1="15" x2="50" y2="45" stroke-width="10"/>
<line stroke-linecap="round" x1="50" y1="45" x2="80" y2="15" stroke-width="10"/>
<line stroke-linecap="round" x1="20" y1="55" x2="50" y2="85" stroke-width="10"/>
<line stroke-linecap="round" x1="50" y1="85" x2="80" y2="55" stroke-width="10"/>
</svg>`;
+
+export const last_icon = `<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
<polygon points="5,5 5,95 70,50"
  stroke-width="1"/>
<line x1="85" y1="5" x2="85" y2="95" style="stroke-width:15"/>
</svg>`;
+
+export const next_icon = `<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
<polygon points="15,5 15,95 85,50"
  stroke-width="1"/>
</svg>`;
+
+export const next_pointer_icon = `<svg viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg" width="15" height="15">
    <polygon points="0,1 0,99 99,50"/>
</svg>`;
+
+export const one_slide_icon = `<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="90" height="90" style="stroke-width:6;" />
<text x="50" y="50" dominant-baseline="central" text-anchor="middle" font-size="80">1</text>
</svg>`;
+
+export const overview_icon = `<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100" style="fill:none;stroke-width:8;" />
<line x1="48" y1="0" x2="48" y2="100" style="stroke-width:4"/>
<rect x="8" y="7" width="33" height="25"/>
<rect x="8" y="37.5" width="33" height="25"/>
<rect x="8" y="68" width="33" height="25"/>
</svg>`;
+
+export const previous_pointer_icon = `<svg viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg" width="15" height="15">
    <polygon points="99,1 99,99 1,50"/>
</svg>`;
+
+export const print_icon = `<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
<line x1="6" y1="30" x2="94" y2="30" style="stroke-width:8"/>
<line x1="10" y1="30" x2="10" y2="80" style="stroke-width:8"/>
<line x1="22" y1="23" x2="30" y2="23" style="stroke-width:8"/>
<line x1="70" y1="23" x2="78" y2="23" style="stroke-width:8"/>
<line x1="90" y1="30" x2="90" y2="80" style="stroke-width:8"/>
<line x1="6" y1="80" x2="30" y2="80" style="stroke-width:8"/>
<line x1="94" y1="80" x2="70" y2="80" style="stroke-width:8"/>

<line x1="6" y1="33" x2="94" y2="33" style="stroke-width:8"/>
<line x1="6" y1="40" x2="20" y2="40" style="stroke-width:12"/>
<line x1="33" y1="40" x2="94" y2="40" style="stroke-width:12"/>
<line x1="6" y1="55" x2="94" y2="55" style="stroke-width:24"/>
<line x1="6" y1="75" x2="30" y2="75" style="stroke-width:24"/>
<line x1="94" y1="75" x2="70" y2="75" style="stroke-width:24"/>

<line x1="35" y1="73" x2="65" y2="73" style="stroke-width:4"/>
<line x1="35" y1="83" x2="65" y2="83" style="stroke-width:4"/>

<rect x="30" y="5" width="40" height="25" rx="5" ry="5" style="fill:none;stroke-width:4;"/>
<rect x="30" y="65" width="40" height="30" rx="5" ry="5" style="fill:none;stroke-width:4;"/>
</svg>`;
+
+export const settings_icon = `<svg viewBox="0 0 100 100"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="gear">
<polygon points="40,75 43,95 57,95 60,75"/>
<polygon points="40,25 43,5 57,5 60,25"/>
<polygon points="25,40 5,43 5,57 25,60"/>
<polygon points="75,40 95,43 95,57 75,60"/>
</g>
</defs>
<circle cx="50" cy="50" r="25" fill="none" style="stroke-width:15" />
<use xlink:href="#gear"/>
<use xlink:href="#gear" transform="rotate(45 50 50)"/>
</svg>`;
+
+export const slider_icon = `<svg viewBox="0 0 100 50"
  xmlns="http://www.w3.org/2000/svg">
<line stroke-linecap="round" x1="20" y1="25" x2="80" y2="25" stroke-width="30"/>
<circle cx="25" cy="25" r="23" stroke-width="3"/>
</svg>`;
+
+export const toc_icon = `<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
<line x1="5" y1="10" x2="5" y2="95" stroke-dasharray="15, 15" style="stroke-width:20"/>
<line x1="25" y1="17.5" x2="100" y2="17.5" style="stroke-width:10"/>
<line x1="25" y1="47.5" x2="100" y2="47.5" style="stroke-width:10"/>
<line x1="25" y1="77.5" x2="100" y2="77.5" style="stroke-width:10"/>
</svg>`;
+

src/ts/page.ts

+import * as i from "./icon-definitions";
+
+export class Page {
+    font;
+
+}
+
+export const Content = `
+  <input type="checkbox" value="Check Me!" id="checkbox" disabled>
+  <label for="checkbox">`+i.slider_icon+`</label>
+
+`
+
+declare global {
+    interface Window {
+        page: Page
+    }
+}
+
+window.page = new Page();
\ No newline at end of file

tsconfig.json

+{
+    "compilerOptions": {
+        "target": "ES5",
+        "module": "commonjs",
+        "declaration": true,
+        "sourceMap": true,
+        "types": [],
+        "typeRoots": ["./node_modules/@types/"],
+        "pretty": true
+    }
+}