react simple icons

رد الفعل البسيط

توفر هذه الحزمة الرموز البسيطة 13.18.0 المعبأة كمجموعة من مكونات React.

تثبيت

قم بتثبيت الحزمة في دليل المشروع الخاص بك مع:

// with yarn
yarn add @icons-pack/react-simple-icons

// with npm
npm add @icons-pack/react-simple-icons

// with pnpm
pnpm add @icons-pack/react-simple-icons

// with bun
bun add @icons-pack/react-simple-icons

دعم TypeScript

الاستخدام

يمكنك استخدام Simpleicons.org للعثور على رمز معين. عند استيراد أيقونة ، ضع في اعتبارك أن أسماء الرموز هي uppercamelcase ، على سبيل المثال:

• يتم عرض Material Design على أنه { SiMaterialdesign } from @icons-pack/react-simple-icons
• azure devOps يتعرض كـ { SiAzuredevops } from @icons-pack/react-simple-icons

العرض التوضيحي

تحرير codesandbox

مثال أساسي

 import { SiReact } from '@icons-pack/react-simple-icons' ;

function BasicExample ( ) {
  return < SiReact color = '#61DAFB' size = { 24 } /> ;
} 

تغيير العنوان

@icons-pack/react-simple-icons يوفر عنوانًا افتراضيًا يشير إلى اسم المكون

يوفر العنصر <title> وصفًا يمكن الوصول إليه وقصير النص القصير لأي عنصر حاوية SVG أو عنصر الرسومات.

 import { SiReact } from '@icons-pack/react-simple-icons' ;

// title default "React"
function ChangeTitle ( ) {
  return < SiReact title = 'My title' color = '#61DAFB' size = { 24 } /> ;
} 

استخدم اللون الافتراضي

اضبط اللون كإعداد default لاستخدام اللون الافتراضي لكل رمز

 import { SiReact } from '@icons-pack/react-simple-icons' ;

function DefaultColorExample ( ) {
  return < SiReact color = 'default' size = { 24 } /> ;
}

استخدم اللون الافتراضي مثل Hex

إلحاق Hex على اسم الأيقونة لاستخدام اللون الافتراضي كسلسلة سداسي عشرية

 import { SiReact , SiReactHex } from '@icons-pack/react-simple-icons' ;

function DefaultColorExample ( ) {
  return < SiReact color = { SiReactHex } size = { 24 } /> ;
} 

أنماط مخصصة

 import { SiReact } from '@icons-pack/react-simple-icons' ;

function CustomStyles ( ) {
  return < SiReact className = 'myStyle' /> ;
} 

. myStyle {
  width : 35 px ;
  height : 35 px ;
}