SVG를 React 17/TypeScript 구성 요소 + Ion 아이콘으로 변환하는 도구

이 흥미로운 게시물Making SVG icon libraries for React app 이후로 SVG 파일을 수동으로 React 구성 요소로 변환하고 있습니다. 이제 프로세스를 자동화하는 도구를 만들었으며 여러분에게도 유용할 수 있습니다.

다른 사람들은 특히 아이콘에 SVG-React 구성 요소를 사용하고 있습니다.

https://github.com/react-icons/react-icons

https://primer.style/octicons/packages/react

이 도구는 여기에 있습니다: https://github.com/cpmech/svg-to-react , 아이콘뿐만 아니라 작동해야 합니다.

내가 고려한 몇 가지 주요 측면은 다음과 같습니다.

React 17 구성 요소를 생성합니다. "import React..."가 없는 것

내 프로젝트에 복사하여 붙여넣을 수 있는 TypeScript 구성 요소 생성

경로 색상을 최적화하고 (시도) 수정하십시오.

SVG를 CSS 플렉스 컴포지션으로 래핑하여 SVG 크기를 쉽게 조정할 수 있도록 합니다.

이러한 목표를 달성하기 위해 다음을 사용합니다.

svgo SVG를 최적화하기 위해 많이.

svgson fill="currentColor"(선택 사항) 수정

용법:

✔ What is the "input" directory? · /tmp/svg-to-react/assets
✔ What is the "output" directory? · /tmp/svg-to-react/svgs
✔ What is the prefix for the components? · Svg
✔ What is the base url for XCollection.tsx? · 
✔ Add fill="currentColor" if missing? (Y/n) · true
✔ Delete existent output directory? ️⚠️  (y/N) · true
🚀 Processing SVG files
... processing SvgLogoGithub
... processing SvgLogoWhatsapp
... processing SvgSync
😀 DONE

결과 코드를 사용하면 SVG 파일의 크기를 쉽게 조정하고 중앙에 배치할 수 있습니다. 이 도구는 생성된 모든 SVG를 시각화하기 위해 XCollection.tsx 구성 요소도 생성합니다.

예를 들어, 나는 React 아이콘을 만드는 데 사용했습니다(다시 ;-): https://github.com/cpmech/iricons

생성된 React 구성 요소는 다음과 같습니다.

export interface SvgSyncProps {
  size?: string; // size of square container
  style?: React.CSSProperties; // not for height or width
}

export const SvgSync: React.FC<SvgSyncProps> = ({ size = '24px', style }) => {
  return (
    <div
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        ...style,
        height: size,
        width: size,
      }}
    >
      <div
        style={{
          position: 'relative',
          height: 0,
          width: '100%',
          padding: 0,
          paddingBottom: '100%',
        }}
      >
        <svg
          style={{
            position: 'absolute',
            height: '100%',
            width: '100%',
            left: 0,
            top: 0,
          }}
          viewBox="0 0 512 512"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="..." fill="currentColor"/>
        </svg>
      </div>
    </div>
  );
};

그리고 React 프로젝트로 직접 가져올 수 있습니다.

도움이 되길 바랍니다 😀