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.
fonts
icon
sketch-app
Alex McCabe
fuente
fuente
Respuestas:
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:
fuente
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
* 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).
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.
fuente
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).
fuente