انتقل إلى المحتوى
SVG Nexus / DEVELOPERS بدون تسجيل حساب | معالجة محلية 100% داخل المتصفح

دليل المطورين

مكتبة أيقونات متجهة وثلاثية الأبعاد للمطورين والمصممين

أضف فهرس 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.

اكتب للبحث في 76,166 أيقونة متجهة...

تنقل | Enter للفتح استعراض كل الأيقونات

مقارنة

مصدر الأيقونة ورخصتها

الرخصة الاستخدام التجاري الإسناد التعديل أو تغيير اللون
MITمسموحالإشعار داخل الحزمةمسموح
ISCمسموحالإشعار داخل الحزمةمسموح
Apache-2.0مسموحمطلوب مع ملف الإشعارمسموح
CC BY 4.0مسموحذكر المصدر مطلوبمسموح
CC-BY-SA-4.0مسموحالمشاركة بالمثلالمشاركة بالمثل
Trademark / Brandاستخدام مرجعي فقطإرشادات المالكمقيّد

معاينة الأيقونة