Tailwind Resources Logo Tailwind Resources
Svelte Hero Icons screenshot

Svelte Hero Icons

Author Avatar Theme by Justinvoitel
Updated: 16 Jul 2024
118 Stars

Heroicons for SvelteKit (Project based on heroicons)

Github

Categories

Svelte Vite

Overview:

The @steeze-ui/icons package is a collection of icon components designed for various frameworks including React, Vue, Lit, and more. It serves as a successor to svelte-hero-icons and offers a wide range of icon packs such as heroicons, radix-icons, and feathericons. It also provides a template that allows users to create and publish their own icon packs. The package is optimized for Svelte and offers features like programmatic switching between solid and outline versions, full typing for IDE support, seamless compatibility with SvelteKit, and SSR compatibility.

Features:

  • Icon Components for Various Frameworks: The package provides icon components for popular frameworks like React, Vue, Lit, and Solid, catering to developers using different frameworks.
  • Icon Packs: Users can choose from a variety of icon packs such as heroicons, radix-icons, feathericons, and more, enabling them to customize the icons in their applications.
  • Template for Creating Icon Packs: The package includes a template that allows developers to create their own publishable icon packs, giving them the flexibility to design and use unique icons in their projects.
  • Optimized for Svelte: The icon components are specifically optimized for Svelte, ensuring efficient performance and seamless integration with Svelte applications.
  • Programmatic Solid/Outline Version Switching: Users can programmatically switch between solid and outline versions of the icons based on the solid attribute, offering flexibility in icon styling.
  • Full Typing for IDE Experience: The package provides full typing support, enabling developers to have a great IDE experience while working with the icon components.
  • SvelteKit Compatibility: The icon components are compatible with SvelteKit and can be seamlessly integrated into SvelteKit projects without requiring any additional configuration.
  • SSR Compatibility: The package is SSR (Server-Side Rendering) compatible, eliminating the need for client-side JavaScript to display the icons and improving performance.

Installation:

To install the @steeze-ui/icons package, follow these steps:

  1. Add the package as a devDependency using npm:
npm install --save-dev @steeze-ui/icons
  1. Once the installation is complete, you can import and use the icon components in your project.

Summary:

The @steeze-ui/icons package offers a comprehensive collection of icon components for popular frameworks like React, Vue, Lit, and Solid. It includes various icon packs and provides a template for users to create their own custom icon packs. The package is specifically optimized for Svelte and offers features like programmatic switching between solid and outline versions, full typing support, compatibility with SvelteKit, and SSR compatibility. With @steeze-ui/icons, developers have access to a wide range of icons and the flexibility to customize and create their own icons for their applications.