Sphinx-UI Icons

@sphinx-ui/icons SvgIcon bileşenleri olarak kullanıma hazır 2.100'den fazla ikon içerir.

📦 Install

sphinx-ui/core ve sphinx-ui/icons kütüphanelerini yüklemek için:

npm install @sphinx-ui/core

npm install @sphinx-ui/icons

yarn add @sphinx-ui/core

yarn add @sphinx-ui/icons

pnpm add @sphinx-ui/core

pnpm add @sphinx-ui/icons

Bu şekilde sphinx-ui bileşenleri ve ikonları react projenizin içinde kullanıma hazır olacaktır.

🔨 Usage

import { Button } from "@sphinx-ui/core";
import { Delete } from "@sphinx-ui/icons";

export default () => (
    <>
        <Button buttontype="primary">
            <Delete />
        </Button>
    </>
);

✨ Features

• 🎨 İyi tasarlanmış, özelleştirilebilir React bileşenleri.
• 🌍 Internationalization desteği.
• ⭐ Sorunsuz entegrasyon için güvenilir statik tipler sağlayan TypeScript ile yazıldı.

✍️ Custom Hooks

useWindowSize

Örnek Kullanım

import { useWindowSize } from "@sphinx-ui/core";

const App = () => {
    const size = useWindowSize();
    // Your component logic here, utilizing width and height values
    return (
        <div>
            The current window dimensions are:
            <p>Width: {width}px</p>
            <p>Height: {height}px</p>
        </div>
    );
};

🔗 Linkler

• Storybook Documentation
• Figma Design Document

🤝 Geliştiriciler

• Erhan Külekci - Frontend Team Lead @erhan.kulekci
• Berkay Yüksel - Frontend Developer @berkay.yuksel
• Funda Kartal - Frontend Developer @funda.kartal
• Umut Güler - Frontend Developer @umut.guler

EN

Sphinx UI Icons

@sphinx-ui/icons includes the 2,100+ icons as SvgIcon components.

📦 Install

To install sphinx-ui/core with all its components and sphinx-ui/icons run:

npm install @sphinx-ui/core

npm install @sphinx-ui/icons

yarn add @sphinx-ui/core

yarn add @sphinx-ui/icons

pnpm add @sphinx-ui/core

pnpm add @sphinx-ui/icons

This way sphinx-ui and icons will be ready to use inside your react project.

🔨 Usage

import { Button } from "@sphinx-ui/core";
import { Delete } from "@sphinx-ui/icons";

export default () => (
    <>
        <Button buttontype="primary">
            <Delete />
        </Button>
    </>
);

✨ Features

• 🌟 Enterprise-class UI designed for web applications.
• 📦 A set of high-quality React components out of the box.
• 🔧 Comprehensive suite of design assets and developer utilities.
• ⭐ Written in TypeScript, ensuring reliable static types for seamless integration.
• 🌍 Internationalization support.
• 🎨 Powerful theme customization.

✍️ Custom Hooks

useWindowSize

Example usage

import { useWindowSize } from "@sphinx-ui/core";

const App = () => {
    const size = useWindowSize();
    // Your component logic here, utilizing width and height values
    return (
        <div>
            The current window dimensions are:
            <p>Width: {width}px</p>
            <p>Height: {height}px</p>
        </div>
    );
};

🔗 Links

• Storybook Documentation
• Figma Design Document

🤝 Authors

• Erhan Külekci - Frontend Team Lead @erhan.kulekci
• Berkay Yüksel - Frontend Developer @berkay.yuksel
• Funda Kartal - Frontend Developer @funda.kartal
• Umut Güler - Frontend Developer @umut.guler