Sharing tips on front-end processing of small icons

In daily front-end development, small icons are essential. How we deal with small icons efficiently is something every front-end person should consider. The following article gives you a detailed introduction to the front-end through practical pictures and texts. Those solutions for dealing with small icons have certain reference and learning value for everyone. Friends in need can take a look below.

Preface

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

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

B. To make front-end development more advanced, it can be compiled and run just like the back-end

C , let automated tools replace repeated manual operations, such as merging code, refreshing browser preview effects, etc.

Please close this article if you choose A or B. Please continue reading if you choose C.

In fact, the purpose of using tools is one: Automate some repetitive operations and improve work efficiency. Ok, after clarifying this point, let’s explore the ways to merge 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 image is the oldest and most mature solution, which splices different small png icons into one png image.

Manual operation

Some companies even ask UI designers to merge small icons (UI designers have become automated tools, embarrassment~), in this way While reducing front-end workload, it also brings some problems.

• Communication issues. If you just want to simply modify the color and size of an icon, you have to communicate with the designer, which will increase the time cost.

• Style issue. The small icons provided by the designer cannot be used directly. They must be matched with a specific style (offset value, size).

• Naming problem. Even if a sharp designer provides the css file, the naming of the style class is difficult to comply with the front-end development specifications and requirements (if such a designer is really welcome to recommend it to me via private message (●^◡^●))
  

So this method of processing is not recommended and is not within the scope of our discussion.

Automation tools

When we have automation tools, some problems can be optimized for the entire process.

1. Cut out small icons based on psd (a must for the front end, do it yourself, and have enough food and clothing), and put the small icons into the source folder.

2. The construction tool automatically generates images and css files, and generates corresponding style names based on the icon names.

3. Introduce styles and pictures into the code.

Configuration file

Using npm’s gulp.spritesmith module as an example to implement the entire 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',  //参数，生成图片文件名
      cssName: 'icon.css',  //参数，生成的样式文件名
      cssTemplate: './src/png_template.hbs'  //参数，样式文件模板的路径，默认使用的是handlerbars模板
    }))
    .pipe(gulp.dest('dist/png'));
});

The function is relatively powerful. In addition to css files, it can also generate scss and less files, and also It can be formatted using a template file. Here I customized a png_template.hbs file with the following content:

##

// 主要增加了一个通用样式，给图标赋予内联块级样式
.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, in the source Put two small icons, question.png and hook.png, into the 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 based on 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 very simple to use in the code

// 引用生成的css文件
<link rel="stylesheet" href="./png/icon.css" charset="utf-8">
...
//直接给标签添加样式类
<i class="icon icon-hook"></i>
<i class="icon icon-question"></i>

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

Question

Thanks to the advancement of technology and the improvement of people’s living standards, this kind of The efficient method immediately encountered a "natural enemy": the high-dpr retina screen.

If you use responsive judgment of DPR, all the previous workload will be doubled, and redundant styles will also need to be loaded. Moreover, as screens are updated and DPRs increase, it is necessary to create an additional picture and style. It is too annoying to think about it -_-||

So are there pictures that can adapt to the screens of different DPRs? The dawn of CSS3 has guided us in a new direction.

font-face

is also called font icon. This technology is simply to merge vector images to generate font files. , and then reference 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.

基本操作都是在线上编辑图标，然后下载一个压缩包，包含字体文件和样式。首先的问题是不同图标大小需要手动调整 font-size 属性；其次就是手工操作太频繁：上传 - 编辑 - 下载；最后就是依赖网络环境，没网络就没法编辑图标。既然如此，我们尝试使用自动化工具离线生成文件。

自动化工具
 

依然使用的是github上star数比较多的模块 gulp-iconfont ，但是要同时生成css还需另一个模块 gulp-iconfont-css。

配置文件

配置 gulpfile.js

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

gulp.task('iconfont', function () {
  // 先配置样式，再配置字体文件
  return gulp.src(['src/*.svg'])
    .pipe($.iconfontCss({
      fontName: 'iconfont', //字体名
      path: './src/font_template.css',  //模板文件路径
      cssClass: 'iconfont'  //样式类名
    }))
    .pipe($.iconfont({
      fontName: 'iconfont', //字体名
      formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'] //输出的字体文件格式
    }))
    .pipe(gulp.dest('dist/font'));
});

此处省略模板文件~

开发流程

配置完成之后，在源文件夹中放入两个 question.svg、hook.svg 两个小图标进行调试。

gulp 处理后生成了6个文件： _icon.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff、iconfont.woff2。 打开 _icon.css，可以看到根据图标名生成了两个样式类：

@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";
}

在代码中使用起来也很简单

// 引用生成的css文件
<link rel="stylesheet" href="./font/_icons.css" charset="utf-8">

...

//直接给标签添加样式类
<i class="iconfont iconfont-hook"></i>
<i class="iconfont iconfont-question"></i>

预览效果见文末截图

使用问题

和之前的介绍的工具一样，可以使用模板，也可以生成scss、less、css多种格式文件。蛋疼的问题是：生成的所有的字体图标都会取最高的那个图标的高度。也就是说一些图标需要重新设置高度！ 自动化操作瞬间降级为半自动化~而且生成的图片还带锯齿（不知道是不是配置问题），所以只能算是失败的方案。

svg sprite
 

正当愁眉不展之时，看到张鑫旭一篇文章《未来必热：SVG Sprite技术介绍》
 

（末尾的结束语将字体图标和svg sprite做了对比，有兴趣的朋友可以看一下）才让我感觉柳暗花明：原来还有更强大的svg sprite。将svg矢量图标整合成一个svg文件，使用的时候以 symbol 或 use 等标签的形式展现。

手动操作
 

考虑这个方案之时就没打算用手动化，因为如果需要手动操作还不如使用字体图标，所以直接考虑自动化工具。

自动化工具
 

使用的是github上star数仅次于gulp-svgstrore的模块 gulp-svg-sprite 。支持scss、less、css文件格式输出。

配置文件

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'));
});

开发流程

整个流程同上，配置完成之后，在源文件夹中放入两个 question.svg、hook.svg 两个小图标进行调试。

gulp 处理后生成了2个文件： icon.svg、icon.css。 打开 icon.css，可以看到根据图标名生成了两个样式类：

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

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

非常简洁有么有！！！

使用起来稍稍复杂一点：

//引用样式文件
<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>

预览效果见文末截图

相比字体图标：

1. 据说SVG图标跟字体图标相比，还支持渐变，甚至彩色图标。

2. 改变大小直接调整width和height属性即可，而不是调整font-size那种“曲线救国”的方式。

3. 填充颜色也很简单，设置fill属性的值即可（前提是svg中不能使用fill，如果svg自带fill属性，设置失效）。

使用问题

所有的IE浏览器(包括IE11)还不支持获得外链SVG文件某个元件。但是也很好解决，使用第三方js即可——svg4everybody。

总结

The above is the detailed content of Sharing tips on front-end processing of small icons. For more information, please follow other related articles on the PHP Chinese website!