Using Svelte

Integrating HugeIcons into your Svelte project is straightforward. This page will guide you through the process of using HugeIcons Svelte components in your application.

Importing an Icon

Once installed, you can import icons directly into your Svelte components:

import { Home01Icon } from '@hugeicons/svelte';

Rendering an Icon

To render an icon, simply use it as a Svelte component:

<script>
	import {Home01Icon} from '@hugeicons/svelte';
</script>
 
<div>
  <Home01Icon
    variant={"stroke"}
    style={"rounded"}
    size={48}
    color={"#b60fa8"}
  />
</div>

In the example above, the Home01Icon component is included in a function component with a custom size and color.

Customizing Icons

You can customize icons further by using the variant and type properties:

<Home01Icon
  variant={"stroke"}
  style={"rounded"}
  size={48}
  color={"#b60fa8"}
/>

By following these steps, you can effectively utilize HugeIcons in your Svelte application, enhancing your project's design with beautiful icons.

This guide covers the basics of using the HugeIcons package with Svelte: installation, importing, rendering, and customizing icons. Adjust the code examples to fit the exact syntax and usage patterns of the @hugeicons/svelte package.