From 3c64e9d668c1860547b7cc79a2ab63b78c3ff330 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sat, 27 Apr 2019 14:39:36 -0400
Subject: [PATCH] extract <Icon> component

---
 site/src/components/Icon.svelte               |  39 ------
 site/src/components/InlineSvg.svelte          | 115 ------------------
 site/src/components/TopNav.svelte             |   2 +-
 site/src/routes/_layout.svelte                |   5 +-
 site/src/routes/docs/_GuideContents.svelte    |   2 +-
 site/src/routes/docs/index.svelte             |   2 +-
 .../repl/_components/AppControls/index.svelte |   2 +-
 .../tutorial/[slug]/_TableOfContents.svelte   |   2 +-
 site/src/routes/tutorial/[slug]/index.svelte  |   2 +-
 9 files changed, 9 insertions(+), 162 deletions(-)
 delete mode 100644 site/src/components/Icon.svelte
 delete mode 100644 site/src/components/InlineSvg.svelte

diff --git a/site/src/components/Icon.svelte b/site/src/components/Icon.svelte
deleted file mode 100644
index 366b923911..0000000000
--- a/site/src/components/Icon.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
------------------------------------------------
-	svg icon
-	- https://github.com/jacobmischka/svelte-feather-icon
-	- https://feathericons.com/
------------------------------------------------
--->
-
-<script>
-	export let clas = '';
-	export let name;
-	export let size = 20;
-</script>
-
-<!-- style="--color: {color ? color : 'currentColor'}" -->
-<svg class="{'icon ' + clas}" width={size} height={size}>
-	<use xlink:href='#{name}' />
-</svg>
-
-<style>
-	.icon {
-		position: relative;
-		/* width: 1.2em;
-		height: 1.2em;
-		top: -0.123em; */
-		overflow: hidden;
-		vertical-align: middle;
-		-o-object-fit: contain;
-		object-fit: contain;
-		-webkit-transform-origin: center center;
-		transform-origin: center center;
-
-		stroke: currentColor;
-		stroke-width: 2;
-		stroke-linecap: round;
-		stroke-linejoin: round;
-		fill: none;
-	}
-</style>
diff --git a/site/src/components/InlineSvg.svelte b/site/src/components/InlineSvg.svelte
deleted file mode 100644
index e29810ae97..0000000000
--- a/site/src/components/InlineSvg.svelte
+++ /dev/null
@@ -1,115 +0,0 @@
-<!--
------------------------------------------------
-	inline-svg sprite
-	- common used svg-stuff (feather-icons)
-	- advantage of css-styling
-	- https://github.com/jacobmischka/svelte-feather-icon
-	- https://feathericons.com/
-	- if requred we can split out app-controls to REPL only
------------------------------------------------
--->
-
-<svg style='display:none'>
-	<symbol id='arrow-left' class='icon' viewBox='0 0 24 24'>
-		<line x1='19' y1='12' x2='5' y2='12' />
-		<polyline points='12 19 5 12 12 5' />
-	</symbol>
-
-	<symbol id='arrow-right' class='icon' viewBox='0 0 24 24'>
-		<line x1='5' y1='12' x2='19' y2='12' />
-		<polyline points='12 5 19 12 12 19' />
-	</symbol>
-
-	<symbol id='arrow-up' class='icon' viewBox='0 0 24 24'>
-		<line x1='12' y1='19' x2='12' y2='5' />
-		<polyline points='5 12 12 5 19 12' />
-	</symbol>
-
-	<symbol id='arrow-down' class='icon' viewBox='0 0 24 24'>
-		<line x1='12' y1='5' x2='12' y2='19' />
-		<polyline points='19 12 12 19 5 12' />
-	</symbol>
-
-	<symbol id='check' class='icon' viewBox='0 0 24 24'>
-		<polyline points='20 6 9 17 4 12' />
-	</symbol>
-
-	<symbol id='close' class='icon' viewBox='0 0 24 24'>
-		<line x1='18' y1='6' x2='6' y2='18' />
-		<line x1='6' y1='6' x2='18' y2='18' />
-	</symbol>
-
-	<symbol id='download' class='icon' viewBox='0 0 24 24'>
-		<path d='M21 15V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V15' />
-		<polyline points='7 10 12 15 17 10' />
-		<line x1='12' y1='15' x2='12' y2='3' />
-	</symbol>
-
-	<symbol id='edit' class='icon' viewBox='0 0 24 24'>
-		<path d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34' />
-		<polygon points='18 2 22 6 12 16 8 16 8 12 18 2' />
-	</symbol>
-
-	<symbol id='github' class='icon' viewBox='0 0 24 24'>
-		<path d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22' />
-	</symbol>
-
-	<symbol id='git-branch' class='icon' viewBox='0 0 24 24'>
-		<line x1='6' y1='3' x2='6' y2='15' />
-		<circle cx='18' cy='6' r='3' />
-		<circle cx='6' cy='18' r='3' />
-		<path d='M18 9a9 9 0 0 1-9 9' />
-	</symbol>
-
-	<symbol id='log-in' class='icon' viewBox='0 0 24 24'>
-		<path d='M15 3H19A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H15' />
-		<polyline points='10 17 15 12 10 7' />
-		<line x1='15' y1='12' x2='3' y2='12' />
-	</symbol>
-
-	<symbol id='maximize' class='icon' viewBox='0 0 24 24'>
-		<path d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3' />
-	</symbol>
-
-	<symbol id='maximize-2' class='icon' viewBox='0 0 24 24'>
-		<polyline points='15 3 21 3 21 9' />
-		<polyline points='9 21 3 21 3 15' />
-		<line x1='21' y1='3' x2='14' y2='10' />
-		<line x1='3' y1='21' x2='10' y2='14' />
-	</symbol>
-
-	<symbol id='menu' class='icon' viewBox='0 0 24 24'>
-		<line x1='3' y1='12' x2='21' y2='12' />
-		<line x1='3' y1='6' x2='21' y2='6' />
-		<line x1='3' y1='18' x2='21' y2='18' />
-	</symbol>
-
-	<symbol id='message-square' class='icon' viewBox='0 0 24 24'>
-		<path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z' />
-	</symbol>
-
-	<symbol id='minus' class='icon' viewBox='0 0 24 24'>
-		<line x1='5' y1='12' x2='19' y2='12' />
-	</symbol>
-
-	<symbol id='plus' class='icon' viewBox='0 0 24 24'>
-		<line x1='12' y1='5' x2='12' y2='19' />
-		<line x1='5' y1='12' x2='19' y2='12' />
-	</symbol>
-
-	<symbol id='save' class='icon' viewBox='0 0 24 24'>
-		<path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z' />
-		<polyline points='17 21 17 13 7 13 7 21' />
-		<polyline points='7 3 7 8 15 8' />
-	</symbol>
-
-	<symbol id="link" class="icon" viewBox="0 0 24 24">
-		<path d="M9,7L6,7A2 2 0 0 0 6,17L9,17"/>
-		<path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"/>
-		<path d="M7,12L17,12"/>
-	</symbol>
-
-	<symbol id="chevron" class="icon" viewBox="0 0 24 24">
-		<path d="M2,7 L12,17 L20,7"/>
-	</symbol>
-</svg>
\ No newline at end of file
diff --git a/site/src/components/TopNav.svelte b/site/src/components/TopNav.svelte
index 49a1be50d1..1d5040145b 100644
--- a/site/src/components/TopNav.svelte
+++ b/site/src/components/TopNav.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
-	import Icon from './Icon.svelte';
+	import { Icon } from '@sveltejs/site-kit';
 	import { page } from '@sapper/app';
 
 	export let segment;
diff --git a/site/src/routes/_layout.svelte b/site/src/routes/_layout.svelte
index 5482ea4d46..4ed5e6b7dd 100644
--- a/site/src/routes/_layout.svelte
+++ b/site/src/routes/_layout.svelte
@@ -1,17 +1,18 @@
 <script>
 	import { page, preloading } from '@sapper/app';
-	import InlineSvg from '../components/InlineSvg.svelte';
+	import { Icons } from '@sveltejs/site-kit';
 	import PreloadingIndicator from '../components/PreloadingIndicator.svelte';
 	import Nav from '../components/TopNav.svelte';
 
 	export let segment;
 </script>
 
+<Icons/>
+
 {#if $preloading}
 	<PreloadingIndicator/>
 {/if}
 
-<InlineSvg />
 {#if $page.path !== '/repl/embed'}
 	<Nav {segment}/>
 {/if}
diff --git a/site/src/routes/docs/_GuideContents.svelte b/site/src/routes/docs/_GuideContents.svelte
index fb2a9dc177..d2014efc70 100644
--- a/site/src/routes/docs/_GuideContents.svelte
+++ b/site/src/routes/docs/_GuideContents.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount, afterUpdate } from 'svelte';
-	import Icon from '../../components/Icon.svelte';
+	import { Icon } from '@sveltejs/site-kit';
 
 	export let sections = [];
 	export let active_section = null;
diff --git a/site/src/routes/docs/index.svelte b/site/src/routes/docs/index.svelte
index b9f913257f..0ba5f29d07 100644
--- a/site/src/routes/docs/index.svelte
+++ b/site/src/routes/docs/index.svelte
@@ -8,7 +8,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import GuideContents from './_GuideContents.svelte';
-	import Icon from '../../components/Icon.svelte';
+	import { Icon } from '@sveltejs/site-kit';
 	import { getFragment } from '../../utils/navigation';
 
 	export let sections;
diff --git a/site/src/routes/repl/_components/AppControls/index.svelte b/site/src/routes/repl/_components/AppControls/index.svelte
index 179a8e4470..446d1a2781 100644
--- a/site/src/routes/repl/_components/AppControls/index.svelte
+++ b/site/src/routes/repl/_components/AppControls/index.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
 	import UserMenu from './UserMenu.svelte';
-	import Icon from '../../../../components/Icon.svelte';
+	import { Icon } from '@sveltejs/site-kit';
 	import * as doNotZip from 'do-not-zip';
 	import downloadBlob from '../../_utils/downloadBlob.js';
 	import { user } from '../../../../user.js';
diff --git a/site/src/routes/tutorial/[slug]/_TableOfContents.svelte b/site/src/routes/tutorial/[slug]/_TableOfContents.svelte
index 4796a71587..7491ebca87 100644
--- a/site/src/routes/tutorial/[slug]/_TableOfContents.svelte
+++ b/site/src/routes/tutorial/[slug]/_TableOfContents.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { goto } from '@sapper/app';
-	import Icon from '../../../components/Icon.svelte';
+	import { Icon } from '@sveltejs/site-kit';
 
 	export let sections;
 	export let slug;
diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte
index 5b2c2a6398..17d8d95cbc 100644
--- a/site/src/routes/tutorial/[slug]/index.svelte
+++ b/site/src/routes/tutorial/[slug]/index.svelte
@@ -18,7 +18,7 @@
 	import { getContext } from 'svelte';
 
 	import ScreenToggle from '../../../components/ScreenToggle.svelte';
-	import Icon from '../../../components/Icon.svelte';
+	import { Icon } from '@sveltejs/site-kit';
 	import TableOfContents from './_TableOfContents.svelte';
 
 	import {