Unduh pixo - Unduh Kode Sumber pixo

pixo

Komponen pihak ketiga

1.0.0

Unduh

pixo

Konversi ikon SVG menjadi komponen reaksi

npm i pixo

Lulus jalur file direktori atau SVG sebagai argumen pertama.

$ pixo src --out-dir dist

Setiap ikon SVG akan secara otomatis dioptimalkan dan diganti namanya menjadi nama file case Pascal untuk komponen tersebut. Komponen ikon kemudian dapat diimpor ke dalam aplikasi React.

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

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

Template komponen default termasuk alat peraga untuk:

size (angka) lebar dan tinggi piksel (default 24 )
color (string) Nilai warna diteruskan ke atribut fill SVG (default 'currentcolor' )

Persyaratan SVG

Setiap ikon SVG harus sesuai dengan yang berikut:

Gunakan atribut viewBox persegi, lebih disukai 0 0 24 24
Hanya menggunakan satu warna (misalnya hitam)
Untuk hasil terbaik, hanya gunakan elemen <path>
Jangan gunakan transformasi

Pixo termasuk dukungan eksperimental untuk elemen <circle> , <polygon> , dan <rect> .

Elemen -elemen berikut akan diabaikan:

Elemen dalam <defs> atau <clipPath>
Elemen dengan atribut fill="none"
Elemen <ellipse>
<line> elemen
<polyline> elemen

Mengubah bentuk SVG menjadi elemen `<path>`

Sebagian besar aplikasi grafik dapat mengubah bentuk menjadi jalur SVG.

Adobe Illustrator: Gunakan perintah Compound Path
Figma: Tk
Sketsa: tk

Template

Pixo menggunakan templat default untuk rendering, tetapi termasuk beberapa opsi bawaan.

default : SVG polos tanpa gaya
styledSystem : Komponen gaya dengan margin, padding, dan alat peraga warna dari gaya-sistem

Template khusus

Untuk menggunakan template khusus, lewati jalur ke template Anda ke -bendera --template .

pixo icons --template custom-template.js

Templat harus merupakan fungsi yang mengembalikan string untuk kode sumber komponen, ditulis sebagai modul 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 } `

Argumen fungsi template

name unta cased nama yang dapat digunakan untuk nama komponen
viewBox Nilai ViewBox asli dari SVG
pathData Extract Path Data untuk atribut d <path> elemen

Opsi

Opsi dapat diteruskan sebagai bendera ke CLI atau ditambahkan ke bidang pixo di package.json Anda.json

Jalankan pixo --help untuk melihat daftar opsi.

Direktori Output outDir (String) (DISTER DIST)
template (String) Nama templat bawaan atau jalur ke template khusus
index (Boolean) Buat modul Barrel index.js
iconComponent (Boolean) Buat komponen pembungkus Icon.js
recursive (boolean) secara rekursif membaca semua SVG dalam subdirektori

Bendera 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

Contoh package.json

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