Skip to content

Latest commit

 

History

History
104 lines (80 loc) · 3.25 KB

optimize-svg-components.md

File metadata and controls

104 lines (80 loc) · 3.25 KB
Raw

@naverpay/optimize-svg-components

🔧 This rule is automatically fixable by the --fix CLI option.

주어진 경로의 SVG 컴포넌트들을 최적화합니다.

필수 패키지

@naverpay/svg-manager 패키지가 필요합니다.

npm i @naverpay/svg-manager -D

왜 필요한가요?

  • @naverpay/svg-manager는 SVG 관련 타입과 HOC 등을 정의합니다.
  • 해당 규칙이 불필요한 환경에서 설치되는 것을 방지하고자, 규칙을 사용되는 곳에서만 의존성을 설치합니다.

설명

주어진 경로의 svg 컴포넌트들을 svgo 기반으로 최적화합니다.

SVG 컴포넌트 예시

const IconCheckFill = (props: SVGStyleProps) => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width={props.width || '100%'}
        height={props.height || '100%'}
        viewBox={props.viewBox || '0 0 22 22'}
        style={props.style || {}}
    >
        <g fill="none" fillRule="evenodd">
            <path
                fill={props.fill || '#03c75a'}
                d="M11 .5C5.21.5.5 5.21.5 11S5.21 21.5 11 21.5 21.5 16.79 21.5 11 16.79.5 11 .5"
            />
            <path
                fill="#FFF"
                d="M8.754 14.847l-3.027-2.995c-.116-.114-.182-.27-.182-.434 0-.163.066-.32.182-.434.244-.24.635-.24.878 0l2.589 2.56 6.2-6.131c.244-.24.635-.24.878 0 .117.114.182.27.182.434 0 .163-.065.32-.182.434l-6.639 6.566c-.117.115-.275.18-.44.18-.164 0-.322-.065-.439-.18z"
            />
        </g>
    </svg>
)

단, 다음과 같은 특징이 있는 컴포넌트는 최적화에서 제외합니다.

  • props로 id가 존재하는 경우
  • 내부에 classnames로 클래스를 정의한 경우
  • 요소에 한글을 포함한 경우
  • 이미 최적화되었다고 판단된 경우 (주의사항 참고)

옵션

pathGroups: [array]:

svg 컴포넌트의 경로를 설정합니다

Properties of the objects

property required type description
path ✅ string 그룹에 속할 minimatch pattern
excludes Array<string> path에서 제외할 파일명

(Optional) excludes: [array]:

전체 경로에서 pathGroups에 속하지만 제외하고자 하는 파일 경로를 지정합니다.

"excludes": ["/src/assets/*.stories.tsx"]

주의사항

최적화 후 아래 주석이 @autogenerated됩니다. 해당 주석을 제거하면 최적화 여부를 판단할 수 없으므로 중복하여 린트가 실행될 수 있습니다. 따라서 린트 실행하여 최적화된 컴포넌트에서 자동 생성된 주석은 유지할 것을 권장합니다.

/* @autogenerated optimization completed by @naverpay/optimize-svg-components */

예시

"@naverpay/optimize-svg-components": [
    "warn",
    {
        "pathGroups": [
            {
                "path": "/src/assets/*.tsx",
            },
            {
                "path": "/src/components/assets/*.tsx",
                "excludes": ["IconExample.tsx"],
            }
        ],
        "excludes": ["/src/**/*.stories.tsx"]
    }
]