Hugeicons

=== React === Installation:

# Install the React component package
npm install @hugeicons/react

# Install your preferred icon package(s)
npm install @hugeicons-pro/core-{variant}-{style}

Basic Usage:

import { HugeiconsIcon } from '@hugeicons/react'
import { Notification03Icon } from '@hugeicons/core-free-icons'

function App() {
    return <HugeiconsIcon icon={Notification03Icon} size={24} color="currentColor" strokeWidth={1.5} />
}

=== Vue === Installation:

# Install the Vue component package
npm install @hugeicons/vue

# Install your preferred icon package(s)
npm install @hugeicons-pro/core-{variant}-{style}

Basic Usage:

<script setup>
import { HugeiconsIcon } from '@hugeicons/vue'
import { Notification03Icon } from '@hugeicons/core-free-icons'
</script>

<template>
    <HugeiconsIcon :icon="Notification03Icon" :size="24" color="currentColor" :strokeWidth="1.5" />
</template>

=== Angular === Installation:

# Install the Angular component package
npm install @hugeicons/angular

# Install your preferred icon package(s)
npm install @hugeicons-pro/core-{variant}-{style}

Module Setup:

import { NgModule } from '@angular/core'
import { HugeiconsModule } from '@hugeicons/angular'

@NgModule({
    imports: [HugeiconsModule],
})
export class AppModule {}

Basic Usage:

// your.component.ts
import { Component } from '@angular/core'
import { Notification03Icon } from '@hugeicons/core-free-icons'

@Component({
    selector: 'app-example',
    template: ` <hugeicons-icon [icon]="notification03Icon" [size]="24" color="currentColor" [strokeWidth]="1.5"></hugeicons-icon> `,
})
export class ExampleComponent {
    notification03Icon = Notification03Icon
}

=== Svelte === Installation:

# Install the Svelte component package
npm install @hugeicons/svelte

# Install your preferred icon package(s)
npm install @hugeicons-pro/core-{variant}-{style}

Basic Usage:

<script>
  import { HugeiconsIcon } from '@hugeicons/svelte'
  import { Notification03Icon } from '@hugeicons/core-free-icons'
</script>

<HugeiconsIcon
  icon={Notification03Icon}
  size={24}
  color="currentColor"
  strokeWidth={1.5}
/>

=== React Native === Installation:

# Install the React Native component package
npm install @hugeicons/react-native

# Install your preferred icon package(s)
npm install @hugeicons-pro/core-{variant}-{style}

Basic Usage:

import { HugeiconsIcon } from '@hugeicons/react-native'
import { Notification03Icon } from '@hugeicons/core-free-icons'

function App() {
    return <HugeiconsIcon icon={Notification03Icon} size={24} color="black" strokeWidth={1.5} />
}

=== Web Font === Installation:

<link rel="stylesheet" href="https://cdn.hugeicons.com/font/hgi-stroke-rounded.css" />

Basic Usage:

<i class="hgi hgi-stroke hgi-user"></i>