msvgc

MSVGC

استخدامات لإنشاء مكونات رد فعل من ملفات SVG العادي
(متوافق مع React-Itist)

ثَبَّتَ:

 # install package globally
npm install -g msvgc

الاستخدام:

 # provide for utils
msvgc -f ./path/to/pic.svg -o ./svgComponents/

-علامة --camelCase تنشئ مكونات بأسماء فئة الحالات الإبل

--react-native ينشئ مكونات باستخدام مكتبة React-Native-SVG

-العلامة --color تنشئ مكونات مفاعلة مع دعائم ملونة تم نقلها إلى دعامة ملء الأطفال SVG

-سوف تستخدم علامة --typescript بيانات استيراد TypeScript على سبيل المثال ( import * as React )

-سوف يستخدم علم --coffeescript بناء جملة Coffescript CJSX لإنشاء مكونات

ملحوظات:

إذا لم يتم تعيين المعلمات الافتراضية ، فسيتم استخدام دليل العمل الحالي كمسار إلى ملفات .svg مع الإخراج في دليل ./SVG.

ستنشئ الأشرطة الفرعية التي تحتوي على ملفات .svg مكونات React المقابلة داخل دليل فرعي في مسار الإخراج.

يحتوي مسار الإخراج على index.js يصدر جميع المكونات التي تم إنشاؤها.

رد فعل JS:

استخدم مكونات تم إنشاؤها في ملفات JSX/TSX/CJSX:

 [ ... ]

import Pic from './svgComponents/Pic'

class MyComponent extends Component {
  render ( ) {
    return (
      < div >
        < Pic width = { 300 } height = { 100 } />
        < p > Lorem ipsum... </ p >
      </ div >
    ) ;
  }
}

[ ... ] 

تودو:

• إنشاء ملف الفهرس في دليل المكون الهدف.
  • توفير تحذير عند وجود أسماء المكونات المكررة في الفهرس.
• قارن الملفات الموجودة في دليل المكون المستهدف.