pixo 다운로드 pixo 소스 코드 다운로드

pixo

타사 구성 요소

1.0.0

다운로드

픽소

SVG 아이콘을 React 구성 요소로 변환합니다

npm i pixo

디렉토리 또는 SVG 파일 경로를 첫 번째 인수로 전달하십시오.

$ pixo src --out-dir dist

각 SVG 아이콘은 자동 최적화 및 구성 요소의 Pascal Case Filename으로 이름이 바뀝니다. 그런 다음 아이콘 구성 요소를 React Application으로 가져올 수 있습니다.

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

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

기본 구성 요소 템플릿에는 다음에 대한 소품이 포함됩니다.

size (숫자) 픽셀 너비 및 높이 (기본 24 )
color (문자열) SVG fill 속성에 전달 된 색상 값 (기본 'currentcolor' )

SVG 요구 사항

각 SVG 아이콘은 다음을 준수 해야합니다 .

사각형 viewBox 속성을 사용하십시오. 바람직하게 0 0 24 24
단일 색상 만 사용하십시오 (예 : 검은 색)
최상의 결과를 얻으려면 <path> 요소 만 사용하십시오
변환을 사용 하지 마십시오

Pixo에는 <circle> , <polygon> 및 <rect> 요소에 대한 실험적 지원이 포함되어 있습니다.

다음 요소는 무시됩니다.

<defs> 또는 <clipPath> 내의 요소
fill="none" 속성이있는 요소
<ellipse> 요소
<line> 요소
<polyline> 요소

SVG 모양을 `<path>` 요소로 변환합니다

대부분의 그래픽 응용 프로그램은 모양을 SVG 경로로 변환 할 수 있습니다.

Adobe Illustrator : Compound Path 명령을 사용하십시오
피그마 : TK
스케치 : TK

템플릿

Pixo는 렌더링을 위해 기본 템플릿을 사용하지만 몇 가지 내장 옵션이 포함되어 있습니다.

default : 스타일이없는 일반 SVG
styledSystem : Styled-System의 마진, 패딩 및 컬러 소품이있는 스타일의 구성 요소

맞춤형 템플릿

사용자 정의 템플릿을 사용하려면 템플릿으로의 경로를 --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 SVG의 원래 뷰 박스 값입니다
pathData <path> 요소의 d 속성에 대한 Path Data를 추출했습니다.

옵션

옵션은 CLI에 플래그로 전달되거나 package.json 의 pixo 필드에 추가 할 수 있습니다.

옵션 목록을 보려면 pixo --help 실행하십시오.

outDir (String) 출력 디렉토리 (기본 Dist)
template (문자열) 내장 템플릿의 이름 또는 사용자 정의 템플릿으로가는 경로
index (boolean) index.js 배럴 모듈을 만듭니다
iconComponent (boolean) Icon.js 래퍼 구성 요소를 만듭니다
recursive (부울)는 하위 디렉토리의 모든 SVG를 재귀 적으로 읽습니다

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