커스텀 아이콘 사용 시 viewBox 문제 about stackticon HOT 9 CLOSED

현재까지 시도했던 방법들 정리합니다..

1. viewBox가 0 0 24 24인 아이콘을 찾자 -> 진짜 다 뒤져봤는데 없습니다..
2. svg의 viewBox 조작 시도 -> 실패
3. 커스텀 아이콘을 입력 받을 때 viewBox도 입력받기 -> 기존 simple icon들과 충돌..
4. simple icons 데이터 안에 있는 getter인 get svg() 함수 사용 -> div 태그를 직접 렌더링 할 수 없음
5. html 파일을 직접 파싱해서 뷰에 뿌려주는 dangerouslySetInnerHTML 이용 -> 보안 상 문제도 있다고 하고, viewBox 때문에 비율이 맞지 않아서 이미지가 잘리거나, 비율이 이상해짐, 이 방법은 결과를 만들 때도 문제가 많음
6. 오후 내내 매달렸는데 결국 해결 실패했습니다.. 내일 다시 볼게요...ㅜ

from stackticon.

일단 dropdown 쪽은 성공했습니다.. 뒤쪽 로직도 다 바꿔줘야 할 것 같아요
viewBox 값도 입력하게 한 뒤, 렌더링 하는 뷰 쪽에서 div로 감싸서 해결했습니다. dangerouslySetInnerHTML을 이용해서 html 파일 자체를 파싱해서 해결했어요!

from stackticon.

dropdown에서는 array, 뒤에 로딩에서 이미지를 만들 때는 객체 형태로 아이콘들을 선언하고 있어서 하나의 아이콘 정보만 입력 받고 두 가지의 형태로 데이터를 관리해야 할 것 같습니다

from stackticon.

기존에 icons 객체와 customIcons 객체를 합치고 기존 로직은 그대로 유지했습니다.
업로드는 되는데, 결과 창에서 svg를 인식하지 못하고 있습니다.

from stackticon.

아... 성공했습니다.......ㅜ
앞의 dropdown과 같은 방법으로 svg html파일 자체를 렌더링 한 후, svg와 그것을 감싸는 div의 크기를 고정해서 해결했습니다.

파일 나누고, contribute 하기 쉽게 만들어서 올려놓겠습니다!

from stackticon.

7. 좌표 형태로 그래픽을 표현하는 svg의 중심점을 설정하는 값인 cx, cy 값을 조작해도 소용이 없습니다.
8. viewBox 크기를 엄청 키우면 나오긴 하는데.. viewBox값이 원래 작은 아이콘이라면 오히려 너무 작아져서 의미는 없는 것 같아요

from stackticon.

9. svg 바깥을 크기가 정해진 div로 감싸도 소용이 없습니다..

from stackticon.

만약에.. 커스텀 svg에 viewBox props를 받는다면 기존 아이콘들의 viewBox는 모듈을 직접 만져야 할까요..?

from stackticon.

오오 제가 pr을 읽으면서 가졌던 모든 의문점들이 한번에 정리되어있네요..! 제가 내일 다시 한번 읽어보고 제대로 리뷰 남기겠습니다!

from stackticon.