دليل المطورين
مكتبة أيقونات متجهة وثلاثية الأبعاد للمطورين والمصممين
أضف فهرس 76,166 أيقونة وواجهة البحث JSON والمكونات بدون تبعيات إلى مشاريع React و Next.js و Vue 3 و Svelte و Tailwind CSS أو PHP.
1. واجهة البحث JSON والتصنيفات (GET /api/icons)
صفِّ حسب الكلمة أو مجلد المكتبة أو التصنيف أو النمط أو الرخصة. وتعيد الاستجابة أيقونات بصفحات مع SVG آمن داخل الصفحة واقتراحات وتصنيفات مطابقة.
GET /api/icons?q=arrow&library=lucide&category=arrows&style=outline&license=ISC&page=1&limit=48&facets=1
2. روابط ملفات المتجه المباشرة
# 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. نمط مكوّن بدون تبعيات
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>
);
}
أدلة وشروحات عملية لأيقونات SVG
الفرق بين SVG و PNG: أي صيغة يجب أن تستخدم؟
استخدم صيغة SVG لأيقونات المواقع والشعارات وواجهات المستخدم لأنها تحافظ على دقتها العالية في جميع الشاشات. واستخدم صيغة PNG عندما تحتاج إلى صورة ثابتة الأبعاد للبريد الإلكتروني أو التطبيقات القديمة.
كيفية تحريك أيقونات SVG باستخدام CSS
أضف كلاس CSS إلى عنصر SVG المضمن واستخدم حركات transform أو stroke-dasharray. يمكنك اختيار حركة جاهزة مثل الدوران أو النبض من المحرر المباشر ونسخ الكود فوراً.
كيفية تعديل أيقونات SVG في فيجما أو المتصفح
انسخ كود SVG مباشرة من موقعنا والصقه داخل لوحة العمل في برنامج Figma لتعديل المسارات والألوان. أو افتح الأيقونة في استوديو المتجهات لتعديلها مباشرة في متصفحك بدون برامج.
كيفية استخدام أيقونات SVG في React و Next.js و Vue
اختر تبويب React TSX أو Vue 3 في صفحة أي أيقونة لنسخ المكون الجاهز. يدعم الكود خاصية currentColor ليتطابق لون الأيقونة تلقائياً مع لون النص في Tailwind CSS.