more

Author: Rich-Harris

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

@@ -122,24 +122,23 @@
 			[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: #676778;
+					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;
+				:root.dark &::before {
+					background: #d4d4d4;
+				}
 			}
 
 			.desktop {

apps/svelte.dev/src/lib/icons/file.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/routes/tutorial/[...slug]/Sidebar.svelte

@@ -2,6 +2,9 @@
 	"name": "icons",
 	"private": true,
 	"exports": {
-		"./*": "./icons/*.svg"
+		"./*": {
+			"types": "./types.d.ts",
+			"default": "./icons/*.svg"
+		}
 	}
 }

apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte

@@ -0,0 +1,2 @@
+declare const svg: string;
+export default svg;