...

How to Install

Next-Mahine-Icon
npm install next-mahine-icon

How to use

Simple, fast, and optimized for modern applications.

Server-first approach

Next Mahine Icon renders icons on the server with zero client-side JavaScript by default.

Lightweight components

Each icon is a React component that outputs an inline SVG for maximum performance.

Tree-shakable

Only imported icons are included in your bundle, keeping your app fast and clean.

Examples

import { MahineIcon } from 'next-mahine-icon';

// Usage
const App = () => {
  return <MahineIcon  width={30} height={30} className="text-blue-500" />;
};

export default App;

How Using MahineIconType


import { Github, Package, MahineIconType } from "next-mahine-icon"

type FooterLink = {
  label: string
  href: string
  icon: MahineIconType
}

const footerLinks: FooterLink[] = [
  { label: "GitHub", href: "https://github.com", icon: Github },
  { label: "Packages", href: "/packages", icon: Package },
]

const Footer = () => (
  <footer className="p-4 border-t">
    <ul className="flex gap-4">
      {footerLinks.map((link, i) => {
        const Icon = link.icon
        return (
          <li key={i} className="flex items-center gap-1">
            <Icon width={20} height={20} />
            <a href={link.href} target="_blank" rel="noreferrer">
              {link.label}
            </a>
          </li>
        )
      })}
    </ul>
  </footer>
)

export default Footer

How Using In Server Component

In a server component, icons are rendered as static UI. You cannot use interactive events like onClick.


import { MahineIcon } from "next-mahine-icon";

const Exemple = () => {
  return (
    <div>
      <MahineIcon width={30} height={30} className="text-blue-400" />
    </div>
  );
};

export default Exemple;

How Using In Client Component

In a client component, wrap your icon inside an interactive element (like abutton orspan) to handle events like onClick.


"use client";

import { MahineIcon } from "next-mahine-icon";

const Exemple = () => {
  const handleClick = () => {
    alert("Icon clicked 🚀");
  };

  return (
    <div>
      <button onClick={handleClick}>
        <MahineIcon width={30} height={30} className="text-blue-400 cursor-pointer" />
      </button>
    </div>
  );
};

export default Exemple;