Geliştirici Belgeleri
Geliştiriciler ve tasarımcilar için vektör ve 3D ikon kütüphanesi
76,166 ikonluk katalogu, JSON arama arayüzunu ve bağımlılıksız bileşenleri React, Next.js, Vue 3, Svelte, Tailwind CSS veya PHP projelerinize ekleyin.
1. JSON arama ve filtre arayüzu (GET /api/icons)
Anahtar kelime, kütüphane klasoru, kategori, stil veya lisansa göre filtreleyin. Yanit; sayfalanmis ikonlari güvenli satir ici SVG, oneriler ve eşleşen filtrelerle dondurur.
GET /api/icons?q=arrow&library=lucide&category=arrows&style=outline&license=ISC&page=1&limit=48&facets=1
2. Dogrudan vektör dosya adresleri
# Folder-scoped SVG asset (all 15 active folders supported):
GET /icon-library-assets/{libraryId}/{slug}.svg
# Legacy flat slug endpoint:
GET /icon-assets/{slug}.svg
# Upstream SPDX license notice file:
GET /icon-library-notices/{libraryId}/LICENSE.txt
3. Bagimliliksiz bileşen deseni
import * as React from 'react';
export function NexusArrowRightIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<path d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
);
}
Pratik SVG Rehberleri ve Eğitimleri
SVG mi PNG mi: Hangi Formatı Kullanmalısınız?
Web sitesi ikonları, logolar ve arayüzler için SVG kullanın çünkü vektör çizgiler her ekranda net kalır. E-posta imzaları veya sabit pikselli görseller için PNG tercih edin.
CSS ile SVG İkonları Nasıl Hareketlendirilir?
Satır içi SVG etiketine bir CSS sınıfı ekleyin ve transform veya stroke-dasharray keyframe kuralları uygulayın. Canlı düzenleyicimiz JavaScript olmadan akıcı animasyonlar üretir.
SVG İkonları Figma da veya Tarayıcıda Nasıl Düzenlenir?
SVG Nexus tan SVG kodunu kopyalayıp doğrudan Figma veya Illustrator tuvaline yapıştırın ya da Vektör Stüdyomuzda tarayıcı üzerinden düzenleyin.
SVG İkonları React, Next.js ve Vue da Nasıl Kullanılır?
Herhangi bir ikon sayfasında React TSX veya Vue 3 sekmesini seçerek Tailwind CSS ve currentColor uyumlu hazır bileşen kodunu kopyalayın.