🎨 tabler-icons-solid-ssr

CREATED 100% WITH CLAUDE.AI (What a shame! 🫣)

Complete Tabler Icons library optimized for SolidJS and SolidStart with full SSR support.

✨ Features

• ✅ Full SSR: Works perfectly with SolidStart
• 🎯 Tree-shakeable: Imports only the icons you use
• 📦 No dependencies: Only a peer dependency on solid-js
• 🔄 Always up-to-date: Icons synced with the official Tabler repository
• 💪 TypeScript: Full types included
• ⚡ Performance: Native JSX, no runtime overhead
• 🎨 ~4964 icons: ALL variants (outline + filled)

📦 Installation

npm install tabler-icons-solid-ssr

🚀 Basic Usage

import {
  IconHome, // Outline (default)
  IconHomeFilled, // Filled
  IconUser,
  IconUserFilled,
  IconSettings,
  IconBrandGithub,
  IconBrandGithubFilled,
} from "tabler-icons-solid-ssr";

function App() {
  return (
    <div>
      {/* Outline icon (stroke) */}
      <IconHome />

      {/* Filled icon */}
      <IconHomeFilled color="blue" />

      {/* With custom props */}
      <IconUser size={32} color="red" />

      {/* With CSS classes */}
      <IconSettings class="text-gray-500 hover:text-gray-700" />

      {/* Brand icon */}
      <IconBrandGithub size={24} />
    </div>
  );
}

🎨 Available Props

All icons accept the following props:

| Prop | Type | Default | Description | | ---------- | ------------------ | ---------------- | ----------------------- | | size | number \| string | 24 | Icon size in pixels | | color | string | "currentColor" | Stroke/fill color | | class | string | undefined | Custom CSS classes | | ...props | SVGAttributes | - | Any valid SVG attribute |

📊 Available Icons

This library contains ALL Tabler Icons (~4964 icons):

Variants:

🔲 Outline (Stroke)

Icons with outlines, ideal for modern and clean interfaces.

import { IconHome, IconUser, IconSettings } from 'tabler-icons-solid-ssr';

<IconHome />
<IconUser />
<IconSettings />

⬛ Filled

Filled icons, perfect for active states or stronger emphasis.

import { IconHomeFilled, IconUserFilled, IconSettingsFilled } from 'tabler-icons-solid-ssr';

<IconHomeFilled />
<IconUserFilled />
<IconSettingsFilled />

Naming:

• Outline: Icon{Name} (ex: IconBrandGithub)
• Filled: Icon{Name}Filled (ex: IconBrandGithubFilled)

💡 Usage Examples

With SolidStart (SSR)

// routes/index.tsx
import {
  IconBrandGithub,
  IconStar,
  IconStarFilled,
} from "tabler-icons-solid-ssr";

export default function Home() {
  return (
    <div>
      <h1>My SolidStart App</h1>

      <button class="flex items-center gap-2">
        <IconBrandGithub size={20} />
        View on GitHub
      </button>

      <div class="flex gap-1">
        <IconStarFilled color="gold" size={24} />
        <IconStarFilled color="gold" size={24} />
        <IconStarFilled color="gold" size={24} />
        <IconStar color="gold" size={24} />
        <IconStar color="gold" size={24} />
      </div>
    </div>
  );
}

Toggle Between Outline and Filled

import { IconHeart, IconHeartFilled } from "tabler-icons-solid-ssr";
import { createSignal } from "solid-js";

function LikeButton() {
  const [liked, setLiked] = createSignal(false);

  return (
    <button onClick={() => setLiked(!liked())}>
      {liked() ? (
        <IconHeartFilled color="red" size={24} />
      ) : (
        <IconHeart color="gray" size={24} />
      )}
    </button>
  );
}

With Tailwind CSS

import { IconSearch, IconUser, IconSettings } from "tabler-icons-solid-ssr";

function Navigation() {
  return (
    <nav class="flex gap-4">
      <IconSearch
        class="text-gray-400 hover:text-gray-600 cursor-pointer"
        size={20}
      />
      <IconUser
        class="text-gray-400 hover:text-gray-600 cursor-pointer"
        size={20}
      />
      <IconSettings
        class="text-gray-400 hover:text-gray-600 cursor-pointer"
        size={20}
      />
    </nav>
  );
}

Responsive Sizes

import { IconHome } from "tabler-icons-solid-ssr";

function ResponsiveIcon() {
  return (
    <div>
      <IconHome size={16} class="md:hidden" /> {/* Mobile */}
      <IconHome size={24} class="hidden md:block" /> {/* Desktop */}
    </div>
  );
}

🔍 How to Find Icons

All icons follow the official Tabler Icons naming convention. To see all available icons:

1. Visit: https://tabler.io/icons
2. Find the desired icon (e.g., "brand-github")
3. Use PascalCase: IconBrandGithub (outline) or IconBrandGithubFilled (filled)

⚡ Why this library?

Problem with @tabler/icons-solid

The official @tabler/icons-solid library uses the internal h() function to create elements, which causes SSR issues with SolidStart:

// ❌ Official library - SSR ERROR
import { IconHome } from "@tabler/icons-solid";
// Error: h() is not defined during SSR

Solution: tabler-icons-solid-ssr

This library generates pure SolidJS components using native JSX, fully compatible with SSR:

// ✅ This library - WORKS with SSR
import { IconHome } from "tabler-icons-solid-ssr";
// Works perfectly on both server and client!

🔄 Automatic Updates

This library is updated automatically every week via GitHub Actions, ensuring you always have the latest Tabler Icons.

📄 License

MIT

🤝 Contributing

Contributions are welcome! This is an open-source project.

🔗 Links

• Tabler Icons – Browse all available icons
• SolidJS – Reactive framework
• SolidStart – Meta-framework for SolidJS

⭐ Show your support

If this library was useful, consider giving it a star on GitHub!

Made with ❤️/A.I for the SolidJS community