[HTML] SVG -> tsx 변환하기

[Seunghun Kang]

✨ What?
발견된 이슈 간단히 정리하기

📚 캡쳐한 사진들

Ex) 
clock.svg -> clock.tsx 변환

---

#!/bin/bash

# svg filename 받기
echo "Enter the svg filename: "
read svgFileName
echo "echo $svgFileName"

# svg 파일명 만들기
type=".svg"
svgFile=$svgFileName$type
echo "echo $svgFile"

# svg 파일에 접근해서 안에 정보를 가지고 오기
svgValue=`cat $svgFile`
echo "value $svgValue"

# 새 tsx 컴포넌트 파일명 만들기
newFileName=$( echo ${svgFileName}"_icon" | perl -pe 's/(^|_)./uc($&)/ge;s/_//g')
newFile=$newFileName".tsx"
echo $newFile

# tsx 컴포넌트 파일에 script 넣기

cat > $newFile <<EOF
import { s } from './icon.style'
import React from 'react'
import { IconProps } from '../iconProps'

export const $newFileName = React.forwardRef<SVGSVGElement, IconProps>(
  ({ size = 16, name = 'icon', color, style, ...props }: IconProps, ref) => {
    return (
      $svgValue
    )
  }
)

EOF


# svg 에 있는 width="xx", height="xx", fill="xx" 제거하기
sed -i "" 's/width="24"//g' $newFile
sed -i "" 's/height="24"//g' $newFile

# svg 에 props 넣어주기
sed -i "" 's/fill="none"/\ncss={s}\nstyle={{ width: size, color, ...style }}\ndata-svg-name={name}\n{...props}\nref={ref}/g' $newFileName.tsx

#  index.ts 에 tsx export 추가하기
newFilePath="export { $newFileName } from './$newFileName' "
echo $newFilePath >> index.ts

# 원본 svg 제거하기
rm -rf $svgFileName".svg"

# ------------------
# - 참고
# https://wikidocs.net/33828
# https://codechacha.com/ko/shell-script-substring/

[Seunghun Kang]

TODO

• figma에 등록되면 자동으로 모노레포에도 추가하기 - 채널톡 - 피그마 아이콘 추가하기 글