أيقونة shadcn/ui
صورة PNG شفافة عالية الجودة لـ shadcn/ui مناسبة للويب والطباعة.
كود متجه SVG محسن لـ shadcn/ui مخصص للمطورين.
مكون أيقونة React جاهز للاستخدام لـ shadcn/ui.
Use shadcn/ui in a generated UI
Turn this icon into a login page, dashboard, landing page, or integration screen.
كيفية استخدام أيقونة shadcn/ui
انسخ أيقونة shadcn/ui كـ SVG مضمن، أو كود React، أو تضمين HTML، أو قناع CSS.
SVG مضمن
الصق كود SVG الخاص بـ shadcn/ui مباشرة في HTML أو JSX.
مكون React
استخدم shadcn/ui كمكون أيقونة React مُعرّف النوع.
import React from 'react';
export const shadcnuiIcon = ({ className = "w-6 h-6" }: { className?: string }) => (
);تضمين HTML
استخدم رابط URL مستضاف لأيقونة shadcn/ui مع ذكر المصدر.
قناع CSS
استخدم shadcn/ui كأيقونة قناع CSS قابلة لتغيير اللون.
.shadcnui-icon {
display: inline-block;
width: 32px;
height: 32px;
background-color: #000000;
mask: url("https://www.aiuidesigner.com/icons/shadcnui.svg") center / contain no-repeat;
-webkit-mask: url("https://www.aiuidesigner.com/icons/shadcnui.svg") center / contain no-repeat;
}تفاصيل أيقونة shadcn/ui
لون العلامة التجارية
الفئة
تطوير
التنسيقات
SVG, PNG, React, HTML, CSS mask
SVG viewBox
0 0 24 24
ملف SVG
415 بايت · 1 مسار
الترخيص
راجع إرشادات العلامة التجارية
المصدر
ui.shadcn.comحول أيقونة shadcn/ui
icons.aboutParagraph1
استخدم روابط المصدر وإرشادات العلامة التجارية الموجودة في هذه الصفحة للتحقق من قواعد استخدام العلامة التجارية الحالية قبل استخدام شعار shadcn/ui في المشاريع التجارية، أو التوثيقات، أو نماذج واجهة المستخدم، أو صفحات التسويق.
shadcn/ui أسئلة متكررة حول أيقونة
Design a UI with the shadcn/ui icon
Generate a complete page that already uses this icon, color, and brand context.