Labels and icons

Translation

One of the mandatory components of a form is translate. You can see its use in various places in the form (various buttons and labels).

Translations are imported from @sjsf/form/translations/{locale}, currently supported locales:

en
ru

Translation API reference

Icons

Text is good, but you can do better by adding icons!

<script lang="ts">
  import type { Snippet } from "svelte";

  import CustomForm from '@/components/custom-form.svelte';

  const { children }: { children: Snippet } = $props();
</script>

<CustomForm
  schema={{
    title: "With icons",
  }}
  icons={{
    submit: children
  }}
/>

Icons API reference

There are also ready-made sets of icons for control buttons.

Lucide icons

Installation:

npm i @sjsf/lucide-icons

yarn add @sjsf/lucide-icons

pnpm add @sjsf/lucide-icons

bun add @sjsf/lucide-icons

Usage:

<script lang="ts">
  import { createForm3 } from '@sjsf/form';
  import { icons } from '@sjsf/lucide-icons';

  const form = createForm3({
    icons
  })
</script>

Playground

Flowbite icons

Installation:

npm i @sjsf/flowbite-icons

yarn add @sjsf/flowbite-icons

pnpm add @sjsf/flowbite-icons

bun add @sjsf/flowbite-icons

Add icons content to the tailwindcss config:

import { FLOWBITE_ICONS_CONTENT } from '@sjsf/flowbite-icons/preset'

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}', FLOWBITE_ICONS_CONTENT],
}

Usage:

<script lang="ts">
  import { createForm3 } from '@sjsf/form';
  import { icons } from '@sjsf/flowbite-icons';

  const form = createForm3({
    icons
  })
</script>

Playground

Radix icons

Installation:

npm i @sjsf/radix-icons

yarn add @sjsf/radix-icons

pnpm add @sjsf/radix-icons

bun add @sjsf/radix-icons

Usage:

<script lang="ts">
  import { createForm3 } from '@sjsf/form';
  import { icons } from '@sjsf/radix-icons';

  const form = createForm3({
    icons
  })
</script>

Playground