background

For the front end, ICONS are evolving fast. From IMG tags, to Sprite images, to font ICONS, SVG, and even SVG has a Sprite-like solution, SVG-Sprite-Loader. There is nothing more to be said for Sprite images, just a simple use of background-position for icon positioning. Today let’s talk about using font ICONS and SVG ICONS. Bootstrap, font-awesome, element-UI and other UI libraries all come with font ICONS.

Just a quick explanation of how this works

Unicode reserves the e000-F8FF range as a private reserved area. The Unicode code in this range is very suitable for font ICONS, and the front end can display the corresponding icon according to the Unicode code.

Iconfont was introduced in the Vue project

1. Create a new project at IconFont

Note: The prefix should be test-icon-.

2. Add an icon to the project

3. Use iconfont

Unicode mode (not recommended)

Online use

  • index.scssIntroduction of online fonts in
@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');
}
Copy the code

  • Page use

    Use is very unfriendly, using unicode code representation, use icon must go to the iconfont project to query unicode code.

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

The renderings are as follows:

The local use

Sometimes the network is not that powerful, or the Intranet environment, so don’t consider using online references.

  1. Local use requires downloading the font library and putting it into the project.

  1. Define the following code 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+*'.. /assets/fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */}. Iconfont {background-color: RGB (255,255,255);"iconfont"! important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }Copy the code

  1. use

    This is the same as online references, using Unicode codes to display ICONS.

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

conclusion

  • Best compatibility, supportie6+, and all modern browsers.
  • Support to dynamically adjust icon size, color and so on according to the font.
  • But because it is a font, it does not support multicolor. Use only monochrome ICONS on the platform, even if there are multi-colored ICONS in the project, the color will be automatically removed.

Font Class (friendly)

A more friendly wrapper, similar to font-awesome, allows us to call the icon simply by using class. The idea is to use the before pseudo-element to display the icon.

Online use

Super simple, as long as the online generation code, reference the online CSS file can be used.

Reference it in index.html.

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

You can use the font icon in your project.

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

The local use

Similar to Unicode, download the code locally. Because I’m using SCSS to manage styles, I need to extract the key parts from the downloaded code. In addition to referencing the font library, copy all the before pseudo-elements defined in iconfont. CSS into your SCSS 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+*'.. /assets/fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */}. Iconfont {background-color: RGB (255,255,255);"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";
}
Copy the code

conclusion

  • Good compatibility and supportie8+, and all modern browsers.
  • Compared to theunicodeClear meaning, more intuitive writing. It’s easy to telliconWhat it is.
  • Because the use ofclassTo define the icon, so when you want to replace the icon, you just need to modify itclassThe inside of theunicodeReferences.
  • Multicolor ICONS are not supported, however, because they are essentially fonts.

advice

Since adding new ICONS requires regenerating code in iconfont.cn, this isn’t exactly convenient, but it’s still a lot more advanced than Unicode. Based on my experience, it is recommended not to download and replace ICONS locally every time they are updated during debugging. It should be used online first, and then downloaded to local use after debugging is confirmed, which is of great help to efficiency improvement.

Symbol mode (support multi-color icon)

SVG symbol provides functions similar to Sprite, which makes SVG easier to use and can also meet the needs of the icon system. You can learn more about SVG Symbols on Zhang Da’s blog.

Online use

First, select symbol mode in iconFont project and generate JS code online

Then import the JS file in index.html

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

This js is used to generate SVG symbols in a document

Finally, you can use the SVG icon in your page with the Use tag. The href value is set to the id of the corresponding symbol.

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

The effect is as follows:

Multicolor ICONS are still cool!

The local use

The same is true for local use, mainly relying on the js file generated online, open the link of the online JS file in the browser empty label, you can get its content, and then copy the content, name a JS file, and put it in the local project static resources directory, reference can be.

<script src="./static/js/symbols.js"></script>
Copy the code

Automatic icon management (must see)

Even with the use of symbol, when designing new ICONS, we cannot avoid regenerating the icon code. So is there a more elegant solution? The answer is yes. SVG Sprite – loader + the require. The context.

There are already too many articles on the SVG-Sprite-Loader website.

I have a little bit of my own understanding of the require.context. See an image that takes you through webpack’s require.context.

conclusion

  • Support for multi-color ICONS, no longer limited by monochrome.
  • Support richcssProperty to customize.
  • Poor compatibility, supportedie9+, and modern browsers.
  • Browser renderingsvgThe performance is average, less thanpng.

Starting link