Magicons - React

Installation

pnpm add magicons @magicons/react -D

1. Add the preprocessor

// vite.config.ts
import { magicons } from 'magicons'
import { defineConfig } from "vite"

export default defineConfig({
	plugins: [magicons(), ...],
})

2. Choose Icon Packs

| Icon Pack | npm | | ---------------------------------------------- | ------------------------------------------------------------------------------ | | Hero | @magicons/hero-icons | | Lucide | @magicons/lucide-icons | | Mdi | @magicons/mdi-icons |

eg. pnpm add @magicons/hero-icons -D

3. Import Icon Types

// tsconfig.app.json
{
  compilerOptions: {
    // keep only the ones you use
    types: ['@magicons/hero-icons', '@magicons/lucide-icons', '@magicons/mdi-icons']
  }
}

Example Usage

To use the Hero-icons pack in React using pnpm

pnpm add magicons @magicons/react @magicons/hero-icons -D

// tsconfig.app.json
{
  compilerOptions: {
    types: ['@magicons/hero-icons']
  }
}

// vite.config.ts
import { defineConfig } from 'vite'
import { magicons } from 'magicons'

export default defineConfig({
  plugins: [magicons(), ...],
})

import { Icon, type Icons } from '@magicons/react'

export function Component() {
  const icon: Icons = "@hero-ChevronDown"

  return (
    <Icon src={icon} />
    <Icon src="@hero-ChevronUp" />
  )
}