vue project introduced iconfont

background

For front-end, the development of an icon with each passing day. From the imglabel, to Sprite map, then font icons, svgand even svgalso have programs similar to Sprite map svg-sprite-loader. Sprite figure does not nothing to talk about, and simply use the background-positiondo icon positioning. Today we talk about how to use the font icon and svgicon. In fact, no stranger to the Fonts icon, bootstrap, font-awesome, element-uiand other UIlibraries have a basic standard font icon.

Simply under the principle of

unicodeReserved E000-F8FFrange as a private reserved area, the range of unicodecode is very suitable font icons, front-end based on unicodethe corresponding icon code can be displayed.

vue project introduced iconfont

1. In the New Project iconfont

Note: This is correct that, the prefix should be test-icon-.

2. Add an icon to a project

3. Use iconfont

Unicode mode (not recommended)

Online Use

• index.scssFont introduced online

@font-face {
    font-family: 'iconfont';  /* project id 1254715 */
    src: url('//at.alicdn.com/t/font_1254715_s1khj1whikd.eot');
    src: url('//at.alicdn.com/t/font_1254715_s1khj1whikd.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1254715_s1khj1whikd.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1254715_s1khj1whikd.woff') format('woff'),
    url('//at.alicdn.com/t/font_1254715_s1khj1whikd.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1254715_s1khj1whikd.svg#iconfont') format('svg');
}

• Use the page

  Very friendly use, using a unicodecode that the use of icons must also go to the iconfontproject to make inquiries under the unicodecode.

<template>
    <div>
        <i class="iconfont">&#xe7ee;</i>
        <i class="iconfont">&#xe7ed;</i>
        <i class="iconfont">&#xe7ec;</i>
        <i class="iconfont">&#xe7eb;</i>
    </div>
</template>

The effect is as follows:

Local use

Sometimes not so to force the network, or the network environment, then do not consider the way with an online references.

1. Local use and need to download the first font library into the project.

1. The following code is defined in the global style file

   @font-face {
     font-family: "iconfont";
     src: url('../fonts/iconfont.eot'); /* IE9*/
     src: url('../fonts/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/iconfont.woff') format('woff'), /* chrome, firefox */
     url('../fonts/iconfont.woff2') format('woff2'), /* chrome, firefox */
     url('../fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
     url('../assets/fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
   }
   
   .iconfont {
     font-family: "iconfont" !important;
     font-size: 16px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

1. Use

   And online reference are the same, are using unicodecode to show icon.

   <template>
       <i class="iconfont">&#xe7ee;</i>
   </template>

to sum up

• Best compatibility, support ie6+, and all modern browsers.
• Supported by font way to dynamically adjust the icon size, color, and so on.
• But because it is the font, so it does not support multi-color. Use only platform in monochrome icon, even if multiple items in the color icon will automatically go to color.

Font class way (compared Friendly)

一种更友好的封装，类似于font-awesome，我们只要使用class，就可以调用图标了。其原理就是利用before伪元素来显示图标。

在线使用

超级简单，只要在线生成代码，引用在线的css文件即可使用。

在index.html中引用它。

<link rel="stylesheet" href="//at.alicdn.com/t/font_1261797_48wm20jf8z.css">

项目中就可以使用字体图标了。

<template>
    <i class="iconfont cl-icon-fold"></i>
    <i class="iconfont cl-icon-delete-solid"></i>
</template>

本地使用

与unicode方式类似，下载代码到本地。因为我是用scss管理样式的，需要在下载的代码中提取出关键部分。除了引用字体库，还要将其中的iconfont.css中定义的before伪元素全部复制到自己的scss文件中。

@font-face {
  font-family: "iconfont";
  src: url('../fonts/iconfont.eot'); /* IE9*/
  src: url('../fonts/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/iconfont.woff') format('woff'), /* chrome, firefox */
  url('../fonts/iconfont.woff2') format('woff2'), /* chrome, firefox */
  url('../fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../assets/fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 列了一部分举例
.cl-icon-user:before {
  content: "\e64b";
}

.cl-icon-video:before {
  content: "\e66b";
}

.cl-icon-pause:before {
  content: "\e7bd";
}

.cl-icon-orgnazation:before {
  content: "\e61b";
}

总结

• 兼容性良好，支持ie8+，及所有现代浏览器。
• 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
• 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
• 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

建议

由于加了新的图标需要重新在iconfont.cn重新生成代码，所以这种方式也不算很方便，但是相对于unicode还是高级不少。根据我的经验，建议在调试时，不要每次图标更新，就下载到本地更换。应该先使用在线使用的方式，调试完毕确认无误后，再下载到本地使用，这样对于效率提升有很大帮助。

symbol方式（支持多色图标）

svg的symbol提供了类似于雪碧图的功能，让svg的使用变得更简单，也可以满足做图标系统的需求。可以参考张大大博客了解更多关于svg symbol的知识。

在线使用

First, iconfontselect an item in symbolthe way, and generate online jsCode

Then index.htmlthe introduction of this js file

<script src="//at.alicdn.com/t/font_1254715_oewlgci0ut.js"></script>

This jseffect is generated in the documentsvg symbol

Finally, you can page through the uselabel using svgthe icon. xlink:hrefIt is set to a value corresponding to symbolthe idcan.

<svg aria-hidden="true">
    <use xlink:href="#test-icon-word-ext"></use> 
</svg>

Results are as follows:

Icon or Multicolor cool!

Local use

The same is true for local use, mainly relying on this generation of online jsdocuments, the online jslink to the file opens in an empty browser tab, you can get it, and then copy the contents of their own naming a jsfile and put it in the local under the project a static resource directory, reference can be.

<script src="./static/js/symbols.js"></script>

Icon automatic management (must see)

Even with the symbolway, when the new icon design little sister, we still can not avoid re-generate the code icon. Is there a more elegant solution? The answer is yes. svg-sprite-loader+ require.context.

svg-sprite-loaderInternet has been a lot of articles.

About require.context, I'd have some of my understanding. Check out a map with you to understand require.context webpack of .

to sum up

• Support multi-colored icons, and no longer subject to restrictions monochrome.
• Support rich cssproperty customization.
• Poor compatibility, support ie9+, and modern browsers.
• Browser rendering svgperformance in general, not as good png.

Starting link