import { SocialIcons } from '@qwik-docs/components/qwik/SocialIcons'

<div class="header">
  <div class="sl-flex social-icons">
    <SocialIcons links={[
      { icon: 'github', label: 'GitHub', href: 'https://github.com/example' },
      { icon: 'discord', label: 'Discord', href: 'https://discord.gg/example' },
      { icon: 'x.com', label: 'X', href: 'https://x.com/example' },
    ]} />
  </div>
</div>

Overview

The SocialIcons component renders a horizontal row of social media icon links. It appears in the header's right section and in the mobile menu footer.

Look at the header — you should see GitHub, Discord, and X icons on the right side.

Props

SocialLink Interface

interface SocialLink {
  icon: string;   // Icon name from the built-in icon set
  label: string;  // Accessible label (screen reader text)
  href: string;   // Link URL
}

Configuration

Social links are configured in qwik-docs.config.ts:

defineConfig({
  social: [
    { icon: 'github', label: 'GitHub', href: 'https://github.com/example' },
    { icon: 'discord', label: 'Discord', href: 'https://discord.gg/example' },
    { icon: 'x.com', label: 'X', href: 'https://x.com/example' },
    { icon: 'mastodon', label: 'Mastodon', href: 'https://mastodon.social/@example' },
    { icon: 'rss', label: 'RSS', href: '/feed.xml' },
  ],
})

Features

• Each link opens in a new tab (via target="_blank")
• Labels are rendered as .sr-only text for accessibility
• Icons use the same Icon component as the rest of the framework
• Renders nothing if links is empty or undefined

Supported Icons

See the Icons reference for the full list of available social/brand icons including GitHub, GitLab, Discord, Twitter, Mastodon, YouTube, LinkedIn, and many more.