Svelte

The @freeplaceholder/svelte package provides <Placeholder> and <Avatar> components for Svelte and SvelteKit.

Installation

bash
npm install https://github.com/freeplaceholder/svelte

Placeholder Component

svelte
<script>
  import { Placeholder } from "@freeplaceholder/svelte";
</script>

<Placeholder
  width={800}
  height={400}
  text="Hero Banner"
  format="webp"
  bg="3b82f6"
  textColor="ffffff"
  fontWeight="bold"
  rounded="lg"
/>

Placeholder Props

PropTypeDescription
widthnumberImage width in px (required)
heightnumberImage height in px (required)
formatImageFormatOutput format: svg, png, jpg, webp
bgstringBackground hex color
gradientGradientDirectionto-t, to-tr, to-r, to-br, to-b, to-bl, to-l, to-tl, radial
fromstringGradient start color — hex without #
viastringGradient middle color — hex without #
tostringGradient end color — hex without #
textColorstringText hex color
textstringCustom text overlay
textSizenumberFont size in px
textAlignTextAlignleft, center, right
textTransformTextTransformuppercase, lowercase, capitalize, none
textDecorationTextDecorationunderline, overline, line-through, none
letterSpacing`LetterSpacing \string`tighter, tight, wide, wider, widest, or px
fontWeightFontWeightFont weight
opacitynumber0–100
grayscalebooleanGrayscale filter
blurnumberGaussian blur 0–100 px
brightnessnumber0–200
contrastnumber0–200
hueRotatenumber0–360 degrees
invertbooleanInvert colors
saturatenumber0–200
sepiabooleanSepia tone
bordernumberBorder width in px
borderColorstringBorder hex color
borderStyleBorderStyleBorder style
rounded`Rounded \number`Border radius
lazybooleanEnable lazy loading (default: true)

Additional HTML attributes are spread onto the underlying <img> element.

Avatar Component

svelte
<script>
  import { Avatar } from "@freeplaceholder/svelte";
</script>

<Avatar
  name="John Doe"
  size={64}
  format="png"
  fontWeight="bold"
  border={2}
  borderColor="ffffff"
/>

Avatar Props

PropTypeDescription
namestringName to derive initials from (required)
sizenumberSquare dimensions in px (default: 128)
formatImageFormatOutput format
bgstringBackground hex color
gradientGradientDirectionto-t, to-tr, to-r, to-br, to-b, to-bl, to-l, to-tl, radial
fromstringGradient start color — hex without #
viastringGradient middle color — hex without #
tostringGradient end color — hex without #
textColorstringText hex color
textDecorationTextDecorationunderline, overline, line-through, none
letterSpacing`LetterSpacing \string`Letter spacing
fontWeightFontWeightFont weight
opacitynumber0–100
blurnumberGaussian blur 0–100 px
brightnessnumber0–200
contrastnumber0–200
hueRotatenumber0–360 degrees
invertbooleanInvert colors
saturatenumber0–200
sepiabooleanSepia tone
grayscalebooleanGrayscale filter
bordernumberBorder width in px
borderColorstringBorder hex color
borderStyleBorderStyleBorder style
rounded`Rounded \number`Border radius
lazybooleanEnable lazy loading (default: true)

URL Helpers

svelte
<script>
  import { avatarUrl, placeholderUrl, snippetUrl } from "@freeplaceholder/svelte";

  const src = placeholderUrl({ width: 600, height: 400, bg: "3b82f6" });
  const avatar = avatarUrl({ name: "Alice", size: 96, format: "png" });
  const og = snippetUrl({ title: "Hello", format: "png" });
</script>

<img src={src} alt="Placeholder" />
<img src={avatar} alt="Alice" />

SvelteKit

The components work in both server-rendered and client-side pages. Images are fetched at render time and cached by the browser and CDN:

svelte
<!-- +page.svelte -->
<script>
  import { Placeholder, Avatar } from "@freeplaceholder/svelte";
</script>

<Placeholder width={600} height={400} format="png" grayscale />
<Avatar name="John Doe" size={64} format="png" sepia />

Overriding Base URL

ts
import { configure } from "@freeplaceholder/svelte";

configure({ baseUrl: "https://my-custom-instance.com" });