Exportar desde Sketch para fuente de icono

9

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.

Alex McCabe
fuente
¿Puedes poner tu archivo svg en la web en algún lugar y vincularlo? ¿Cuál es exactamente el problema con icomoon? Descubrí que si no fusiono mis formas con senderos mínimos, ese icomoon hará cosas raras.
chovy
¿Cuál es exactamente el problema en icomoon?
chovy
Lo descubrí, estaba usando bordes en el SVG y no me di cuenta de que las fuentes de iconos los ignoraron.
Alex McCabe
Tengo un problema similar (tal vez el mismo). Arrastrar el archivo SVG exportado a Fontello no hace nada. No puedo decir si es un error con Fontello, o si el archivo no se reconoce por alguna razón.
elliottregan
Me mudé a usar Icomoon. Parece leer mejor los archivos .svg. También encuentro que si usas bordes, tirarás todo.
Alex McCabe

Respuestas:

11

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

Gus
fuente
Me había olvidado por completo de las opciones de trazo de vectorización. ¡Gracias hombre!
Alex McCabe
"... Asegúrese de que todos sus SVG en el boceto tengan la misma altura". ¿Cómo maneja, por ejemplo, el símbolo menos ("-") para esto?
1
En 2016, la opción de menú Boceto es Capa> Convertir en contornos
jackocnr
1

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

ingrese la descripción de la imagen aquí

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.

O Frenkel
fuente
0

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

elliottregan
fuente
Desafortunadamente, solo puedes aplanar las formas que se cruzan entre sí. Si estás usando restar, no te lo permitirá.
Alex McCabe
@AlexMcCabe ¿Alguna noticia sobre cómo aplanar caminos que se restan entre sí?
Guido Bouman
No había nada amigo, lo mejor que puedes hacer es simplificar tus formas tanto como sea posible, o unir las líneas a mano. Lo cual es una pesadilla: /
Alex McCabe