msvgc

MSVGC

ใช้สำหรับการสร้างส่วนประกอบปฏิกิริยาจากไฟล์ SVG ธรรมดา
(เข้ากันได้กับ React-Native)

ติดตั้ง:

 # install package globally
npm install -g msvgc

การใช้งาน:

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

--camelCase ธง camelcase สร้างส่วนประกอบด้วยชื่อคลาสแคมป์เคส

--react-native สร้างส่วนประกอบโดยใช้ไลบรารี React-Natial-SVG

--color ธงสีสร้างส่วนประกอบที่ตอบโต้ด้วยอุปกรณ์ประกอบฉากสีที่ส่งผ่านไปยังเสาเติมเด็ก SVG

--typescript จะใช้คำสั่งนำเข้า typeScript เช่น ( import * as React )

--coffeescript ธง Coffeescript จะใช้ Coffeescript CJSX Syntax สำหรับการสร้างส่วนประกอบ

หมายเหตุ:

หากไม่ได้ตั้งค่าพารามิเตอร์เริ่มต้นไดเรกทอรีการทำงานปัจจุบันจะถูกใช้เป็นพา ธ ไปยังไฟล์. svg ที่มีเอาต์พุตในไดเรกทอรี./svg

ไดเรกทอรีย่อยที่มีไฟล์. SVG จะสร้างส่วนประกอบปฏิกิริยาที่สอดคล้องกันภายในไดเรกทอรีย่อยในเส้นทางเอาต์พุต

เส้นทางเอาต์พุตมี 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 >
    ) ;
  }
}

[ ... ] 

สิ่งที่ต้องทำ:

• สร้างไฟล์ดัชนีในไดเรกทอรีส่วนประกอบเป้าหมาย
  • ให้คำเตือนเมื่อมีชื่อส่วนประกอบที่ซ้ำกันอยู่ในดัชนี
• เปรียบเทียบไฟล์ที่มีอยู่ในไดเรกทอรีส่วนประกอบเป้าหมาย