Exportar desde Sketch para fuente de icono

Estoy tratando de exportar iconos SVG de Sketch para importarlos a Fontello, sin embargo, los SVG no parecen ser correctos para la aplicación (tampoco funcionan en IcoMoon).

El ícono que estoy tratando de crear como prueba es un ícono simple de estilo 'hamburguesa' que son solo unas pocas líneas, pero no funcionarán correctamente. Es frustrante por decir lo menos.

¿Alguien tiene alguna experiencia con esto y podría separarse de su conocimiento? Gracias.

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

Paso 1

Evite que SVG se forme fuera de los bordes seleccionando el grupo de ruta y haciendo clic en: capa> rutas> vectorizar trazo

Para saber que esto ha funcionado, los trazos se transformaron en trazados 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 iconos SVG a icomoon como de costumbre, ahora el conjunto debe mostrar los iconos correctamente y el tamaño de la cuadrícula debe 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 del menú Boceto es Capa> Convertir en contornos

Este manual me funcionó. Es muy informativo. El escritor habla sobre 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 de la capa de bordes> trazados> vectorizar trazo (gracias Gus )
6. export Clean .svg

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

Errores de exportación de croquis

Bug # 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 apagada 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 24px. Este error incluso agregó especificaciones al código. No bueno

Bug # 2

Problema: por diseño, cada icono se configuró en ancho: 24 píxeles, altura: 24 píxeles y radio de borde: 3 píxeles. El problema es que, al exportar, el rectángulo se agregó a la ruta, lo que dificulta la escala en 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 configurado a 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 arrastre y suelte nuevamente en Sketch. Esto elimina la rotación todos juntos.

Error # 4 Problema: el uso de la herramienta de división exporta traduce y transforma de nuevo. Solución: nada. Solo no lo hagas. De todos modos, lleva mucho tiempo cortarlo y es una pérdida de tiempo.

Si está utilizando subrutas, alise la forma antes de exportar. Todavía recibí un error en Fontello sobre la creación de rutas compuestas manualmente, pero parece que funcionó correctamente.

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