Merge pull request #9 from svelte-plugins/font

✨ feat(font): add includeFont to api

Author: dysfunc

README.md

@@ -77,6 +77,7 @@ Try it in the [Svelte REPL](https://svelte.dev/repl/cae0ce6e92634878b6e1a587146d
 | enablePastDates	  |	If disabled, the picker will prevent the user from selecting anything prior to today.	| `boolean` (default: `true`)
 | theme             | The theme name that should be assigned to the theme data-attribute.                   | `string` (default: `''`)
 | presetRanges      | The array of present configs to replace the default set with.                         | `array` (default: [...])
+| includeFont       | If false, the default Rubik font will not be loaded                                   | `boolean` (default: `true`)
 
 ### Events
 | Prop               | Description                                                                           | Default                     |

docs/src/App.svelte

@@ -273,6 +273,12 @@
           </ul>&rbrace;]
         </td>
       </tr>
+      <tr>
+        <td>includeFont</td>
+        <td><code>boolean</code></td>
+        <td>If false, the default font "Rubik" will not be loaded.</td>
+        <td><code>true</code></td>
+      </tr>
     </table>
   </section>
 
@@ -304,6 +310,7 @@
   </section>
 
   <br>
+
   <section>
     <h2>Examples</h2>
     <p>Below are different examples of how you can configure the datepicker.</p>

src/datepicker.d.ts

@@ -140,6 +140,11 @@ export interface DatePickerProps {
    * An array of month labels.
    */
   monthLabels?: string[];
+
+  /**
+   * Determines if the default font "Rubik" should be loaded.
+   */
+  includeFont?: boolean;
 }
 
 export interface DatePickerEvents {

src/datepicker.svelte

@@ -172,6 +172,12 @@
     'December'
   ];
 
+  /**
+   * Determines if the default font "Rubik" should be loaded.
+   * @type {boolean}
+   */
+  export let includeFont = true;
+
   /**
    * The number of milliseconds in a day.
    * @type {number}
@@ -1064,10 +1070,12 @@
 </div>
 
 <svelte:head>
-  <link
-    rel="stylesheet"
-    href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap"
-  />
+  {#if includeFont}
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap"
+    />
+  {/if}
 </svelte:head>
 
 <style>