ดาวน์โหลด pixo - ดาวน์โหลดซอร์สโค้ด pixo

pixo

ส่วนประกอบของบุคคลที่สาม

1.0.0

ดาวน์โหลด

พิกโซ่

แปลงไอคอน SVG เป็นส่วนประกอบปฏิกิริยา

npm i pixo

ผ่านไดเรกทอรีหรือเส้นทางไฟล์ SVG เป็นอาร์กิวเมนต์แรก

$ pixo src --out-dir dist

ไอคอน SVG แต่ละตัวจะได้รับการปรับให้เหมาะสมโดยอัตโนมัติและเปลี่ยนชื่อเป็นชื่อไฟล์ Pascal Case สำหรับส่วนประกอบ ส่วนประกอบไอคอนสามารถนำเข้าสู่แอปพลิเคชัน React

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

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

เทมเพลตส่วนประกอบเริ่มต้นมีอุปกรณ์ประกอบฉากสำหรับ:

size (หมายเลข) พิกเซลความกว้างและความสูง (ค่าเริ่มต้น 24 )
color (สตริง) ค่าสีที่ส่งผ่านไปยังแอตทริบิวต์ SVG fill (ค่าเริ่มต้น '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
ร่าง: 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 Camel cased ชื่อที่สามารถใช้สำหรับชื่อส่วนประกอบ
viewBox ค่า viewbox ดั้งเดิมจาก SVG
pathData แยกข้อมูลพา ธ สำหรับแอตทริบิวต์ d ขององค์ประกอบ <path>

ตัวเลือก

ตัวเลือกสามารถส่งผ่านเป็นธงไปยัง CLI หรือเพิ่มลงในฟิลด์ pixo ใน package.json ของคุณ json

เรียกใช้ pixo --help เพื่อดูรายการตัวเลือก

ไดเรกทอรีเอาต์พุต outDir (สตริง) (dist เริ่มต้น)
template (สตริง) ชื่อของเทมเพลตในตัวหรือเส้นทางไปยังเทมเพลตที่กำหนดเอง
index (บูลีน) สร้างโมดูลบาร์เรล index.js
iconComponent (บูลีน) สร้าง Icon.js wrapper component
recursive (บูลีน) อ่าน SVG ทั้งหมดซ้ำในไดเรกทอรีย่อย

CLI Flags

-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
  }
}