svg fixer

SVG 고정 장치

? v3.0.0은 이제 @ericfennis 덕분에 11 배 빠릅니다. #89를 참조하십시오.

? v2.0.0 제거 Canvas & JSDOM 더 이상 느린 npm install 주기가 없습니다.

SVG를 충전 / 단일 경로로 바꾸어 SVG를 고정하려고 시도합니다 (그리고 글꼴로 보너스로 호환 가능).

SVG 스트로크를 충전으로 변환하십시오

---

---

문서화, 설치 및 사용 지침

여기에서 전체 설치 및 사용 설명서를 참조하십시오.

목표

icomoon.io, fontello.com 및 webfont와 같은 도구를 사용하여 일부 svg icons fonts 로 변환하고 싶었습니다.

문제 / 이유

SVG가 단일 path , 즉 polygon rect line 등 외에 strokes 또는 태그를 포함하는 경우 글꼴로 변환하려고 할 때 이러한 오류가 발생합니다.

---

예

SVG

Icon ->이 예제에서는 사용할 것입니다

Code -> 아이콘의 경우

< svg
xmlns= " http://www.w3.org/2000/svg "
width= " 24 "
height= " 24 "
viewBox= " 0 0 24 24 "
fill= " none "
stroke= " currentColor "
stroke-width= " 2 "
stroke-linecap= " round "
stroke-linejoin= " round " >
< rect x = " 3 " y = " 3 " width = " 18 " height = " 18 " rx = " 2 " ry = " 2 " />
< line x1 = " 9 " y1 = " 9 " x2 = " 15 " y2 = " 15 " />
< line x1 = " 15 " y1 = " 9 " x2 = " 9 " y2 = " 15 " />
</ svg >

---

오류

이 SVG 글꼴로 변환 도구로 사용 하여이 SVG To Font 로 변환하려고하면 다음 오류가 발생합니다.

icomoon.io 오류	fontello.com 오류	웹 폰트 오류

오류를 무시합니다

이러한 오류를 무시하면 어떻게 되나요? 글쎄, 아이콘이있는 글꼴 팩은 "corrupt/incorrect" 이 나오며, different than expected 렌더링되지 않거나 not even render at all (빈).

오류를 무시한 결과

오류를 무시하고 어쨌든 글꼴을 만들 때 글꼴 팩에 아이콘이 표시되거나 렌더링되지 않습니다.

icomoon.io blank	fontello.com blank	fontdrop.info를 사용하여 WebFont blank를 미리 봅니다

해결책

이 문제를 해결하기 위해이 package 만들었습니다. 이제 SVG 아이콘을 "fix" 하여 SVGFixer 를 통해 글꼴을 호환 할 수 있습니다.

아이콘 수정

SVGFixer() 를 통해 실행 한 후 글꼴 팩의 아이콘.

icomoon.io 고정	fontello.com 고정	WebFont는 fontdrop.info를 사용하여 고정되어 글꼴을 미리 봅니다

---

수정 된 SVG 코드

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.620 2.025 C 4.212 2.105,4.087 2.139,3.870 2.227 C 2.989 2.585,2.321 3.364,2.076 4.320 C 1.993 4.647,1.992 19.351,2.076 19.677 C 2.357 20.776,3.117 21.553,4.260 21.915 C 4.439 21.971,5.243 21.979,11.820 21.990 C 16.818 21.998,19.268 21.989,19.453 21.960 C 20.643 21.777,21.620 20.876,21.924 19.680 C 22.007 19.352,22.008 4.648,21.924 4.323 C 21.617 3.126,20.660 2.233,19.480 2.043 C 19.234 2.003,4.819 1.986,4.620 2.025 M19.340 4.066 C 19.455 4.105,19.603 4.201,19.701 4.299 C 20.025 4.623,20.000 3.977,20.000 12.000 C 20.000 20.023,20.025 19.377,19.701 19.701 C 19.377 20.025,20.023 20.000,12.000 20.000 C 3.975 20.000,4.623 20.025,4.298 19.700 C 3.974 19.376,3.998 20.028,4.010 11.918 L 4.020 4.700 4.131 4.511 C 4.256 4.298,4.449 4.136,4.670 4.057 C 4.793 4.013,6.104 4.003,11.983 4.002 C 18.548 4.000,19.162 4.006,19.340 4.066 M8.643 8.069 C 8.291 8.193,8.000 8.614,8.000 9.000 C 8.000 9.080,8.030 9.234,8.066 9.343 C 8.123 9.517,8.276 9.685,9.354 10.770 L 10.577 12.000 9.354 13.230 C 8.276 14.315,8.123 14.483,8.066 14.657 C 7.936 15.046,8.021 15.423,8.299 15.701 C 8.577 15.979,8.954 16.064,9.343 15.934 C 9.517 15.877,9.685 15.724,10.770 14.646 L 12.000 13.423 13.230 14.646 C 14.315 15.724,14.483 15.877,14.657 15.934 C 15.046 16.064,15.423 15.979,15.701 15.701 C 15.979 15.423,16.064 15.046,15.934 14.657 C 15.877 14.483,15.724 14.315,14.646 13.230 L 13.423 12.000 14.646 10.770 C 15.724 9.685,15.877 9.517,15.934 9.343 C 16.064 8.954,15.979 8.577,15.701 8.299 C 15.423 8.021,15.046 7.936,14.657 8.066 C 14.483 8.123,14.315 8.276,13.230 9.354 L 12.000 10.577 10.770 9.354 C 9.685 8.276,9.517 8.123,9.343 8.066 C 9.102 7.985,8.877 7.986,8.643 8.069 " stroke="none" fill="black" fill-rule="evenodd"></path></svg>

---