@yasinsensoy/icon

Language / Dil: 🇬🇧 English · 🇹🇷 Türkçe

English

A modern, professional zero-dependency icon library that delivers pixel-consistent visuals across both React Web and React Native (iOS & Android).

• 0 Extra Libraries: Requires no react-native-svg, @expo/vector-icons, lucide-react, .ttf font files, or native linking (pod install, Info.plist, build.gradle).
• Dual-Engine Architecture:
  • React Web & SSR (Next.js, Vite, Remix): Emits pure, accessible, hardware-accelerated <svg> DOM elements (currentColor and Tailwind CSS friendly).
  • React Native (Expo & Bare CLI, New Architecture / Fabric): Powered by an Analytical SDF (Signed Distance Field) Vector Rasterizer + Zero-Dep PNG Encoder written in pure TypeScript/JavaScript—rendering the exact same 24×24 vector primitives at device PixelRatio (@2x, @3x, @4x Retina) with subpixel antialiasing and LRU caching directly into React Native's built-in <Image> component.
• 4 Modern Style Variants & Authentic Multi-Color (colorful) Mode: Every icon supports outline, duotone, filled (with true transparent cutouts), and colored (colorful prop) using authentic multicolor brand and weather palettes from a single unified definition.
• 205 Professional Icons (7 Categories) + Custom Icon Factory (createIcon): Covers navigation, actions/biometrics, communication, media/AI/devices, e-commerce/finance, weather (CloudSunIcon, CloudRainIcon, CloudLightningIcon, RainbowIcon, SunriseIcon, etc.), and social media & brands (AntigravityIcon, GoogleIcon, InstagramIcon, MicrosoftIcon, GmailIcon, FigmaIcon, SlackIcon, WhatsappIcon, etc.)—all crafted on a 24×24 optical grid with 2px safe padding, rounded caps/joins (round), and bilingual (English & Turkish) search tags.

Installation

npm install @yasinsensoy/icon
# or
pnpm add @yasinsensoy/icon
# or
yarn add @yasinsensoy/icon

Metro (React Native) automatically resolves dist/index.native.js, while Web bundlers (Vite, Next.js, Webpack, Rolldown) resolve dist/index.web.js / dist/index.mjs. Web bundles never look up react-native and support 100% tree-shaking ("sideEffects": false).

Quick Start

1. React Web Usage

import {
  HomeIcon,
  AntigravityIcon,
  GoogleIcon,
  InstagramIcon,
  CloudRainIcon,
  BellIcon,
} from '@yasinsensoy/icon';

export function Header() {
  return (
    <header className="flex items-center gap-4 text-slate-900">
      {/* CSS currentColor and Tailwind classes work out of the box */}
      <HomeIcon size={22} className="text-indigo-600" />

      {/* Authentic Multi-Color Brand Palettes (colorful or variant="colored") */}
      <AntigravityIcon size={24} colorful />
      <GoogleIcon size={22} colorful />
      <InstagramIcon size={22} colorful />

      {/* Weather icons — authentic multi-color (golden sun + sky-blue cloud) */}
      <CloudRainIcon size={24} variant="colored" />

      {/* Filled variant with true transparent cutouts */}
      <BellIcon size={22} variant="filled" accessibilityLabel="Notifications" />
    </header>
  );
}

2. React Native (Mobile) Usage — No react-native-svg Required!

import { View } from 'react-native';
import { Icon } from '@yasinsensoy/icon';

export function BottomTabIcon({ routeName, focused }: { routeName: string; focused: boolean }) {
  return (
    <View>
      {/* 'filled' when active, 'outline' when inactive */}
      <Icon
        name={routeName}
        size={24}
        color={focused ? '#4f46e5' : '#64748b'}
        variant={focused ? 'filled' : 'outline'}
        strokeWidth={1.85}
      />
    </View>
  );
}

3. App-Wide Default Settings (IconProvider)

import { IconProvider, HomeIcon, UserIcon, ShieldCheckIcon } from '@yasinsensoy/icon';

export function App() {
  return (
    <IconProvider value={{ size: 22, strokeWidth: 1.75, color: '#0f172a', variant: 'outline' }}>
      <HomeIcon />
      <UserIcon />
      <ShieldCheckIcon variant="duotone" color="#10b981" />
    </IconProvider>
  );
}

4. Creating Your Own Custom Icon (createIcon)

import { createIcon } from '@yasinsensoy/icon';

export const BrandLogoIcon = createIcon({
  name: 'brand-logo',
  tags: ['brand', 'logo'],
  nodes: [
    { type: 'rect', x: 3, y: 3, width: 18, height: 18, rx: 4, role: 'body' },
    { type: 'path', d: 'M8 12.5l2.5 2.5L16 9.5', role: 'detail' },
  ],
});

// Supports outline, duotone, and filled on both React Web (<svg>) and React Native (<Image> SDF)!

Component Props (IconProps)

| Prop | Type | Default | Description | |:----------------------|:--------------------------------------------------|:-------------------------------|:------------------------------------------------------------------------------------------| | size | number \| string | 24 | Icon width and height (px). | | color | string | 'currentColor' / '#111827' | Primary stroke and fill color (#hex, rgb(), hsl(), named color). | | variant | 'outline' \| 'duotone' \| 'filled' \| 'colored' | 'outline' | Visual style variant (colored uses authentic multi-color brand/nature palettes). | | colorful | boolean | false | When true, renders the icon in its intrinsic multi-color palette (variant="colored"). | | strokeWidth | number | 2 | Stroke thickness on the 24×24 grid (1 – 3). | | absoluteStrokeWidth | boolean | false | When true, keeps stroke thickness constant regardless of icon size. | | secondaryColor | string | color | Secondary color for the duotone layer. | | secondaryOpacity | number | 0.18 | Opacity of the duotone layer (0..1). | | rotate | number | 0 | Rotation angle in degrees (90, 180, -45). | | flip | 'horizontal' \| 'vertical' \| 'both' | undefined | Horizontal / vertical mirroring. | | opacity | number | 1 | Overall opacity (0..1). | | accessibilityLabel | string | undefined | Screen reader label (Web aria-label + <title>, Mobile accessibilityLabel). | | className | string | undefined | React Web CSS / Tailwind classes. | | style | object \| array | undefined | React Web CSSProperties or React Native StyleProp. |

☕ Support (Buy Me a Coffee)

If this library saves you time, you can buy me a coffee to support ongoing development:

License

Free to Use (free for personal and commercial applications; closed-source software and may not be redistributed as a standalone library). See LICENSE for full terms.

Copyright © 2026 Yasin Şensoy. All rights reserved.

Türkçe

Dil / Language: 🇬🇧 English · 🇹🇷 Türkçe

Sıfır ek bağımlılık (zero-dependency) ile hem React Web hem de React Native (iOS & Android) projelerinde birebir aynı görsel standartta çalışan, modern ve profesyonel ikon kütüphanesi.

• 0 Ek Kütüphane: react-native-svg, @expo/vector-icons, lucide-react veya .ttf font dosyası kurulumu / native linkleme (pod install, Info.plist, build.gradle) gerektirmez.
• Çift Motorlu (Dual-Engine) Mimari:
  • React Web & SSR (Next.js, Vite, Remix): Doğrudan saf, erişilebilir ve donanım hızlandırmalı <svg> DOM elemanları üretir (currentColor ve Tailwind CSS uyumlu).
  • React Native (Expo & Bare CLI, Yeni Mimari / Fabric): Saf JavaScript/TypeScript ile yazılmış Analitik SDF (Signed Distance Field) Vektör Rasterizer + Zero-Dep PNG Encoder motoru sayesinde aynı 24×24 vektör tanımlarını cihazın PixelRatio (@2x, @3x, @4x Retina) çözünürlüğünde alt-piksel yumuşatma (anti-aliasing) ve LRU önbellekleme ile React Native'in yerleşik <Image> bileşenine aktarır.
• 4 Modern Stil Varyantı & Orijinal Çok Renkli (colorful) Mod: Her bir ikon aynı tanımdan outline, duotone, gerçek saydam kesimli (true transparent cutout) filled ve markaların/hava durumunun kendi özgün çoklu renk paletini kullanan colored (colorful prop'u) varyantlarını destekler.
• 205 Profesyonel İkon (7 Kategori) + Özel İkon Üretici (createIcon): Navigasyon, aksiyon/biyometrik, iletişim, medya/AI/cihaz, e-ticaret/finans, hava durumu (CloudSunIcon, CloudRainIcon, CloudLightningIcon, RainbowIcon, SunriseIcon vb.) ve sosyal medya & markalar (AntigravityIcon, GoogleIcon, InstagramIcon, MicrosoftIcon, GmailIcon, FigmaIcon, SlackIcon, WhatsappIcon vb.) dahil tümü 24×24 optik ızgara, 2px güvenli boşluk, yuvarlatılmış uç/köşe (round cap & join) standardında tasarlanmıştır; Türkçe ve İngilizce arama etiketlerine sahiptir.

Kurulum

npm install @yasinsensoy/icon
# veya
pnpm add @yasinsensoy/icon
# veya
yarn add @yasinsensoy/icon

Metro (React Native) otomatik olarak dist/index.native.js giriş noktasını, Web paketleyicileri (Vite, Next.js, Webpack, Rolldown) ise dist/index.web.js / dist/index.mjs giriş noktasını seçer. Web paketlerinde react-native modülü asla aranmaz ve %100 tree-shaking ("sideEffects": false) çalışır.

Hızlı Kullanım

1. React Web Kullanımı

import {
  HomeIcon,
  AntigravityIcon,
  GoogleIcon,
  InstagramIcon,
  CloudRainIcon,
  BellIcon,
} from '@yasinsensoy/icon';

export function Header() {
  return (
    <header className="flex items-center gap-4 text-slate-900">
      {/* CSS currentColor ve Tailwind sınıfları doğrudan çalışır */}
      <HomeIcon size={22} className="text-indigo-600" />

      {/* Orijinal Çoklu Marka Renkleri (colorful veya variant="colored") */}
      <AntigravityIcon size={24} colorful />
      <GoogleIcon size={22} colorful />
      <InstagramIcon size={22} colorful />

      {/* Hava durumu ikonları — orijinal çoklu renk (güneş sarısı + bulut mavisi) */}
      <CloudRainIcon size={24} variant="colored" />

      {/* Gerçek saydam kesimli (cutout) Filled varyantı */}
      <BellIcon size={22} variant="filled" accessibilityLabel="Bildirimler" />
    </header>
  );
}

2. React Native (Mobil) Kullanımı — react-native-svg Gerektirmez!

import { View } from 'react-native';
import { Icon } from '@yasinsensoy/icon';

export function BottomTabIcon({ routeName, focused }: { routeName: string; focused: boolean }) {
  return (
    <View>
      {/* Aktif sekmede 'filled', pasif sekmede 'outline' */}
      <Icon
        name={routeName}
        size={24}
        color={focused ? '#4f46e5' : '#64748b'}
        variant={focused ? 'filled' : 'outline'}
        strokeWidth={1.85}
      />
    </View>
  );
}

3. Uygulama Geneli Varsayılan Ayarlar (IconProvider)

import { IconProvider, HomeIcon, UserIcon, ShieldCheckIcon } from '@yasinsensoy/icon';

export function App() {
  return (
    <IconProvider value={{ size: 22, strokeWidth: 1.75, color: '#0f172a', variant: 'outline' }}>
      <HomeIcon />
      <UserIcon />
      <ShieldCheckIcon variant="duotone" color="#10b981" />
    </IconProvider>
  );
}

4. Aynı Standartta Kendi Özel İkonunuzu Üretme (createIcon)

import { createIcon } from '@yasinsensoy/icon';

export const BrandLogoIcon = createIcon({
  name: 'brand-logo',
  tags: ['marka', 'logo'],
  nodes: [
    { type: 'rect', x: 3, y: 3, width: 18, height: 18, rx: 4, role: 'body' },
    { type: 'path', d: 'M8 12.5l2.5 2.5L16 9.5', role: 'detail' },
  ],
});

// Hem React Web (<svg>) hem React Native (<Image> SDF) üzerinde outline, duotone ve filled çalışır!

Bileşen Özellikleri (IconProps)

| Prop | Tip | Varsayılan | Açıklama | |:----------------------|:--------------------------------------------------|:-------------------------------|:-------------------------------------------------------------------------------------| | size | number \| string | 24 | İkon genişlik ve yüksekliği (px). | | color | string | 'currentColor' / '#111827' | Ana çizgi ve dolgu rengi (#hex, rgb(), hsl(), isim). | | variant | 'outline' \| 'duotone' \| 'filled' \| 'colored' | 'outline' | İkon görsel stili (colored orijinal çoklu marka/doğa renklerini kullanır). | | colorful | boolean | false | true olduğunda ikonu kendi özgün çoklu renk paletiyle (variant="colored") çizer. | | strokeWidth | number | 2 | 24×24 ızgara üzerindeki çizgi kalınlığı (1 – 3). | | absoluteStrokeWidth | boolean | false | true olduğunda ikon boyutu büyüse bile çizgi kalınlığını sabit tutar. | | secondaryColor | string | color | duotone katmanı için ikincil renk. | | secondaryOpacity | number | 0.18 | duotone katman opaklığı (0..1). | | rotate | number | 0 | Derece cinsinden döndürme (90, 180, -45). | | flip | 'horizontal' \| 'vertical' \| 'both' | undefined | Yatay / dikey aynalama. | | opacity | number | 1 | Genel saydamlık (0..1). | | accessibilityLabel | string | undefined | Ekran okuyucu etiketi (Web aria-label + <title>, Mobil accessibilityLabel). | | className | string | undefined | React Web CSS / Tailwind sınıfları. | | style | object \| array | undefined | React Web CSSProperties veya React Native StyleProp. |

☕ Destek Ol (Buy Me a Coffee)

Bu kütüphane işinizi kolaylaştırdıysa geliştirmeye destek olmak için bir kahve ısmarlayabilirsiniz:

Lisans

Ücretsiz Kullanım (Free to Use — kişisel ve ticari projelerde ücretsiz kullanılabilir; kaynak kodları kapalıdır ve bağımsız kütüphane olarak yeniden dağıtılamaz). Detaylar için LICENSE dosyasına bakınız.

Copyright © 2026 Yasin Şensoy. Tüm hakları saklıdır.