Exportation depuis Sketch pour la police d'icône

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.

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:

En 2016, l'option de menu Esquisse est Calque> Convertir en contours

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

1. Créez un plan de travail pour chaque icône (insérer -> plan de travail).
2. Assurez-vous que la position de chaque planche graphique n'a pas de demi-pixels et est un nombre pair.
3. Supprimez toutes les rotations d'icônes.
4. Supprimez toutes les zones de délimitation afin que Sketch n'exporte pas le code inutile.
5. Empêchez SVG d'être créé à partir de la couche de frontières> chemins> vectoriser le trait (merci Gus )
6. exporter Clean .svg

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

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

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.

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