Les opérations graphiques expliquent ces solutions pour les petites icônes sur le frontal

2020-01-10

Avant-propos

Avant de commencer cet article, posons une question à choix multiples: quel est le but d’utiliser des outils de construction pour le développement frontal?

A. Parce que node.js est populaire maintenant, ils utilisent tous des outils de construction.

B. Augmentez le développement du front-end et compilez-le de la même manière que le back-end à exécuter.

C. Laissez les outils d'automatisation remplacer les opérations manuelles répétées, telles que la fusion de code, la régénération des effets d'aperçu du navigateur, etc.

Choisissez A et B pour fermer directement cet article, choisissez C et continuez la lecture.

En fait, l’objectif de l’outil est le suivant: Automatiser certaines opérations répétitives pour améliorer l’efficacité du travail . Ok, après avoir effacé ce point, explorons les méthodes qui peuvent être utilisées pour combiner un tas de petites icônes dans un fichier image et générer le style correspondant.

Selon les fichiers générés et les méthodes d'utilisation, ils peuvent être grossièrement divisés en 3 types de méthodes de traitement:

sprite png
 

Le Sprite synthétique est la solution la plus ancienne et la plus mature. Il associe différentes icônes png dans une image png.

Fonctionnement manuel

Certaines entreprises demandent même aux concepteurs d'interface utilisateur de fusionner de petites icônes (les concepteurs d'interface utilisateur deviennent des outils d'automatisation, eh ~). Cela réduit la charge de travail frontale et pose également certains problèmes.

        
  • Problèmes de communication. Si vous souhaitez simplement modifier simplement la couleur et la taille d'une icône, vous devez communiquer avec le concepteur pour augmenter le coût en temps.
  •     
  • Problèmes de style. Les petites icônes fournies par le concepteur ne peuvent pas être utilisées directement, elles doivent correspondre au style spécifique (valeur de décalage, taille).
  •     
  • Problèmes de dénomination. Même si les concepteurs pointus fournissent des fichiers CSS, il est difficile de nommer les classes de style pour répondre aux spécifications et aux exigences de développement front-end (j'ai vraiment de tels concepteurs invités à me recommander par lettre privée (● ^ ◡ ^ ●))      
  • Cette approche n'est donc pas recommandée et sort du cadre de notre discussion.

    Outils d'automatisation
     

    Lorsque nous avons des outils d'automatisation, certains problèmes peuvent optimiser l'ensemble du processus.

          
    1. Découpez de petites icônes basées sur psd (requis pour le front-end, faites-le vous-même, obtenez beaucoup de nourriture) et placez les petites icônes dans le dossier source.
    2.     
    3. L'outil de génération génère automatiquement des images et des fichiers css, et génère des noms de style correspondants basés sur de petits noms d'icônes.
    4.     
    5. Les styles et les images sont introduits dans le code.
    6. Profil

      Prenez le module gulp.spritesmith de npm comme exemple pour implémenter l'ensemble du processus.

      Il s'agit d'une tâche configurée dans gulpfile.js:


       var gulp = require ('gulp');
       var $ = require ('gulp-load-plugins') ();
      
       gulp.task ('png', function () {
         gulp.src ('./ src / *. png')
           .pipe ($. spritesmith ({
             imgName: 'icon.png', // Paramètre, générer le nom du fichier image
             cssName: 'icon.css', // paramètre, le nom du fichier de style généré
             cssTemplate: './src/png_template.hbs' // Paramètre, le chemin du modèle de fichier de style, la valeur par défaut est le modèle des barres de gestionnaire
           }))
           .pipe (gulp.dest ('dist / png'));
       }); 
       

      Il est plus puissant. En plus des fichiers css, vous pouvez également générer des fichiers scss et moins. Vous pouvez également les formater avec des fichiers modèles. Ici, j'ai personnalisé un fichier png_template.hbs avec le contenu suivant:


       // Principalement ajouté un style général pour donner à l'icône un style de niveau bloc en ligne
       .icon {
         affichage: bloc en ligne;
       }
       {{#sprites}}
       .icon - {{name}} {
         image d'arrière-plan: url ((({escaped_image})));
         position-arrière-plan: {{px.offset_x}} {{px.offset_y}};
         largeur: ((px.width));
         hauteur: {{px.height}};
       }
       {{/ sprites}} 
       

      Processus de développement

      Après la configuration, placez deux icônes question.png et hook.png dans le dossier source pour le débogage.

      Gulp a généré deux fichiers après le traitement: icon.css, icon.png. Ouvrez icon.css, vous pouvez voir que deux classes de style sont générées en fonction du nom de l'icône:


       .icon {
         affichage: bloc en ligne;
       }
       .icon-hook {
         image d'arrière-plan: url (icon.png);
         position d'arrière-plan: -40px 0px;
         largeur: 16px;
         hauteur: 16px;
       }
       .icon-question {
         image d'arrière-plan: url (icon.png);
         position d'arrière-plan: 0px 0px;
         largeur: 40 px;
         hauteur: 40px;
       } 
       

      Facile à utiliser dans le code


       // Référence le fichier css généré
       
       ...
       // Ajouter une classe de style directement à l'étiquette
        
         
       

      Voir la capture d'écran à la fin de l'effet d'aperçu

      Problème

      Grâce aux progrès de la technologie et à l'amélioration du niveau de vie des gens, ce moyen efficace a immédiatement rencontré un "ennemi naturel": un écran à haute rétine en dpr.

      Si vous jugez dpr avec la réactivité, toute la charge de travail précédente sera doublée et des styles supplémentaires seront chargés en même temps. Et comme l'écran est mis à jour, plus de dpr devra faire une image et un style supplémentaires, c'est trop dur de penser à -_- ||

      Y a-t-il donc des images qui peuvent s'adapter à différents écrans dpr? L'aube de css3 nous a donné une nouvelle direction.

      font-face
       

      Également appelée icône de police, cette technique consiste simplement à combiner des graphiques vectoriels pour générer un fichier de police, puis à se référer au codage de police correspondant en CSS pour le rendre dans une image. La police étant adaptée à différents écrans, l'icône de police hérite également de cet avantage.

      Fonctionnement manuel
       

      À l'heure actuelle, il existe de nombreux sites Web qui font des icônes de police. Les plus populaires sont icomoon et Alibaba Icon Library.

      L'opération de base consiste à modifier l'icône en ligne, puis à télécharger un fichier zip contenant le fichier de police et le style. Le premier problème est que la propriété font-size doit être ajustée manuellement pour différentes tailles d'icônes; le second est que l'opération manuelle est trop fréquente: upload-edit-download; enfin, cela dépend de l'environnement réseau, et l'icône ne peut pas être éditée sans le réseau. Dans ce cas, nous essayons de générer des fichiers hors ligne à l'aide d'outils automatisés.

      Outils d'automatisation
       

      J'utilise toujours le module gulp-iconfont avec un grand nombre d'étoiles sur github, mais un autre module gulp-iconfont-css est nécessaire pour générer des css en même temps.

      Profil

      Configurer gulpfile.js


       var gulp = require ('gulp');
       var $ = require ('gulp-load-plugins') ();
      
       gulp.task ('iconfont', function () {
         // Configurez d'abord le style, puis le fichier de police
         return gulp.src (['src / *. svg'])
           .pipe ($. iconfontCss ({
             fontName: 'iconfont', // nom de police
             chemin: './src/font_template.css', // chemin du fichier modèle
             cssClass: 'iconfont' // nom de classe de style
           }))
           .pipe ($. iconfont ({
             fontName: 'iconfont', // nom de police
             formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'] // Format de fichier de police pour la sortie
           }))
           .pipe (gulp.dest ('dist / font'));
       }); 
       

      Le fichier modèle est omis ici.

      Processus de développement

      Une fois la configuration terminée, placez deux icônes question.svg et hook.svg dans le dossier source pour le débogage.

      Gulp a généré 6 fichiers: _icon.css, iconfont.eot, iconfont.svg, iconfont.ttf, iconfont.woff, iconfont.woff2. Ouvrez _icon.css, vous pouvez voir que deux classes de style sont générées en fonction du nom de l'icône:


       @ font-face {
        font-family: "iconfont";
        src: url ('./ iconfont.eot');
        src: format url ('./ iconfont.eot? #iefix') ('eot'),
         format url ('./ iconfont.woff2') ('woff2'),
         format url ('./ iconfont.woff') ('woff'),
         format url ('./ iconfont.ttf') ('truetype'),
         format url ('./ iconfont.svg # iconfont') ('svg');
       }
      
       .iconfont: avant {
        font-family: "iconfont";
         -webkit-font-smoothing: anti-crénelage;
         -moz-osx-font-smoothing: niveaux de gris;
        style de police: normal;
        police-variante: normal;
        poids de la police: normal;
        / * speak: aucun; uniquement nécessaire si vous n'utilisez pas la plage unicode privée (option firstGlyph) * /
        décoration de texte: aucune;
        transformation de texte: aucune;
       }
      
      
       .iconfont-hook: avant {
        contenu: "\ E001";
       }
      
       .iconfont-question: avant {
        contenu: "\ E002";
       } 
       

      Facile à utiliser dans le code


       // Référence le fichier css généré
       
      
       ...
      
       // Ajouter une classe de style directement à l'étiquette
        
         
       

      Voir la capture d'écran à la fin de l'effet d'aperçu

      Problèmes d'utilisation

      Comme les outils précédents, vous pouvez utiliser des modèles et générer des fichiers scss, less et css. Le problème avec la douleur aux œufs est que toutes les icônes de police générées prendront la hauteur de l'icône la plus élevée. En d'autres termes, certaines icônes doivent être redéfinies en hauteur! Le fonctionnement automatique a été instantanément rétrogradé en semi-automatique ~ et l'image générée était toujours irrégulière (je ne sais pas si c'était un problème de configuration), donc elle ne pouvait être considérée que comme une solution défaillante.

      svg sprite
       

      En fronçant les sourcils, j'ai vu un article de Zhang Xinxu "L'avenir sera chaud: introduction de la technologie SVG Sprite"
       

      (Les derniers mots à la fin de la comparaison entre l'icône de police et le sprite svg, les amis intéressés peuvent le regarder) ne me font que me sentir gêné: il y a des sprites svg encore plus puissants. Intégrez l'icône de vecteur svg dans un fichier svg et affichez-la sous la forme d'étiquettes telles qu'un symbole ou utilisez-la lors de son utilisation.

      Fonctionnement manuel
       

      Je n'avais pas prévu d'utiliser le manuel lorsque j'ai envisagé cette solution, car si vous devez le faire manuellement, il est préférable d'utiliser des icônes de police, alors pensez directement aux outils d'automatisation.

      Outils d'automatisation
       

      Utilisation du module gulp-svg-sprite avec le nombre d'étoile seconde pour gulp-svgstrore sur github. Prise en charge de la sortie au format de fichier scss, less, css.

      Profil


       var gulp = require ('gulp');
       var $ = require ('gulp-load-plugins') ();
      
       gulp.task ('svg', function () {
         return gulp.src ('./ src / *. svg')
         .pipe ($. svgSprite ({
           mode: {
             symbole: {
               préfixe: `.svg-`,
               dimensions: '% s',
               sprite: '../icon.svg',
               symbole: vrai,
               rendu: {
                 css: {
                   dest: '../icon.css'
                 }
               }
             }
           }
         }))
         .pipe (gulp.dest ('dist / svg'));
       }); 
       

      Processus de développement

      L'ensemble du processus est le même que ci-dessus. Une fois la configuration terminée, placez deux icônes question.svg et hook.svg dans le dossier source pour le débogage.

      Gulp a généré 2 fichiers après traitement: icon.svg, icon.css. Ouvrez icon.css, vous pouvez voir que deux classes de style sont générées en fonction du nom de l'icône:


       .svg-hook {
        largeur: 16px;
        hauteur: 16px;
       }
      
       .svg-question {
        largeur: 40 px;
        hauteur: 40px;
       } 
       

      Très simple! !! !!

      Un peu plus compliqué à utiliser:


       // Fichier de style de référence
       
      
       ...
      
       
          
       
       
          
        
       

      Voir la capture d'écran à la fin de l'effet d'aperçu

      Comparé aux icônes de police:

            
      1. On dit que les icônes SVG prennent également en charge les icônes de dégradé et même de couleur par rapport aux icônes de police.
      2.     
      3. Modifiez la taille et ajustez directement les propriétés de largeur et de hauteur, au lieu d'ajuster la méthode "courbe de taille de police pour enregistrer le pays"
      4.     
      5. La couleur de remplissage est également très simple, il suffit de définir la valeur de l'attribut fill (à condition que fill ne puisse pas être utilisé dans svg, si svg est fourni avec un attribut fill, le paramètre n'est pas valide)
      6. Problèmes d'utilisation

        Tous les navigateurs IE (y compris IE11) ne prennent pas encore en charge l'obtention d'un composant d'un fichier SVG de lien externe. Mais c'est aussi très facile à résoudre, vous pouvez utiliser un js-svg4everybody tiers.

        Résumé
         

        Adresse du code indiqué dans le texte: https://github.com/yalishizhude/sprite-demo ou téléchargez-le localement

        Eh bien, ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra vous aider dans votre étude ou votre travail. Si vous avez des questions, vous pouvez laisser un message et échanger, merci de votre soutien.

        Ranch


        Formater la sortie.

        Profil


         var gulp = require ('gulp');
         var $ = require ('gulp-load-plugins') ();
        
         gulp.task ('svg', function () {
           return gulp.src ('./ src / *. svg')
           .pipe ($. svgSprite ({
             mode: {
               symbole: {
                 préfixe: `.svg-`,
                 dimensions: '% s',
                 sprite: '../icon.svg',
                 symbole: vrai,
                 rendu: {
                   css: {
                     dest: '../icon.css'
                   }
                 }
               }
             }
           }))
           .pipe (gulp.dest ('dist / svg'));
         }); 
         

        Processus de développement

        L'ensemble du processus est le même que ci-dessus. Une fois la configuration terminée, placez deux icônes question.svg et hook.svg dans le dossier source pour le débogage.

        Gulp a généré 2 fichiers après traitement: icon.svg, icon.css. Ouvrez icon.css, vous pouvez voir que deux classes de style sont générées en fonction du nom de l'icône:


         .svg-hook {
          largeur: 16px;
          hauteur: 16px;
         }
        
         .svg-question {
          largeur: 40 px;
          hauteur: 40px;
         } 
         

        Très simple! !! !!

        Un peu plus compliqué à utiliser:


         // Fichier de style de référence
         
        
         ...
        
         
            
         
         
            
          
         

        Voir la capture d'écran à la fin de l'effet d'aperçu

        Comparé aux icônes de police:

              
        1. On dit que les icônes SVG prennent également en charge les icônes de dégradé et même de couleur par rapport aux icônes de police.
        2.     
        3. Modifiez la taille et ajustez directement les propriétés de largeur et de hauteur, au lieu d'ajuster la méthode "courbe de taille de police pour enregistrer le pays"
        4.     
        5. La couleur de remplissage est également très simple, il suffit de définir la valeur de l'attribut fill (à condition que fill ne puisse pas être utilisé dans svg, si svg est fourni avec un attribut fill, le paramètre n'est pas valide)
        6. Problèmes d'utilisation

          Tous les navigateurs IE (y compris IE11) ne prennent pas encore en charge l'obtention d'un composant d'un fichier SVG de lien externe. Mais c'est aussi très facile à résoudre, vous pouvez utiliser un js-svg4everybody tiers.

          Résumé
           

          Adresse du code indiqué dans le texte: https://github.com/yalishizhude/sprite-demo ou téléchargez-le localement

          Eh bien, ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra vous aider dans votre étude ou votre travail. Si vous avez des questions, vous pouvez laisser un message et échanger, merci de votre soutien.

          Ranch


www.xd1998.com@2001-2030Partage De Technologie