svg fixer

SVG -Fixierer

? v3.0.0 ist jetzt 11x schneller dank @ericfennis, siehe #89.

? v2.0.0 entfernt Canvas & JSDOM Keine langsamen npm install von Zyklen.

Versuche, Ihr SVG zu reparieren, indem Sie sie in einen Füll- / einzelnen Pfad verwandeln (und sie als Bonus kompatibel machen).

Konvertieren Sie SVG -Striche in Füllen

---

---

Dokumentations-, Installations- und Nutzungsanweisungen

Sehen Sie sich hier die vollständige Installations- und Nutzungsdokumentation an.

Das Ziel

Ich wollte einige svg icons mit Tools wie icomoon.io, fontello.com und Webfont in fonts konvertieren

Das Problem / warum

Wenn Ihre SVG strokes neben einer einzelnen path , z. B. polygon rect usw., taggen, erhalten Sie diese Fehler line wenn Sie versuchen, sie in Schriftarten umzuwandeln.

---

Beispiel

Svg

Icon -> Wir werden in diesem Beispiel verwenden

Code -> Für das Symbol

< 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 >

---

Fehler

Wenn wir versuchen, diese SVG in eine Schriftart mit einem dieser SVG To Font zu konvertieren, erhalten wir die folgenden Fehler.

iComoon.io -Fehler	fontello.com Fehler	WebFont -Fehler

Die Fehler ignorieren

Was ist passiert, wenn Sie diese Fehler ignorieren? Nun, das Schriftart mit den Symbolen wird "corrupt/incorrect" herausgestellt, different than expected oder not even render at all (leer).

Ergebnisse durch das Ignorieren der Fehler

Das Symbol, das in der Schriftart nicht angezeigt oder rendert, wenn wir die Fehler ignorieren und die Schriftart sowieso nur erstellen.

icomoon.io leer	fontello.com leer	Webfont leer mit Fontdrop.info, um die Schriftart anzunehmen

Die Lösung

Ich habe dieses package erstellt, um dieses Problem zu lösen. Jetzt können Sie SVG -Symbole "fix" , um dann kompatible zu schreiben, indem Sie sie über SVGFixer ausführen.

Das Symbol reparieren

Das Symbol in einem Schriftart, nachdem wir es durch SVGFixer() ausgeführt haben.

icomoon.io repariert	fontello.com behoben	WebFont mit fontdrop.info repariert, um die Schriftart anzunehmen

---

SVG -Code behoben

<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>

---