React.js 애플리케이션을 구축할 때 SVG 아이콘을 효율적으로 관리하는 것이 중요합니다. SVG는 반응형 디자인에 필요한 확장성과 유연성을 제공하지만 대규모 프로젝트에서 SVG를 처리하는 것은 번거로울 수 있습니다. SVG 경로를 재사용 가능한 상수로 변환하여 SVG 작업 흐름을 간소화하도록 설계된 CLI 도구인 svg-path-constants가 바로 여기에 있습니다.

왜 SVG이고 왜 상수인가?

이전 기사 "React.js 프로젝트의 SVG 아이콘 관리 옵션 종합 비교"에서는 인라인 SVG, SVG 스프라이트, 각 아이콘에 대한 React 구성 요소 사용 등 SVG 아이콘을 관리하는 다양한 방법에 대해 논의했습니다. 각 방법에는 장단점이 있지만 한 가지 과제는 SVG 경로를 체계적으로 정리하고 재사용 가능하게 유지하는 것입니다.

SVG 경로에 상수를 사용하면 작은 번들 크기와 빠른 빌드 시간을 제공합니다.

svg-경로-상수란 무엇입니까?

svg-path-constants는 SVG 파일에서 상수를 생성하는 데 도움이 되는 CLI 도구로, React 프로젝트에서 SVG 아이콘을 더 쉽게 통합하고 관리할 수 있습니다. SVG 경로를 JS 상수로 변환하고 유연한 명명 규칙을 지원하며 사용자 정의 가능한 출력을 허용합니다.

주요 특징:

• SVG 파일에서 상수 생성: SVG 경로를 상수로 빠르게 변환합니다.
• 유연한 명명 규칙: camelCase, PascalCase, snake_case 및 SCREAMING_SNAKE_CASE를 지원합니다.
• 사용자 정의 가능한 출력: 사용자 정의 템플릿과 파일 경로로 상수를 생성합니다.
• 속성 변환: 불투명도, 채우기 불투명도, 획 및 채우기와 같은 SVG 속성을 경로 문자열로 자동 변환합니다.
• 단일 또는 다중 출력: 입력 구조에 따라 단일 출력 파일 또는 여러 파일을 생성합니다.

svg-path-constants 시작하기

npx를 사용하여 svg-path-constants 사용을 즉시 시작할 수 있습니다:

npx svg-path-constants@latest

또는 전역으로 설치하거나 개발자 종속성으로 설치할 수 있습니다.

npm install -g svg-path-constants
npm install --save-dev svg-path-constants

사용 예

기본 사용법

src/assets/icons에 SVG 파일이 있고 src/comComponents/Icon/paths.js에 상수를 생성하고 싶다고 가정해 보겠습니다.

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js

출력 예:

// src/components/Icon/paths.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

사용자 정의 명명 형식

PascalCase와 같은 다른 이름 지정 형식을 지정합니다.

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js -f PascalCase

출력 예:

// src/components/Icon/paths.js
export const FolderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const FolderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

출력용 템플릿 사용

사용자 정의 템플릿을 사용하여 이름 지정 및 파일 출력을 제어합니다.

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/{-2,-1}/{0}.js -t "{1,-3}"

출력 예:

// src/components/Icon/folder/icon1.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path

// src/components/Icon/folder/icon2.js
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

SVG 속성 처리

svg-path-constants는 불투명도, 채우기 불투명도, 획 및 채우기와 같은 SVG 속성을 경로 문자열의 구성 요소로 변환할 수 있습니다.

SVG 예:

생성된 경로 상수:

export const myIcon = "o0.5 O0.8 fff000 F00ff00 M10 10 H 90 V 90 H 10 Z";

• 불투명도="0.5"는 o0.5가 됩니다.
• fill-opacity="0.8"은 O0.8이 됩니다.
• 스트로크="#ff0000"은 fff000이 됩니다.
• fill="#00ff00"은 F00ff00이 됩니다.

이 기능을 사용하면 경로 문자열 내에서 직접 필수 스타일 정보를 유지하여 간결하고 유익한 표현을 유지할 수 있습니다.

예: React 구성 요소에서 SVG 경로 상수 사용

svg-path-constants를 사용하여 SVG 경로 상수를 생성하면 이를 React 구성 요소에 쉽게 통합할 수 있습니다. 이를 통해 코드를 깔끔하게 유지할 수 있을 뿐만 아니라 애플리케이션 전체에서 SVG 경로를 쉽게 재사용할 수 있습니다.

1단계: SVG 경로 상수 생성

SVG 파일에서 상수를 생성하기 위해 다음 명령을 이미 실행했다고 가정해 보겠습니다.

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js

이 명령은 다음과 같은 상수를 사용하여 src/comComponents/Icon/paths.js 파일을 생성합니다.

// src/components/Icon/paths.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

2단계: SVG를 렌더링하기 위한 React 구성 요소 생성

이제 생성된 상수를 사용하여 이러한 SVG 아이콘을 렌더링하는 React 구성 요소를 만들어 보겠습니다.

import React from 'react';
import { folderIcon1, folderIcon2 } from './paths'; // Import the generated SVG path constants

const parsePathData = (d) => {
    const pathElements = [];
    const pathCommands = d.split(/(o[\d.] |O[\d.] |f[0-9a-fA-F] |F[0-9a-fA-F] )/); // Split by style commands
    let attributes = null;

    pathCommands.forEach((text, i) => {
        const isCommand = Boolean(i % 2);
        if (isCommand) {
            if (!attributes) {
                attributes = {};
            }
            const match = text.match(/^(o([\d.] ))?(O([\d.] ))?(f([0-9a-fA-F] ))?(F([0-9a-fA-F] ))?$/);

            const [, , opacity, , fillOpacity, , stroke, , fill] = match;
            if (opacity) attributes.opacity = opacity;
            if (fillOpacity) attributes["fill-opacity"] = fillOpacity;
            if (stroke) attributes.stroke = `#${stroke}`;
            if (fill) attributes.fill = `#${fill}`;
            return;
        }
        if (text.trim().length) {
            pathElements.push({ ...attributes, d: text });
        }
    });

    return pathElements;
};


const SvgIcon = ({ d, size = 24, color = 'currentColor', ...props }) => {
    const pathElements = parsePathData(d);

    return (
        
    );
};

const IconDemo = () => (
    

        
SVG Icon Examples
        

            
Folder Icon 1
            
        

            
Folder Icon 2
            
    
);

export default IconDemo;

3단계: 애플리케이션에서 구성요소 사용

이제 React 애플리케이션 어디에서나 IconDemo 구성 요소를 사용하여 SVG 아이콘을 표시할 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import IconDemo from './components/Icon/IconDemo';

ReactDOM.render(
    ,
    document.getElementById('root')
);

설명:

1. parsePathData 함수:

   • SVG 파일에 불투명도가 있거나 여러 색상이 있는 경우에만 필요합니다.
   • parsePathData 함수는 확장된 d 속성 문자열을 처리하여 o(불투명도), F(채우기 색상), f(획 색상)와 같은 명령을 추출합니다.
   • 이러한 명령을 기반으로 문자열을 분할하고 해당 속성을 적용한 다음 경로 요소 배열을 반환합니다.

2. SvgIcon 구성 요소:

   • 이 구성 요소는 d 속성 문자열을 가져와서 이를 ParsePathData로 구문 분석하고 SVG 경로를 렌더링합니다.
   • 구성요소를 사용하면 크기 및 색상과 같은 소품을 통해 사용자 정의할 수 있습니다.

3. IconDemo 구성 요소:

   • 이것은 다양한 d 문자열, 크기 및 색상으로 SvgIcon 구성 요소를 사용하는 방법을 보여주는 데모 구성 요소입니다.

다음은 무엇입니까? 상수에 래스터 이미지 추가

저는 현재 생성된 각 상수 위에 래스터 이미지(PNG)를 주석으로 추가하여 svg-path-constants를 향상시키는 npm 라이브러리를 작업 중입니다. 이렇게 하면 코드에 직접 아이콘이 시각적으로 표시되므로 SVG 경로를 더 쉽게 식별하고 관리할 수 있습니다.

결론

React 프로젝트에서 SVG 경로를 관리하는 것은 번거로울 필요가 없습니다. svg-path-constants를 사용하면 아이콘을 체계적으로 정리하고 코드를 깔끔하게 유지하며 작업 흐름을 효율적으로 유지할 수 있습니다. 그리고 곧 아이콘 주석에 래스터 이미지를 추가할 수 있는 라이브러리가 출시되면 SVG 자산을 관리하는 훨씬 더 시각적이고 직관적인 방법을 갖게 될 것입니다.

오늘 svg-path-constants를 사용해 보세요:

npx svg-path-constants@latest

더 많은 업데이트를 기대해주세요!