Graphical explanation of the solutions for front-end processing of small icons

Preface

Before starting this article, let’s do a multiple-choice question: What is the purpose of using build tools in front-end development?

A. Because node.js is popular now, everyone is using build tools

B. Make front-end development more advanced and compile it just like back-end to run

C. Let automated tools replace repetitive manual operations, such as merging codes, refreshing browser preview effects, etc.

If you choose A or B, please close this article directly; if you choose C, please continue reading.

In fact, there is only one purpose for using tools: to automate some repetitive operations and improve work efficiency . Ok, now that we have clarified this point, let's explore some ways to combine a bunch of small icons into one image file and generate the corresponding style.

According to the generated files and usage methods, they can be roughly divided into three types of processing methods:

png sprite

Synthetic Sprite is the oldest and most mature solution, which combines different PNG icons into one PNG image.

Manual Operation

Some companies even ask UI designers to merge small icons (UI designers have become automated tools, embarrassing~). This reduces the workload of the front-end but also brings some problems.

• Communication problems. If you just want to simply change the color or size of an icon, you have to communicate with the designer, which increases the time cost.
• Style issue. The small icons provided by the designer cannot be used directly, they must be used in conjunction with specific styles (offset value, size).
• Naming problem. Even if there are sharp designers who provide CSS files, the naming of style classes is difficult to meet the front-end development standards and requirements (if there are such designers, please send me a private message to recommend them (●^◡^●))
  

Therefore, this approach is not recommended and is not within the scope of our discussion.

Automation Tools

When we have automated tools, some problems can be solved to optimize the entire process.

1. Cut out small icons according to psd (a must for front-end, do it yourself, and have enough food and clothing), and put the small icons into the source folder.
2. The build tool automatically generates images and CSS files, and generates corresponding style names based on the small icon names.
3. Import styles and images into the code.

Configuration Files

Take npm's gulp.spritesmith module as an example to implement the whole process.

This is the task configured in gulpfile.js:

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

gulp.task('png', function () {
  gulp.src('./src/*.png')
    .pipe($.spritesmith({
      imgName: 'icon.png', //Parameter, generated image file name cssName: 'icon.css', //Parameter, generated style file name cssTemplate: './src/png_template.hbs' //Parameter, style file template path, the default is handlerbars template }))
    .pipe(gulp.dest('dist/png'));
});

It has powerful functions. In addition to css files, it can also generate scss and less files, and can also format them with template files. Here I customized a png_template.hbs file with the following content:

// Mainly adds a common style to give the icon an inline block-level style.icon {
  display: inline-block;
}
{{#sprites}}
.icon-{{name}} {
  background-image: url({{{escaped_image}}});
  background-position: {{px.offset_x}} {{px.offset_y}};
  width: {{px.width}};
  height: {{px.height}};
}
{{/sprites}}

Development Process

After the configuration is completed, put two small icons, question.png and hook.png, in the source folder for debugging.

After gulp processing, two files are generated: icon.css and icon.png. Open icon.css and you can see that two style classes are generated according to the icon name:

.icon {
  display: inline-block;
}
.icon-hook {
  background-image: url(icon.png);
  background-position: -40px 0px;
  width: 16px;
  height: 16px;
}
.icon-question {
  background-image: url(icon.png);
  background-position: 0px 0px;
  width: 40px;
  height: 40px;
}

It is simple to use in code

// Reference the generated css file <link rel="stylesheet" href="./png/icon.css" charset="utf-8">
...
//Add style class directly to the tag <i class="icon icon-hook"></i>
<i class="icon icon-question"></i>

See the screenshot at the end of the article for preview effects

question

Thanks to technological advances and the improvement of people's living standards, this efficient method immediately encountered a "natural enemy": the retina screen with high DPR.

If you use responsiveness to determine DPR, all the previous workload will be doubled, and redundant styles will also have to be loaded. Moreover, as the screen is updated, the DPR increases, and you have to make an extra picture and style. Just thinking about it is too tiring-_-||

So is there a picture that can adapt to screens with different DPRs? The dawn of CSS3 has given us a new direction.

font-face

Also known as font icon, this technology simply combines vector graphics to generate font files, and then references the corresponding font encoding in CSS to render it into an image. Because fonts are adapted to various screens, font icons also inherit this advantage.

Manual Operation

There are many websites that make font icons, the more popular ones include icomoon, Alibaba Icon Library, etc.

The basic operation is to edit the icon online and then download a compressed package containing font files and styles. The first problem is that different icon sizes require manual adjustment of the font-size attribute; the second is that manual operations are too frequent: upload - edit - download; the last is that it depends on the network environment, and the icon cannot be edited without a network. In this case, we tried to generate the files offline using automated tools.

Automation Tools

The module gulp-iconfont with a large number of stars on GitHub is still used, but another module gulp-iconfont-css is required to generate CSS at the same time.

Configuration Files

Configure gulpfile.js

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

gulp.task('iconfont', function () {
  // Configure the style first, then configure the font file return gulp.src(['src/*.svg'])
    .pipe($.iconfontCss({
      fontName: 'iconfont', //font name path: './src/font_template.css', //template file path cssClass: 'iconfont' //style class name }))
    .pipe($.iconfont({
      fontName: 'iconfont', //font name formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'] //output font file format}))
    .pipe(gulp.dest('dist/font'));
});

Template files are omitted here~

Development Process

After the configuration is completed, put two small icons, question.svg and hook.svg, in the source folder for debugging.

After gulp processing, 6 files are generated: _icon.css, iconfont.eot, iconfont.svg, iconfont.ttf, iconfont.woff, iconfont.woff2. Open _icon.css, and you can see that two style classes are generated according to the icon name:

@font-face {
 font-family: "iconfont";
 src: url('./iconfont.eot');
 src: url('./iconfont.eot?#iefix') format('eot'),
  url('./iconfont.woff2') format('woff2'),
  url('./iconfont.woff') format('woff'),
  url('./iconfont.ttf') format('truetype'),
  url('./iconfont.svg#iconfont') format('svg');
}

.iconfont:before {
 font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 font-style: normal;
 font-variant: normal;
 font-weight: normal;
 /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */
 text-decoration: none;
 text-transform: none;
}


.iconfont-hook:before {
 content: "\E001";
}

.iconfont-question:before {
 content: "\E002";
}

It is also easy to use in code

// Reference the generated css file <link rel="stylesheet" href="./font/_icons.css" charset="utf-8">

...

//Add style class directly to the tag <i class="iconfont iconfont-hook"></i>
<i class="iconfont iconfont-question"></i>

See the screenshot at the end of the article for preview effects

Usage Problems

Like the tools introduced before, you can use templates and generate scss, less, and css files in multiple formats. The annoying problem is that all the generated font icons will take the height of the tallest icon. This means that some icons need to have their height reset! The automated operation was instantly downgraded to semi-automated, and the generated image was jagged (I don’t know if it was a configuration problem), so it can only be considered a failed solution.

svg sprite

Just when I was feeling depressed, I saw an article by Zhang Xinxu titled "Future Hot: Introduction to SVG Sprite Technology"

(The conclusion at the end compares font icons and svg sprites, friends who are interested can take a look) It made me feel that there is a bright future: it turns out that there is a more powerful svg sprite. Integrate SVG vector icons into one SVG file and display them in the form of symbol or use tags when using them.

Manual Operation

When considering this solution, I didn’t plan to use manual methods, because if manual operation is required, it is better to use font icons, so I directly considered automated tools.

Automation Tools

The module used is gulp-svg-sprite, which has the second highest number of stars on github after gulp-svgstrore. Supports scss, less, and css file format output.

Configuration Files

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

gulp.task('svg', function () {
  return gulp.src('./src/*.svg')
  .pipe($.svgSprite({
    mode: {
      symbol: {
        prefix: `.svg-`,
        dimensions: '%s',
        sprite: '../icon.svg',
        symbol: true,
        render: {
          css: {
            dest: '../icon.css'
          }
        }
      }
    }
  }))
  .pipe(gulp.dest('dist/svg'));
});

Development Process

The whole process is the same as above. After the configuration is completed, put two small icons, question.svg and hook.svg, in the source folder for debugging.

After gulp processing, two files are generated: icon.svg and icon.css. Open icon.css and you can see that two style classes are generated according to the icon name:

.svg-hook {
 width: 16px;
 height: 16px;
}

.svg-question {
 width: 40px;
 height: 40px;
}

Very concise, isn’t it? ! !

It's a little more complicated to use:

//Reference style file <link rel="stylesheet" href="./svg/icon.css" charset="utf-8">

...

<svg class="svg-hook">
  <use xlink:href="./svg/icon.svg#hook"></use>
</svg>
<svg class="svg-question">
  <use xlink:href="./svg/icon.svg#question"></use>
</svg>

See the screenshot at the end of the article for preview effects

Compared to font icons:

1. It is said that compared with font icons, SVG icons also support gradients and even color icons.
2. To change the size, you can simply adjust the width and height attributes, rather than the more "curve-saving" method of adjusting font-size.
3. Filling color is also very simple, just set the value of the fill attribute (the premise is that fill cannot be used in svg. If svg has its own fill attribute, the setting will be invalid).

Usage Problems

All IE browsers (including IE11) do not support obtaining a certain component of an external SVG file. But it is also easy to solve, just use a third-party js - svg4everybody.

Summarize

The code address shown in the article: https://github.com/yalishizhude/sprite-demo or you can download it locally

Well, the above is the full content of this article. I hope that the content of this article can bring some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support of 123WORDPRESS.COM.