Move to TypeScript

src/lib/components/Icon.svelte

@@ -1,30 +1,28 @@
-<script>
+<script type="ts">
+  /** Class name for additional CSS styling */
   export let clazz = '';
   export { clazz as class };
+
+  /** Icon color. */
   export let color = 'currentColor';
 
-  /** @type {string} */
-  export let mdi;
+  /** Material Design Icons icon name */
+  export let mdi: string;
 
-  /** @type {number | string} */
-  export let size = 1;
+  /** Icon size. Numbers are treated as `<value>em`, strings as `<value>`. */
+  export let size: number | string = 1;
 
   let mdiOld = '';
   let path = '';
 
-  $: {
-    loadIcon(mdi);
-  }
+  $: loadIcon(mdi);
 
   $: width = size ? (typeof size === 'number' || !Number.isNaN(Number(size)) ? `${size}em` : size) : '1em';
 
-  /**
-	 * @param {string} mdi
-	 */
-  async function loadIcon(mdi) {
+  /** Load the icon from the `$lib/icons` folder. */
+  async function loadIcon(mdi: string) {
     if (mdi === mdiOld) return;
     path = (await import(`$lib/icons/${mdi}.js`)).default;
-    //path = icon.path;
   }
 </script>