Consolidate icons (#1302)

* WIP use masks for icons

* more

* unused

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more consistent colours

* more

* tweak

* optimise SVGs

Author: Rich-Harris

apps/svelte.dev/package.json

@@ -39,6 +39,7 @@
 		"do-not-zip": "^1.0.0",
 		"flexsearch": "^0.7.43",
 		"flru": "^1.0.2",
+		"icons": "workspace:*",
 		"port-authority": "^2.0.1",
 		"topojson-client": "^3.1.0",
 		"vitest": "^2.1.9",

apps/svelte.dev/src/lib/icons/arrow-left.svg

@@ -272,12 +272,15 @@
 
 		&.login {
 			width: auto;
-			background-image: url($lib/icons/user-light.svg);
-			background-position: 0.4rem 50%;
-			padding: 0 0.4rem 0 2.8rem;
-
-			:root.dark & {
-				background-image: url($lib/icons/user-dark.svg);
+			padding: 0 0.4rem;
+
+			&::before {
+				content: '';
+				width: 1.8rem;
+				height: 1.8rem;
+				margin: 0 0.5rem 0 0;
+				background: currentColor;
+				mask: url(icons/user) no-repeat 50% 50%;
 			}
 		}
 	}

apps/svelte.dev/src/lib/icons/bluesky-dark.svg

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import volume_off from './volume-off.svg';
-	import volume_high from './volume-high.svg';
-	import cc_on from './cc-on.svg';
-	import cc_off from './cc-off.svg';
-	import play from './play.svg';
-	import pause from './pause.svg';
+	import volume_off from 'icons/volume-off';
+	import volume_high from 'icons/volume-high';
+	import cc_on from 'icons/cc-on';
+	import cc_off from 'icons/cc-off';
+	import play from 'icons/play';
+	import pause from 'icons/pause';
 	import vtt from './subtitles.vtt';
 	import { onMount } from 'svelte';
 

apps/svelte.dev/src/lib/icons/chevron.svg

@@ -150,13 +150,24 @@
 		}
 
 		h2 {
+			position: relative;
 			padding-right: 4rem;
-			background: url(./arrow-right.svg) no-repeat 100% 50%;
-			background-size: 3rem;
 
-			.external & {
-				background-image: url(./external-link.svg);
-				background-size: 3rem;
+			&::after {
+				content: '';
+				position: absolute;
+				width: 3rem;
+				height: 3rem;
+				top: 0.2rem;
+				right: 0;
+
+				background: var(--sk-fg-accent);
+				mask: url(icons/arrow-right) no-repeat 100% 50%;
+				mask-size: 100%;
+			}
+
+			.external &::after {
+				mask-image: url(icons/external-link);
 			}
 		}
 

apps/svelte.dev/src/lib/icons/contents.svg

@@ -99,7 +99,7 @@
 				position: relative;
 				display: flex;
 				align-items: center;
-				background: url($lib/icons/contents.svg) 0 50% no-repeat;
+				background: url(icons/contents) 0 50% no-repeat;
 				background-size: 2rem 2rem;
 				padding: 0.2rem 0 0 3rem;
 				height: 3rem;
@@ -133,11 +133,12 @@
 				}
 
 				&::after {
-					background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
-					background-size: 2rem;
+					background: currentColor;
+					mask: url(icons/chevron) 50% 50% no-repeat;
+					mask-size: 2rem;
 					top: 0.4rem;
 					right: 0.2rem;
-					rotate: 0deg;
+					rotate: -90deg;
 					transition: rotate 0.2s;
 					transition: rotate 0.2s;
 				}
@@ -161,7 +162,7 @@
 
 			label:has(:checked) {
 				&::after {
-					rotate: 180deg;
+					rotate: 90deg;
 				}
 
 				/* TODO remove :global once https://github.com/sveltejs/svelte/issues/13779 is fixed */

apps/svelte.dev/src/lib/icons/discord-dark.svg

@@ -46,7 +46,7 @@
 		border: none;
 		border-radius: var(--sk-border-radius);
 		padding: 2rem 2rem 2rem 5rem;
-		background: no-repeat 1rem 50% / 3rem 3rem url(/icons/search.svg);
+		background: no-repeat 1rem 50% / 3rem 3rem url(icons/search);
 		color: var(--sk-fg-1);
 	}
 </style>

apps/svelte.dev/src/lib/icons/download-dark.svg

@@ -52,10 +52,10 @@
 
 	<button
 		disabled={loading || !toggle_terminal}
-		class="terminal icon raised"
+		class="terminal raised"
 		onclick={() => toggle_terminal?.()}
-		aria-label="toggle terminal"
-	></button>
+		aria-label="toggle terminal"><span class="icon"></span></button
+	>
 </div>
 
 <style>
@@ -88,23 +88,25 @@
 
 	.icon,
 	.icon::after {
-		position: relative;
 		width: 3.2rem;
 		aspect-ratio: 1;
 		background-size: 1.8rem;
 	}
 
-	.terminal {
-		background-image: url($lib/icons/terminal.svg);
+	.terminal .icon {
+		background: currentColor;
+		mask: url(icons/terminal) 50% 50% no-repeat;
+		mask-size: 1.8rem;
 	}
 
 	.reload::after {
 		content: '';
 		position: absolute;
 		left: 0;
 		top: 0;
-		background: url($lib/icons/refresh.svg) no-repeat 50% 50%;
-		background-size: 1.8rem;
+		background: currentColor;
+		mask: url(icons/refresh) no-repeat 50% 50%;
+		mask-size: 1.8rem;
 		transition: 0.2s ease-out;
 	}
 

apps/svelte.dev/src/lib/icons/download-light.svg

@@ -122,26 +122,21 @@
 			[data-file],
 			.filename {
 				cursor: pointer;
-				background-image: url($lib/icons/file.svg);
-				background-repeat: no-repeat;
 
-				:root.dark & {
-					background-image: url($lib/icons/file-dark.svg);
+				&::before {
+					position: relative;
+					content: '';
+					display: inline-block;
+					width: 1rem;
+					height: 1rem;
+					top: 0.1rem;
+					margin-right: 0.5rem;
+					background: currentColor;
+					mask: url(icons/file) 50% 50% no-repeat;
+					mask-size: 100%;
 				}
 			}
 
-			[data-file] {
-				background-position: 0.5rem 50%;
-				background-size: 1rem 1rem;
-				padding-left: 2rem;
-			}
-
-			.filename {
-				background-position: 0 54%;
-				background-size: 1rem 1rem;
-				padding-left: 1.5rem !important;
-			}
-
 			.desktop {
 				display: none;
 			}

apps/svelte.dev/src/lib/icons/external.svg

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as context from './context.js';
 	import Item from './Item.svelte';
-	import file_icon from '$lib/icons/file.svg';
+	import file_icon from 'icons/file';
 	import { solution } from '../state.svelte';
 	import type { MenuItem } from '$lib/tutorial';
 	import type { File } from '@sveltejs/repl/workspace';

apps/svelte.dev/src/lib/icons/file-dark.svg

@@ -4,8 +4,8 @@
 	import * as context from './context.js';
 	import { get_depth } from '$lib/utils/path.js';
 	import Item from './Item.svelte';
-	import folder_closed from '$lib/icons/folder.svg';
-	import folder_open from '$lib/icons/folder-open.svg';
+	import folder_closed from 'icons/folder';
+	import folder_open from 'icons/folder-open';
 	import { solution } from '../state.svelte';
 	import type { MenuItem } from '$lib/tutorial';
 	import type { Directory, File as IFile, Item as IItem } from '@sveltejs/repl/workspace';