J'essaie d'exporter des icônes SVG de Sketch pour les importer dans Fontello, mais les SVG ne semblent pas être corrects pour l'application (ils ne fonctionnent pas non plus dans IcoMoon).
L'icône que j'essaie de créer comme test est une simple icône de style «hamburger» qui ne fait que quelques lignes, mais elles ne fonctionneront pas correctement. C'est pour le moins frustrant.
Quelqu'un a-t-il une expérience dans ce domaine et pourrait-il se séparer de ses connaissances? Je vous remercie.
fonts
icon
sketch-app
Alex McCabe
la source
la source
Réponses:
J'ai compris comment exporter SVG à partir d'un croquis pour importer correctement icomoon:
Étape 1
Empêchez SVG de se faire hors des frontières en sélectionnant le groupe de chemins et en cliquant sur: calque> chemins> vectoriser le trait
Pour savoir que cela a fonctionné, les traits ont été transformés en chemins fermés et l'inspecteur affiche désormais la couleur de remplissage au lieu de la couleur de la bordure.
Étape 2
Exportez chaque icône / svg en cliquant sur l' onglet Rendre exportable de l'inspecteur et en sélectionnant le format SVG.
Étape 3
Importez les icônes SVG dans icomoon comme d'habitude, maintenant l'ensemble doit afficher correctement les icônes et la taille de la grille doit être précise. REMARQUE: assurez-vous que tous vos SVG sur le croquis ont la même hauteur.
MISE À JOUR 2016 Merci à @jackocnr d'avoir souligné que:
la source
Ce manuel a fonctionné pour moi. c'est très instructif. L'écrivain parle de problèmes d'exportation de croquis. je cite son article au cas où l'article serait supprimé.
Solution globale
* c'est l'icône que l'auteur a essayé d'exporter
Croquis d'exportation de bogues
Bug # 1
Correction de l'exportation de transformation d'esquisse en modifiant la position du plan de travail en un nombre pair. Cela supprime toute transformation dans le code. Sur une autre note, comme la position était décalée d'un demi-pixel, Sketch a changé la taille de ma fenêtre d'affichage à 0 0 25 25. Mon plan de travail d'origine était de 24 x 24 pixels. Ce bug a même ajouté des spécifications au code. Pas de bueno.
Bug # 2
Problème: par conception, chaque icône était définie sur une largeur: 24 pixels, une hauteur: 24 pixels et un rayon de bordure: 3 pixels. Le problème est que, lors de l'exportation, le rectangle a été ajouté dans le chemin, ce qui rend difficile la mise à l'échelle de n'importe quelle taille par CSS.
Solution: supprimez toute zone de délimitation transparente et laissez css faire la magie. Tout ce dont les développeurs avaient vraiment besoin, c'était de la boîte de visionnement réglée sur 24 x 24 pixels. Ils pourraient ajouter la largeur, la hauteur et le rayon de la bordure.
Bug # 3
Problème: Sketch exporte une rotation (-180.000000).
Solution: ouvrez votre icône .svg dans Adobe Illustrator, faites-la pivoter, puis faites-la glisser vers Sketch. Cela supprime la rotation tous ensemble.
Bogue n ° 4 Problème: en utilisant l'exportation de l'outil de tranche, traduire et transformer à nouveau. Solution: rien. Ne le fais pas. Cela prend trop de temps à couper et c'est une perte de temps.
la source
Si vous utilisez des sous-chemins, aplatissez la forme avant d'exporter. J'ai toujours une erreur dans Fontello sur la création manuelle de chemins composés, mais cela semble avoir fonctionné correctement.
(ma forme était un cercle avec deux formes découpées.)
la source