Exportando do Sketch para a fonte do ícone

Estou tentando exportar ícones SVG do Sketch para importar para o Fontello, no entanto, os SVGs não parecem estar corretos para o aplicativo (eles também não funcionam no IcoMoon).

O ícone que estou tentando criar como teste é um simples ícone de estilo 'hambúrguer', com apenas algumas linhas, mas eles não funcionarão corretamente. É frustrante para dizer o mínimo.

Alguém tem alguma experiência com isso e pode participar de seus conhecimentos? Obrigado.

Eu descobri como exportar SVG do sketch para a importação correta do icomoon:

Passo 1

Para impedir que o SVG seja criado fora das bordas, selecione o grupo de caminhos e clique em: camada> caminhos> vetorizar traçado

Para saber que isso funcionou, os traços foram transformados em caminhos fechados e o inspetor agora exibe a cor de preenchimento em vez da cor da borda.

Passo 2

Exporte cada ícone / svg clicando na guia Tornar exportável no inspetor e selecionando o formato SVG.

etapa 3

Importe os ícones SVG para o icomoon, como de costume, agora o conjunto deve exibir os ícones corretamente e o tamanho da grade deve ser preciso. NOTA: Verifique se todos os seus SVGs no esboço têm a mesma altura.

ATUALIZAÇÃO 2016 Obrigado a @jackocnr por apontar que:

Em 2016, a opção de menu Esboço é Camada> Converter em contornos

Este manual funcionou para mim. é muito informativo. O escritor fala sobre problemas de exportação de esboços. Estou citando o artigo dele, caso o artigo seja removido.

Solução geral

1. Crie uma prancheta para cada ícone (insira -> prancheta).
2. Verifique se a posição de cada prancheta não possui meio pixel e é um número par.
3. Remova todas as rotações dos ícones.
4. Remova todas as caixas delimitadoras para que o Sketch não exporte código desnecessário.
5. Impedir que SVG seja feito fora da camada de bordas> caminhos> vetorizar traçado (obrigado Gus )
6. exportar .svg limpo

* este é o ícone que o escritor tentou exportar

Esboçar erros de exportação

Bug # 1

esboço fixo transforma a exportação alterando a posição da prancheta para um número par. Isso remove qualquer transformação no código. Em outra nota, como a posição estava desativada em meio pixel, o Sketch alterou o tamanho da minha caixa de exibição para 0 0 25 25. Minha prancheta original era 24 x 24px. Este bug ainda adicionou especificações ao código. Sem bueno.

Bug # 2

Problema: por design, cada ícone foi definido como largura: 24 px, altura: 24 px e raio da borda: 3 px. O problema é que, ao exportar, o retângulo foi adicionado ao caminho, dificultando a escala de css em qualquer tamanho.

Solução: exclua qualquer caixa delimitadora transparente e deixe o css fazer a mágica. Todos os desenvolvedores realmente precisavam era a caixa de visualização definida para 24 x 24px. Eles poderiam adicionar largura, altura e raio da borda.

Bug # 3

Problema: O Sketch exporta uma rotação (-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>

Solução: abra o ícone .svg no Adobe Illustrator, gire o ícone e arraste e solte novamente no Sketch. Isso remove a rotação todos juntos.

Bug # 4 Problema: o uso da ferramenta fatia exportar traduz e transforma novamente. Solução: Nada. Apenas não faça isso. Leva muito tempo para cortar de qualquer maneira e é uma perda de tempo.

Se você estiver usando subcaminhos, alise a forma antes de exportar. Ainda recebi um erro no Fontello sobre a criação de caminhos compostos manualmente, mas parece ter funcionado corretamente.

(minha forma era um círculo com duas formas recortadas).