Lightweight I18N for Svelte Apps

Usage

1. create a translation file:

translations.js

export default {
  en: {
      hello: "hello world"
  },
  de: {
      hello: "hallo Welt"
  }

2. Initialize the dictionary & hook to language selection:

import { dict, locale, t } from "svelte-i18n-light";
    import translations from "translations";
    $: languages = Object.keys(translations);
    $: dict.set(translations);


....

function selectLang(e) {
    let langElem = e.target;
    $locale = langElem.innerHTML;
    handleMenuOpen();
}


....


{#each languages as lang}
    <li
        on:click={selectLang}
        >
        <p class:font-bold={$locale == lang}>
            {lang}
        </p>
    </li>
{/each}

3. Translate in any component

<script>
  import { t } from 'svelte-i18n-light'
</script>

{$t('hello')}