svg fixer

Fixateur SVG

? V3.0.0 est maintenant 11x plus rapide grâce à @ericfennis, voir # 89.

? v2.0.0 Retiré Canvas & JSDOM Pas plus de cycles npm install lents.

Tente de réparer votre SVG en le transformant en un chemin de remplissage / unique (et le rendre compatible en tant que bonus).

Convertir les traits SVG en remplissage

---

---

Instructions de documentation, d'installation et d'utilisation

Voir la documentation complète de l'installation et de l'utilisation ici.

L'objectif

Je voulais convertir certaines svg icons en fonts à l'aide d'outils comme iComoon.io, Fontello.com et WebFont

Le problème / pourquoi

Si votre SVG contenait strokes ou des étiquettes en plus d'un seul path par exemple line rect polygon , etc., vous obtiendrez ces erreurs lorsque vous essayez de les convertir en polices.

---

Exemple

SVG

Icon -> Nous utiliserons dans cet exemple

Code -> pour l'icône

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

---

Erreurs

Lorsque nous essayons de convertir ce SVG en une police en utilisant l'un de ces outils de conversion SVG To Font nous obtenons les erreurs suivantes.

Erreur iComoon.io	Erreur de Fontello.com	Erreur Webfont

Ignorer les erreurs

Qu'est-ce qui se passe si vous ignorez ces erreurs? Eh bien, le pack de polices avec les icônes sortira "corrupt/incorrect" , different than expected ou not even render at all (vide).

Résulte de l'ignorance des erreurs

L'icône ne se présentant pas ou ne rendant pas dans le pack de polices lorsque nous ignorons les erreurs et créons de toute façon la police.

iComoon.io vide	Fontello.com vide	webfont vide utilisant fontdrop.info pour prévisualiser la police

La solution

J'ai créé ce package pour résoudre ce problème, vous pouvez désormais "fix" les icônes SVG pour rendre la police compatible en les exécutant via SVGFixer .

Fixation de l'icône

L'icône dans un pack de polices après l'avoir exécutée via SVGFixer() .

iomoon.io fixe	Fontello.com fixe	webfont corrigé à l'aide de Fontdrop.info pour prévisualiser la police

---

Correction du code 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>

---