Svelte Share Demo

Features

✨ Multiple social platforms support
📱 Mobile-friendly design
🌐 Web Share API support
📋 Copy to clipboard functionality
🌍 Internationalization support
🎨 Customizable appearance

Implementation

Add the share buttons to your SvelteKit project in three simple steps:

1. Install the package

npm install @1lev1/svelte-share

2. Import the component

import { ShareButtons } from '@1lev1/svelte-share';

3. Use in your component

<script>
    const siteInfo = {
        siteTitle: "Your Site Name",
        siteUrl: "https://yoursite.com"
    };

    const shareConfig = {
        slug: "page-slug",
        title: "Your Page Title",
        desc: "Page description",
        hashtags: ["svelte", "webdev"],
        via: "@TwitterHandle",
        related: ["@sveltejs"],
        quote: "Share quote",
        lang: "en"  // or "he" for Hebrew
    };
</script>

<ShareButtons {...siteInfo} {...shareConfig} />

Available Props

Prop	Type	Description
siteTitle	string	Your website's name
siteUrl	string	Your website's URL
slug	string	Page path/slug
title	string	Share title
desc	string	Share description
hashtags	string[]	Array of hashtags (without #)
via	string	Twitter handle (with @)
lang	string	"en" or "he"
size	number	Size of the buttons

Credits

This component is built with inspiration from and gratitude to:

svelte-share-buttons-component

Our component is inspired by and based on svelte-share-buttons-component by Paul Chynoweth.