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.
— Alex McCabe
Você pode colocar seu arquivo svg na web em algum lugar e criar um link para ele? Qual é exatamente o problema com o icomoon? Descobri que, se não unir minhas formas a caminhos mínimos, esse icomoon fará coisas estranhas.
— chovy 20/09/14
Qual é exatamente o problema no icomoon?
Eu descobri, estava usando bordas no SVG e não percebi que as fontes de ícone as ignoravam.
Estou tendo um problema semelhante (talvez o mesmo). Arrastar o arquivo SVG exportado para o Fontello não faz nada. Não sei dizer se é um erro do Fontello ou se o arquivo não é reconhecido por algum motivo.
Eu mudei para usar o Icomoon. Parece ler melhor os arquivos .svg. Também acho que, se você usar bordas, isso acabará com tudo.
Eu descobri como exportar SVG do sketch para a importação correta do icomoon:
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.
Exporte cada ícone / svg clicando na guia Tornar exportável no inspetor e selecionando o formato SVG.
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
Eu tinha me esquecido completamente das opções de vetorização de traços. Valeu cara!
"... Verifique se todos os seus SVGs no esboço têm a mesma altura." Como você gerencia, por exemplo, o símbolo de menos ("-") para isso?
Em 2016, a opção de menu Sketch é Camada> Converter em Contornos
— jackocnr
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.
Crie uma prancheta para cada ícone (insira -> prancheta).
Verifique se a posição de cada prancheta não possui meio pixel e é um número par.
Remova todas as rotações dos ícones.
Remova todas as caixas delimitadoras para que o Sketch não exporte código desnecessário.
Impedir que SVG seja feito fora da camada de bordas> caminhos> vetorizar traçado (obrigado Gus )
exportar .svg limpo
* este é o ícone que o escritor tentou exportar
Esboçar erros de exportação
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.
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.
Problema: O Sketch exporta uma rotação (-180.000000).
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.
— Ou Frenkel
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).
— elliottregan
Infelizmente, você só pode achatar nas formas que se cruzam. Se você estiver usando subtrair, não permitirá.
@AlexMcCabe Alguma novidade sobre como nivelar caminhos que subtraem um ao outro?
Não havia nada de amigo, a melhor coisa a fazer é simplificar suas formas o máximo possível ou juntar as linhas manualmente. O que é um pesadelo: /