Svelte 头像库：在 Svelte 中使用 DiceBear

DiceBear 同时适用于 Svelte 4 和 Svelte 5。使用 $derived（Svelte 5）或 响应式语句（Svelte 4）可以让 SVG 个人资料图片与属性 变化保持同步，既可以通过 JS 库进行客户端生成，也可以通过 HTTP API 采用零依赖方式实现。

你可以通过 JS 库 或 HTTP API 在 Svelte 中使用 DiceBear。

使用 JS 库

Svelte 5

<script>
  import { Avatar } from '@dicebear/core';
  import lorelei from '@dicebear/styles/lorelei.json' with { type: 'json' };

  let { seed = 'Alice' } = $props();

  const avatar = $derived(
    new Avatar(lorelei, {
      seed,
      size: 128,
      // ... 其他选项
    }).toDataUri()
  );
</script>

<img src={avatar} alt="头像" />

Svelte 4

<script>
  import { Avatar } from '@dicebear/core';
  import lorelei from '@dicebear/styles/lorelei.json' with { type: 'json' };

  export let seed = 'Alice';

  $: avatar = new Avatar(lorelei, {
    seed,
    size: 128,
    // ... 其他选项
  }).toDataUri();
</script>

<img src={avatar} alt="头像" />

使用 HTTP API

Svelte 5

<script>
  let { seed = 'Alice' } = $props();

  const src = $derived.by(() => {
    const url = new URL('https://api.dicebear.com/10.x/lorelei/svg');
    url.searchParams.set('seed', seed);
    url.searchParams.set('size', '128');
    // ... 其他选项
    return url.href;
  });
</script>

<img src={src} alt="头像" />

Svelte 4

<script>
  export let seed = 'Alice';

  let src = '';

  $: {
    const url = new URL('https://api.dicebear.com/10.x/lorelei/svg');
    url.searchParams.set('seed', seed);
    url.searchParams.set('size', '128');
    // ... 其他选项
    src = url.href;
  }
</script>

<img src={src} alt="头像" />