Quick start

Use Material Symbols Use Google Sans Use pure Vite Use token-shaker

1

Install M3 Svelte

pnpm install m3-svelte vite-plugin-functions-mixins @ktibow/iconset-material-symbols @fontsource-variable/google-sans-flex -D

2

Enable plugins

import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import { functionsMixins } from "vite-plugin-functions-mixins";

export default defineConfig({
  plugins: [sveltekit(), functionsMixins({ deps: ["m3-svelte"] })],
});

3

Enable your theme snippet

<script>
import "../app.css";
</script>

/* Your theme snippet */

4

Enable a font

@import "@fontsource-variable/google-sans-flex/opsz.css";

<script>
  import { Button } from "m3-svelte";
</script>

<Button onclick={() => alert("Hello world")}>Click me</Button>