【Web技术】967- Web图标的工程化方案

清疚 2022-10-15 10:58 149阅读 0赞

![d51dd085946311261b3f5a4d35d2e65e.png][]

# 来源：周周酱爱学习 #

https://juejin.cn/post/6952150039732944910

如何管理图标是我们在web项目开发过程中都会遇到的问题。随着web技术的发展，图标方案也经历了几个阶段，以下这几种图标方案也基本能涵盖web图标使用的历程。

### image sprite ###

最早通过img标签或background-image来引用图标，每个图标单独引用，后来为了减少http的请求，提高网站性能，提出sprite的概念，将小的 png 图片合并到一张图上，然后根据 background-position 来显示不同的图片。

优势：

1.  兼容性好
2.  还原度高

劣势：

1.  同一图标的不同颜色需要设计多个图片
2.  新增图标需要重新合成sprite
3.  由于是位图，兼容不同分辨率需要多套尺寸

### iconfont ###

为了更易于控制图标颜色和大小，并兼容各种设备屏幕，后来开始出现iconfont方案。iconfont就是图标字体，我们可以像使用普通字体一样使用它，只要适合字体相关的CSS属性都适合字体图标，使用font-size和color就可以轻松控制图标的大小和颜色。随着各种字体图标库网站的出现，国外的icomoon.io，或者国内阿里的iconfont.cn，带来的全套解决方案，使iconfont流行起来。

优势：

1.  能够容易地改变图标的颜色，尺寸
2.  矢量图不失真
3.  兼容所有流行的浏览器，在h5和app上都能使用
4.  替换图标和新增图标也非常简单，也不需要考虑图标合并的问题

劣势：

1.  只支持单色图标
2.  字体渲染，低倍屏下容易出现锯齿

#### 引用方式 ####

iconfont的使用方式也很简单，使用 @font-face 引入字体格式，就和使用其他自定义字体一样。

@spicons-font-path: "./fonts";
    @font-face {
     font-family: "spicons";
     src: url('@{spicons-font-path}/spicons.eot?v=1');
     src: url('@{spicons-font-path}/spicons.eot?v=1#iefix') format('eot'),
         url('@{spicons-font-path}/spicons.ttf?v=1') format('truetype'),
      url('@{spicons-font-path}/spicons.woff?v=1') format('woff'),
      url('@{spicons-font-path}/spicons.svg?v=1#spicons') format('svg');
    }
    .sp-icon {
     font-family: "spicons";
        display: inline-block;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        text-rendering: auto;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    复制代码

*  unicode 引用

<div class="sp-icon"></div>
    复制代码

*  使用配套生成的样式

#### 工程化方式 ####

依赖网站生成字体文件，在替换或加图标后需要重新覆盖项目中的图标css代码，不够自动化。可以使用工具脚本在本地项目中将SVG文件生成iconfont，更方便地管理项目图标。需要在项目中安装以下依赖库。

*  gulp （自动化构建工具）
 *  gulp-iconfont （使用gulp将svg图标集合创建为 svg/ttf/eot/woff/woff2字体）
 *  gulp-iconfont-css （结合gulp-iconfont生成配套的css样式）

gulpfile

var gulp = require('gulp');
    var iconfont = require('gulp-iconfont');
    var iconfontCss = require('gulp-iconfont-css');
    
    /** 生成图标字体文件*/
    gulp.task('Iconfont', function() {
        return gulp
            .src(['../src/icons/svg/*.svg'])
            .pipe(
                iconfontCss({
                    fontName: 'spicons', //字体名
                    path: '../src/icons/templates/iconFont.less', //模板文件路径
                    targetPath: '../spicons-icons.less',//样式文件目标地址相对于dest目录
                    cssClass: 'sp-icon' //样式类名
                })
            )
            .pipe(
                iconfont({
                    fontName: 'spicons', // required
                    formats: ['ttf', 'eot', 'woff', 'svg']
                })
            )
            .pipe(gulp.dest('../src/styles/iconfont/fonts'));
    });
    
    
    gulp.task('default',gulp.series('Iconfont'));
    复制代码

gulp-iconfont-css支持使用自定义的css模板，来组织生成的字体配套样式，以灵活的方式创建符合项目规范的样式命名，引用路径。

*  less模板

@spicons-font-path: "./fonts";
    @font-face {
     font-family: "<%= fontName %>";
     src: url('@{spicons-font-path}/<%= fontName %>.eot?v=1');
     src: url('@{spicons-font-path}/<%= fontName %>.eot?v=1#iefix') format('eot'),
         url('@{spicons-font-path}/<%= fontName %>.ttf?v=1') format('truetype'),
      url('@{spicons-font-path}/<%= fontName %>.woff?v=1') format('woff'),
      url('@{spicons-font-path}/<%= fontName %>.svg?v=1#<%= fontName %>') format('svg');
    }
    
    .<%= cssClass%> {
     font-family: "<%= fontName %>";
        display: inline-block;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        text-rendering: auto;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    <% _.each(glyphs, function(glyph) { %>@icon-<%= glyph.fileName.replace(/[\d]{1,}([\-])/, "") %>: "\<%= glyph.codePoint %>";
    <% }); %>
    
    .<%= cssClass%>-char(@icon-variable) {
     content: @@icon-variable;
    }
    
    .<%= cssClass%>-base-pseudo(@filename, @insert: before) {
     @pseudo-selector: ~":@{insert}";
        @icon-variable: ~"icon-@{filename}";
     &@{pseudo-selector} {
      .<%= cssClass%>-char(@icon-variable);
     }
    }
    
    <% _.each(glyphs, function(glyph) { 
        %>.<%= cssClass%>-<%= glyph.fileName.replace(/[\d]{1,}([\-])/, "") %> {
     .<%= cssClass%>-base-pseudo(<%= glyph.fileName.replace(/[\d]{1,}([\-])/, "") %>);
    }
    <% }); %>
    复制代码

*  执行构建图标命令`gulp \--gulpfile build/build-icon.js`
 *  生成字体图标以及样式文件

![3cfb8f478da6b78c2904006fba7e545d.png][] 微信图片\_20191214224749.png

*  样式文件

![7330ee48e58ed02d6de889f520d81fbb.png][] 微信图片\_20191231153104.png

### svg sprite ###

svg意为可缩放矢量图形，它不会像位图一样因为放大而失真，他在不同分辨率下的表现都一样清晰。svg其实很早就出现了，只不过由于兼容性的问题，早前并没有很好地发挥出它的价值，但随着IE6/7/8退出舞台， android 4.x 的开始，很多网站都开始使用svg作为图标方案 。github在16年的时候已经使用svg替代iconfont，ant design在 3.9.0 之后，使用了 svg图标替换了原先的 font 图标。

优势：

1.  能够容易地改变图标的颜色，尺寸
2.  支持彩色图标
3.  矢量图不失真
4.  可读性好，有利于SEO与无障碍
5.  渲染效果好，不会有锯齿

劣势：

1.  体积相对于iconfont较大

#### 引入方式 ####

1.      使用img、object、embed标签或者作为background背景图直接引用svg，或者可以合并成雪碧图，这种方式与png雪碧图使用方法一样。
2.      inline svg，svg本身是一个html标签，可以直接把svg写入 html中。

<body>
      <div>
        <svg>....</svg>
      </div>
    </body>
    复制代码

1.  使用 svg中的 symbol，use 元素来制作图标

标记的作用是定义一个图像模板，本身不会输出任何图像，可以使用标记实例化它。在实际项目中我们会有很多图标，将零散的svg合并，每个图标有唯一的symbol，通过symbol来引用。将symbol定义插入到页面body中，然后在需要使用的地方通过引用。将xlink:href设置为定义的symbol id即可。

![581ca56011f291fd46a7d544066568d1.png][] 微信图片\_20191215160410.png

symbol可以写入到body中，同时可以使用外链引用，不过使用外链的方式在IE下兼容性不是很好。

#### 工程化方式 ####

手动中合成引入那一坨 symbol 模板是不方便的，我们需要的是自动管理图标。随着 webpack 打包的成熟，各种 loader的出现，为我们提供了成熟的方案。

*  svg-sprite-loader

针对所引用的svg文件，svg-sprite-loader会把你的icon塞到一个个symbol中，最终在你的body中嵌入合并后的symbol。

示例项目使用vue cli 3搭建，vue.config.js相关配置如下，我们会将图标文件放在一个特定的目录中，针对该目录下的文件，会将默认的loader配置排除，使用svg-sprite-loader。

chainWebpack:config=> {  
            config.module
              .rule('svg')
              .exclude.add(resolve('src/icons'))
              .end()
            config.module
              .rule('icons')
              .test(/\.svg$/)
              .include.add(resolve('src/icons'))
              .end()
              .use('svg-sprite-loader')
              .loader('svg-sprite-loader')
              .options({
                symbolId: 'icon-[name]'
              })
              .end()
          }
    复制代码

*  批量引入图标文件

const req = require.context('/src/icons', true, /\.svg$/)
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    requireAll(req)
    复制代码

*  运行项目后可以看到body中插入了svg symbol

![257f2ad67f9969a31defba60e53dc1aa.png][] 微信图片\_20191215163114.png

*  我们就可以在页面中使用这些图标了，同时可以封装通用icon调用组件，将图标name，size，color都作为参数，就能方便控制图标的使用。

<template>
    <i :style="styles" :class="iconClass">
      <svg class="svg-icon" aria-hidden="true" v-on="$listeners">
        <use :xlink:href="iconName" />
      </svg>
    </i>
    </template>
    
    <script>
    export default {
      name: 'SvgIcon',
      props: {
        type: String,
        size: [Number, String],
        color: String,
        className:String
      },
      computed: {
        iconName() {
          return `#icon-${this.type}`
        },
        iconClass() {
          if (this.className) {
            return 'icon ' + this.className
          } else {
            return 'icon'
          }
        },
        styles() {
          let style = {}
          if (this.size) {
            style['font-size'] = `${this.size}px`
          }
          if (this.color) {
            style.color = this.color
          }
          return style
        },
      },
    }
    </script>
    <style scoped>
    .icon{
      display: inline-block;
      line-height: 0;
    }
    .svg-icon {
      width: 1em;
      height: 1em;
      fill: currentColor;
      overflow: hidden;
      vertical-align: middle;
    }
    </style>
    复制代码

![49c76e299408847a374a7b7f8d9b3a83.png][] 微信图片\_20191215163745.png

### 小结 ###

各方案有利有弊，一套方案不一定能兼容全部场景，这一切都取决于项目实际情况和浏览器的支持情况，符合具体使用场景的解决方案才是好方案。

![11de724b438bcc6ab806ef21a5075897.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![7c7de3eb2bac91028cf67c4003aa1951.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[d51dd085946311261b3f5a4d35d2e65e.png]: /images/20221014/58c25ee4405441fdb745e04f6d5aafd0.png
[3cfb8f478da6b78c2904006fba7e545d.png]: /images/20221014/ffabbda26a934b02a1ee046fdb8b1aaf.png
[7330ee48e58ed02d6de889f520d81fbb.png]: /images/20221014/ae5d3aa6f49b413b898c14c69cc638c2.png
[581ca56011f291fd46a7d544066568d1.png]: /images/20221014/78a7be2c677640cbb2253e405d7ba199.png
[257f2ad67f9969a31defba60e53dc1aa.png]: /images/20221014/55692e6744b6467a99e127d5af7fd72a.png
[49c76e299408847a374a7b7f8d9b3a83.png]: /images/20221014/0353a75e0320411a8b3f33be74cf3005.png
[11de724b438bcc6ab806ef21a5075897.gif]: /images/20221014/4a127021e2774b1898ee387e34d0f1a5.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[7c7de3eb2bac91028cf67c4003aa1951.gif]: /images/20221014/eaa8bd5035494fe981b23dd51fbd8f3f.png