Exportación desde Sketch para fuente de icono

Descubrí cómo exportar SVG desde el boceto para la importación correcta de icomoon:

Paso 1

Evite que SVG se convierta en bordes seleccionando el grupo de rutas y haciendo clic en: capa > rutas > vectorizar trazo

Para saber que esto funcionó, los trazos se transformaron en trazos cerrados y el inspector ahora muestra el color de relleno en lugar del color del borde.

Paso 2

Exporte cada icono/svg haciendo clic en la pestaña Hacer exportable en el inspector y seleccionando el formato SVG.

Paso 3

Importe los íconos SVG a icomoon como de costumbre, ahora el conjunto debería mostrar los íconos correctamente y el tamaño de la cuadrícula debería ser preciso. NOTA: Asegúrese de que todos sus SVG en el boceto tengan la misma altura.

ACTUALIZACIÓN 2016 Gracias a @jackocnr por señalar que:

En 2016, la opción de menú Boceto es Capa > Convertir en contornos

Este manual funcionó para mí. es muy informativo El escritor habla de los problemas de exportación de bocetos. Estoy citando su artículo en caso de que el artículo sea eliminado.

Solución general

1. Cree una mesa de trabajo para cada icono (insertar -> mesa de trabajo).
2. Asegúrese de que la posición de cada mesa de trabajo no tenga medios píxeles y sea un número par.
3. Eliminar todas las rotaciones de iconos.
4. Elimine los cuadros delimitadores para que Sketch no exporte código innecesario.
5. Evite que SVG se haga a partir de la capa de bordes> rutas> vectorizar trazo (gracias Gus )
6. exportar Limpiar .svg

*este es el ícono que el escritor intentó exportar

Sketch exportando errores

Error #1

exportación de transformación de boceto fija cambiando la posición de la mesa de trabajo a un número par. Esto elimina cualquier transformación en el código. En otra nota, dado que la posición estaba desfasada por medio píxel, Sketch cambió el tamaño de mi viewbox a 0 0 25 25. Mi mesa de trabajo original era de 24 x 24 px. Este error incluso agregó especificaciones al código. No bueno.

Error #2

Problema: por diseño, cada ícono se estableció en ancho: 24 px, alto: 24 px y radio de borde: 3 px. El problema es que, al exportar, el rectángulo se agregó a la ruta, lo que dificulta la escala a cualquier tamaño mediante css.

Solución: elimine cualquier cuadro delimitador transparente y deje que css haga la magia. Todo lo que los desarrolladores realmente necesitaban era el viewbox establecido en 24 x 24px. Podrían agregar el ancho, la altura y el radio del borde.

Error #3

Problema: Sketch exporta una rotación (-180.000000).

<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>

Solución: Abra su icono .svg en Adobe Illustrator, gire el icono, luego arrástrelo y suéltelo nuevamente en Sketch. Esto elimina la rotación todos juntos.

Problema de error n.° 4 : al usar la herramienta de división, exportar, traducir y transformar de nuevo. Solución: Nada. Simplemente no lo hagas. De todos modos, lleva demasiado tiempo cortarlo y es una pérdida de tiempo.

Si utiliza subtrazados, aplane la forma antes de exportar. Todavía recibo un error en Fontello sobre la creación manual de rutas compuestas, pero parece haber funcionado correctamente.

(mi forma era un círculo con dos formas recortadas).