1  <!--
 2  @component
 3  Renders an `Artwork` view model that references an SF Symbol through a  `systemimage://` or `resource://` template URL
 4  -->
 5  <script lang="ts" context="module">
 6      import type { Artwork } from '@jet-app/app-store/api/models';
 7  
 8      const systemImagePrefix = 'systemimage://';
 9      const resourcePrefix = 'resource://';
10  
11      type SystemImageTemplate = `${typeof systemImagePrefix}${string}`;
12      type ResourceTemplate = `${typeof resourcePrefix}${string}`;
13  
14      /**
15       * An {@linkcode Artwork} that references a system image
16       */
17      interface FullSystemImageArtwork extends Artwork {
18          template: SystemImageTemplate | ResourceTemplate;
19      }
20  
21      /**
22       * The sub-set of {@linkcode FullSystemImageArtwork} required to render
23       * the icon
24       */
25      type SystemImageArtwork = Pick<FullSystemImageArtwork, 'template'>;
26  
27      /**
28       * Determine if some {@linkcode Artwork} represents a "system image"
29       */
30      export function isSystemImageArtwork(
31          artwork: Artwork,
32      ): artwork is FullSystemImageArtwork {
33          return (
34              artwork.template.startsWith(systemImagePrefix) ||
35              artwork.template.startsWith(resourcePrefix)
36          );
37      }
38  
39      export function getIconNameFromTemplate(template: string) {
40          return new URL(template).host;
41      }
42  </script>
43  
44  <script lang="ts">
45      import SFSymbol from '~/components/SFSymbol.svelte';
46  
47      export let artwork: SystemImageArtwork;
48  
49      $: name = getIconNameFromTemplate(artwork.template);
50  </script>
51  
52  <SFSymbol {name} />