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がstrokesまたはタグを含む場合、単一のpathなどのタグなどのタグなど、 polygon rect lineなど、フォントに変換しようとすると、これらのエラーが表示されます。

---

例

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 To Fontのいずれかを使用してこのSVGをフォントに変換しようとすると、次のエラーが発生します。

icomoon.ioエラー	fontello.comエラー	WebFontエラー

エラーを無視します

これらのエラーを無視した場合、何が起こったのですか？さて、アイコンを備えたフォントパックは、 different than expected 、 not even render at all （ブランク） "corrupt/incorrect"出てきます。

エラーを無視した結果

エラーを無視してとにかくフォントを作成するだけで、フォントパックに表示されないアイコンが表示されません。

icomoon.ioブランク	fontello.com空白	fontdrop.infoを使用してWebFontブランクを使用してフォントをプレビューします

解決策

この問題を解決するためにこのpackageを作成しました。これで、 SVGFixerを介して実行してフォントを互換性のあるSVGアイコンに"fix"ことができます。

アイコンの修正

SVGFixer()を介して実行した後のフォントパックのアイコン。

icomoon.io修正	fontello.com修正	fontdrop.infoを使用してWebFontを修正して、フォントをプレビューしました

---

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>

---