noway.gabb.fr
this repo has no description
1<!--
2@component
3Renders 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} />