[Feature] svg 아이콘 컴포넌트 방식 변환 자동화 스크립트 작성 #31
Conversation
ghdtjgus76
requested review from
eugene028,
hamo-o,
SeieunYoo and
kongnayeon
as code owners
| JSX: true, | ||
| console: true, |
There was a problem hiding this comment.
이건 자꾸 console이 정의되지 않은 거라고 되어 있어서 추가했습니다
packages/wow-icons/package.json
Outdated
| "scripts": { | ||
| "build": "rm -rf dist && rollup -c --bundleConfigAsCjs && tsc --emitDeclarationOnly" | ||
| "build": "pnpm generate:icons && rm -rf dist && rollup -c --bundleConfigAsCjs && tsc --emitDeclarationOnly", | ||
| "generate:icons": "tsx ../scripts/generateReactComponentFromSvg.ts && pnpm format && pnpm lint", | ||
| "lint": "eslint --fix ./src/react/**/*.tsx", | ||
| "format": "prettier --write ./src/react/**/*.tsx ./src/react/index.ts" |
There was a problem hiding this comment.
wow-icons 빌드할 때 아이콘 자동 변환하도록 해놨습니다.
| import path from "path"; | ||
|
|
||
| const SVG_DIR = "../wow-icons/src/svg"; | ||
| const COMPONENT_DIR = "../wow-icons/src/react"; |
There was a problem hiding this comment.
디렉토리가 없어서 만들어주고 generate 해봤습니다!! 넘모 신기해요.
잘 되는데 요렇게 react 폴더 내부에 만들어지는걸 의도하신게 맞을까요?! 기존 UpArrow 컴포넌트 위치 때문에 쪼끔 헷갈렸네요
There was a problem hiding this comment.
아하 넵 일단은 svg 폴더 내부에 필요한 파일들 다 넣어두고 스크립트 실행시키면 react 폴더에 변환된 아이콘 + export 파일 생성되게 하는 걸 의도했어요
react 폴더 없는 경우는 고려하지 못한 거 같아서 그 부분도 코드 추가해서 올려놨습니다!
확인해보니까 그런 거 같아요! |
저도 그럼 현 상태 유지해도 괜찮을 것 같다는 생각이 듭니다!!! |
| import { forwardRef } from 'react'; | ||
| import { color } from "wowds-tokens"; | ||
|
|
||
| import type { IconProps } from "@/types/Icon.ts"; | ||
|
|
||
| const ${componentName} = forwardRef<SVGSVGElement, IconProps>( | ||
| ({ className, width = 24, height = 24, viewBox = "0 0 24 24", fill = "white", stroke = "white", ...rest }, ref) => { | ||
| return ( | ||
| ${modifiedSvgContent} | ||
| ); | ||
| } | ||
| ); | ||
|
|
There was a problem hiding this comment.
p3;
내부 svg 에서 color 가 적용될 때 fill 이나 stroke 가 하나만 적용되는 아이콘의 경우에는 prop 이 쓰이지 않았다고 린트 에러가 나는 것 같아요! 린트 에러가 발생하지 않도록 수정해보면 어떨까요? 저는 아래의 2가지 방법이 생각납니당!
- 린팅 에러를 해결하는 주석도 코드에 넣어주기
- stroke 만 적용되는 경우에는 stroke prop 만 전달되도록 수정하기
There was a problem hiding this comment.
두 번째 방식으로 해결했어요!
fill이나 stroke 중 사용되지 않는 경우 prop으로 전달하지 않도록 했습니다~
| const componentContent = createComponentContent( | ||
| componentName, | ||
| svgContent, | ||
| svgFile | ||
| ); | ||
| const componentFilePath = path.resolve( | ||
| COMPONENT_DIR, | ||
| `${componentName}.tsx` | ||
| ); | ||
|
|
||
| await fs.writeFile(componentFilePath, componentContent); | ||
| components.push(componentName); | ||
| } |
There was a problem hiding this comment.
p4;
이미 생성된 컴포넌트의 경우에는 다시 만들지 않고 새로운 svg(아직 컴포넌트화 되지 않은 아이콘)들만 컴포넌트로 만들면 어떨까요?
There was a problem hiding this comment.
굿굿 좋습니다! 반영해뒀습니다~!
원래는 잘 됐는데, 마지막에 절대 경로로 import하도록 변경해서 그런 거 같아요.. 
롤업 관련해서 절대 경로 설정 좀 해보다가 안 되길래,,, 일단은 이전처럼 상대 경로로 불러오도록 수정해놨어요 |
ghdtjgus76
changed the title
🎉 변경 사항
svg 아이콘을 컴포넌트 방식으로 변환하는 자동화 스크립트 작성했습니다.
기존 wow-ui에서 사용하던 스크립트와 이 스크립트를 별도의 패키지로 관리하는 게 나을 거 같아 scripts라는 패키지로 이동시켰습니다.
이번에 작성한 스크립트는 generateReactComponentFromSvg 파일인데, 주요 로직은 다음과 같습니다.
🚩 관련 이슈
🙏 여기는 꼭 봐주세요!
한 가지 롤업 설정 관련해서 해결해야 할 문제가 있습니다.
이전에 현영님이 말씀하신 use client 주석이 사라지는 문제를 해결하기 위해서 wow-ui rollup.config에 관련 설정을 해놨습니다.
이때 두 가지 설정을 해놨는데, rollup-plugin-preserve-directives 플러그인을 사용하도록 지정해줬고, 이 플러그인을 쓰기 위해서는 preserveModules 속성을 활성화해야 한다고 해서 같이 설정해놨습니다.
그런데, wow-ui 패키지를 빌드하면 styled-system도 같이 빌드됩니다.
preserveModules 속성을 true로 지정해주면 현재 폴더 구조를 최대한 유지?하려는 식으로 동작한다고 하네요
rollup/rollup#3684 (comment)
https://so-so.dev/tool/rollup/rollupjs-config/#preservemodules
어제 계속 해결 방법을 좀 찾아보긴 했는데 아직 유의미한 방법을 모르겠어서 일단 올립니다.