64 votes

Comment utiliser les symboles SF dans iOS 12 et suivants ?

Je mets à jour les icônes de mon application. Après avoir entendu qu'Apple avait sorti une police d'icônes nommée SF Symbols avec iOS 13, je me demandais si je pouvais les utiliser uniquement dans iOS 13 ou s'il est possible de les utiliser également dans les versions inférieures d'iOS.

Si je veux les utiliser, dois-je mettre en place une solution de repli pour les anciennes versions ?

0 votes

Sachez que de nombreux symboles ne peut être utilisé que pour établir un lien spécifique avec des fonctionnalités d'Apple. "Certains symboles ne peuvent être utilisés que pour faire référence aux technologies Apple ..." developer.apple.com/design/human-interface-guidelines/ défilement vers le bas jusqu'à Symboles pour une utilisation en l'état et remarquez la table.

0 votes

Ainsi, par exemple, le symbole "nuage" (parfait) de SFSymbols. ne peut être utilisé que comme un lien vers iCloud. Vous ne pouvez malheureusement pas l'utiliser comme un lien général vers le "nuage". les symboles (parfaits) semblables à ceux d'un appareil photo ne peut être utilisé que comme un lien vers FaceTime. Vous ne pouvez malheureusement pas l'utiliser comme un lien général "caméra".

80voto

funkenstrahlen Points 909

Vous ne pouvez pas utiliser les SFSymbols en mode natif dans les versions d'iOS antérieures à iOS 13 (voir le document d'Apple intitulé Directives pour l'interface humaine pour les symboles SF).

Toutefois, si vous souhaitez utiliser les graphiques, vous pouvez utiliser la fonction Application SFSymbols pour exporter des versions SVG de l'icône. Utilisez ensuite un outil graphique pour les convertir en icônes PNG que vous pourrez importer dans votre catalogue de ressources.

Screenshot how to export SVG from SFSymbols app on Mac.

15voto

user25917 Points 148

Vous pouvez ouvrir le fichier .svg avec Figma. Sélectionnez ensuite le Regular-M et exportez-le en PDF ou PNG.


Mise à jour pour plus de détails :

Vous pouvez utiliser les actifs vectoriels PDF dans Xcode. Ainsi, l'icône s'adaptera à la taille que vous souhaitez. Veuillez consulter ce blog : https://useyourloaf.com/blog/xcode-9-vector-images/

Le nouveau Xcode a une interface différente mais fondamentalement la même. Dans le catalogue des actifs :

  1. Faites glisser votre fichier vectoriel PDF.
  2. Cochez "Préserver les données vectorielles".
  3. Choisissez "Single Scale" (échelle unique)

1 votes

Je veux utiliser l'icône dans un bouton de la barre d'outils mais l'icône n'a pas la même taille que les autres icônes du système. Existe-t-il un moyen de réduire sa taille ?

0 votes

@huckjulius Vous pouvez utiliser Figma pour ajuster la taille vectorielle de l'icône directement. Ou vous pouvez exporter vers le fichier vectoriel PDF puis changer la taille dynamiquement (dans le code).

3 votes

La meilleure réponse. Glissez et déposez le fichier exporté de SF Symbols dans Sigma, puis cliquez sur une image vectorielle et sur le panneau de droite, exportez. C'est fait.

8voto

Olympiloutre Points 342

Travail en cours

Je n'ai pas réussi à trouver la solution, j'ai abandonné, mais en fait je suis allé assez loin dans mes recherches. Peut-être que quelqu'un de plus chanceux que moi sera capable de trouver hpw pour continuer le travail que j'ai commencé :

Dans la documentation d'Apple, il est indiqué que, afin de parcourir facilement tous les nouveaux symboles SF d'iOS 13, vous pouvez télécharger l'application SF Symbols : https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

Une fois installé, vous pouvez aller dans Application > SF Symbols > showPackage content

enter image description here

A partir de là, sous content > Resources nous pouvons trouver un fichier intéressant nommé SFSymbolsFallback.ttf

enter image description here

Et si vous essayez d'ouvrir ce fichier sur https://fontdrop.info/ vous pouvez voir qu'il contient tous les glyphes de la police qui sont publiés dans iOS 13 sous le nom de SF Font, avec les éléments suivants associés unicodes

enter image description here


Bingo ? Pas si vite...

À partir de là, j'ai essayé d'importer ce .ttf dans mon projet sous iOS 12, avec XCode 10.2.1, mais il semble qu'il ne soit jamais correctement importé. Il n'est pas récupérable dans la liste des polices disponibles en appelant UIFont.familyNames

Plus intéressant encore, si j'essaie d'importer cette police en Livre de polices je reçois un avertissement disant qu'elle contient duplication un conflit avec une police existante

enter image description here


A partir de là ?

Je pense qu'il existe une autre police qui empêche l'installation de SF Symbols, dans Font Book et sur Xcode.

Une des solutions pourrait être de trouver celui qui est en conflit dans le paquet XCode et de le supprimer (cela peut être Symbols police ou San Francisco qui causent des problèmes (je ne sais pas)

J'ai également essayé d'ouvrir le fichier de la police avec un éditeur de polices et de modifier son nom et son nom de famille, sans succès.

Si quelqu'un veut continuer à enquêter

J'espère que cela pourra aider quelqu'un !

4voto

Holtwick Points 812

Ce jeu d'icônes est basé sur les symboles SF https://framework7.io/icons/

3voto

Dave van Wijk Points 21

Vous pouvez télécharger la nouvelle police ios 13 sf-pro-rounded dans votre projet. Activez ensuite cette police dans votre étiquette.

Ouvrez sf symbols, cliquez sur le symbole que vous voulez, cmd+c, allez dans votre projet, cliquez sur une étiquette cmd+v. Exécutez le projet, et il devrait y avoir l'icône

Santé,

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X