svg fixer

SVG FIXER

? V3.0.0 ahora es 11 veces más rápido gracias a @ericfennis, ver #89.

? V2.0.0 eliminó Canvas & JSDOM no más ciclos npm install lentos.

Intenta arreglar su SVG convirtiéndolo en una ruta de relleno / simple (y haciéndola compatible con la fuente como una bonificación).

Convertir los trazos de SVG en rellenos

---

---

Instrucciones de documentación, instalación e uso

Vea la documentación completa de instalación y uso aquí.

El objetivo

Quería convertir algunos svg icons en fonts usando herramientas como Icomoon.io, Fontello.com y WebFont

El problema / por qué

Si su SVG contemplan strokes o cualquier etiqueta además de una sola path , por ejemplo, line polygon rect , etc., obtendrá estos errores al intentar convertirlos en fuentes.

---

Ejemplo

SVG

Icon -> usaremos en este ejemplo

Code -> para el icono

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

---

Errores

Cuando intentamos convertir este SVG en una fuente utilizando una de estas herramientas de conversión SVG To Font obtenemos los siguientes errores.

Error de icomoon.io	error de fontello.com	Error de la fuente web

Ignorando los errores

¿Qué pasa si ignoras estos errores? Bueno, el paquete de fuentes con los ícono (s) saldrá "corrupt/incorrect" , different than expected o not even render at all (en blanco).

Resultados de ignorar los errores

El icono que no se muestra o representa en el paquete de fuentes cuando ignoramos los errores y simplemente creamos la fuente de todos modos.

icomoon.io en blanco	fontello.com en blanco	WebFont Blank usando FontDrop.info para obtener una vista previa de la fuente

La solución

Creé este package para resolver este problema, ahora puede "fix" los iconos SVG para hacer y luego compatibles con la fuente ejecutándolos a través de SVGFixer .

Arregle el icono

El icono en un paquete de fuentes después de ejecutarlo a través de SVGFixer() .

icomoon.io fijado	Fontello.com solucionado	WebFont se solucionó con fontdrop.info para obtener una vista previa de la fuente

---

Código SVG fijo

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

---