pixo Download - تنزيل رمز المصدر pixo

pixo

مكونات الطرف الثالث

1.0.0

تنزيل

بيكسو

تحويل أيقونات SVG إلى مكونات رد الفعل

npm i pixo

تمرير دليل أو مسار ملف SVG كوسيطة أولى.

$ pixo src --out-dir dist

سيتم تحسين كل رمز SVG تلقائيًا وإعادة تسميته إلى اسم ملف علبة Pascal للمكون. يمكن بعد ذلك استيراد مكونات الأيقونات إلى تطبيق React.

 import React from 'react'
import CheckIcon from './CheckIcon'

const App = props => (
  < div >
    < CheckIcon />
  </ div >
)

يتضمن قالب المكون الافتراضي الدعائم لـ:

size (رقم) عرض بكسل وارتفاعه (افتراضي 24 )
تم تمرير قيمة color (السلسلة) إلى سمة fill SVG (الافتراضي 'currentcolor' )

متطلبات SVG

يجب أن تتوافق كل رمز SVG مع ما يلي:

استخدم سمة viewBox Square ، ويفضل 0 0 24 24
استخدم لونًا واحدًا فقط (على سبيل المثال الأسود)
للحصول على أفضل النتائج ، استخدم فقط <path> عناصر
لا تستخدم التحويلات

يتضمن PIXO الدعم التجريبي لـ <circle> و <polygon> و <rect> عناصر.

سيتم تجاهل العناصر التالية:

عناصر داخل <defs> أو <clipPath>
عناصر مع fill="none"
<ellipse> عناصر
<line> عناصر
<polyline> عناصر

تحويل أشكال SVG إلى عناصر `<path>`

يمكن لمعظم تطبيقات الرسومات تحويل الأشكال إلى مسارات SVG.

Adobe Illustrator: استخدم أمر Compound Path
FIGMA: TK
رسم: المعارف التقليدية

قوالب

يستخدم Pixo قالبًا افتراضيًا لتقديمه ، ولكنه يتضمن بعض الخيارات المدمجة.

default : SVG عادي بدون تصميم
styledSystem : المكون المصنوع من الهامش والحشو والدعائم الملونة من نظام التصميم

قوالب مخصصة

لاستخدام قالب مخصص ، تم نقل مسار إلى القالب الخاص بك إلى العلم --template .

pixo icons --template custom-template.js

يجب أن يكون القالب وظيفة تقوم بإرجاع سلسلة لرمز مصدر المكون ، مكتوب كوحدة Node.js.

 // default template
module . exports = ( {
  name ,
  viewBox ,
  pathData
} ) => `import React from 'react'

const ${ name } Icon = ({
  size,
  color,
  ...props
}) => (
  <svg
    {...props}
    viewBox=' ${ viewBox } '
    width={size}
    height={size}
    fill={color}
  >
    <path d=' ${ pathData } ' />
  </svg>
)

${ name } Icon.displayName = ' ${ name } Icon'

${ name } Icon.defaultProps = {
  size: 24,
  color: 'currentcolor'
}

export default ${ name } `

حجج وظيفة القالب

name الجمل المغطى يمكن استخدامه لاسم المكون
viewBox قيمة ViewBox الأصلية من SVG
بيانات المسار المستخرجة من pathData لسمة <path> لعنصر d

خيارات

يمكن تمرير الخيارات كعلامات إلى CLI أو إضافتها إلى حقل pixo في package.json الخاصة بك. json

قم بتشغيل pixo --help لمشاهدة قائمة الخيارات.

دليل الإخراج outDir (سلسلة) (DIST)
template (سلسلة) اسم قالب مدمج أو مسار إلى قالب مخصص
index (منطقي) إنشاء وحدة برميل index.js
iconComponent (Boolean) إنشاء مكون Icon.js غلاف
recursive (منطقية) قراءة متكررة جميع SVGs في الدلائل الفرعية

أعلام CLI

-d --out-dir          Output directory
-t --template         Name of built-in template or path to custom template
-i --index            Include index.js barrel module
-c --icon-component   Include wrapper Icon.js component
-r --recursive        Recursively read all SVGs in subdirectories

مثال package.json

{
  "pixo" : {
    "outDir" : " dist " ,
    "template" : " ./custom-template.js " ,
    "index" : true ,
    "iconComponent" : true ,
    "recursive" : true
  }
}