Exportation depuis Sketch pour la police d'icône


9

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.


Pouvez-vous mettre votre fichier svg sur le Web quelque part et le lier à celui-ci? Quel est exactement le problème avec icomoon? J'ai trouvé que si je ne fusionne pas mes formes vers des chemins nus et minimes, cette icomoon fera des choses étranges.
chovy

Quel est exactement le problème sur icomoon?
chovy

Je l'ai compris, j'utilisais des bordures sur le SVG et je ne savais pas que les polices d'icônes les ignoraient.
Alex McCabe

J'ai un problème similaire (peut-être le même). Faire glisser le fichier SVG exporté vers Fontello ne fait rien. Je ne peux pas dire s'il s'agit d'un bogue avec Fontello ou si le fichier n'est pas reconnu pour une raison quelconque.
elliottregan

Je suis passé à utiliser Icomoon. Il semble mieux lire les fichiers .svg. Je trouve également que si vous utilisez des bordures, cela détruira le tout.
Alex McCabe

Réponses:


11

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


J'avais complètement oublié les options de vectorisation des traits. Merci mec!
Alex McCabe

"... Assurez-vous que tous vos SVG sur le croquis ont la même hauteur." Comment gérez-vous par exemple le symbole moins ("-") pour cela?

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

1

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

entrez la description de l'image ici

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.


0

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


Malheureusement, vous ne pouvez aplatir que les formes qui se croisent. Si vous utilisez la soustraction, cela ne vous le permettra pas.
Alex McCabe

@AlexMcCabe Des nouvelles sur la façon d'aplatir les chemins qui se soustraient les uns aux autres?
Guido Bouman

Il n'y avait rien de copain, la meilleure chose à faire est de simplifier autant que possible vos formes, ou de joindre les lignes à la main. Ce qui est un cauchemar: /
Alex McCabe
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.