The vue project introduces Alibaba vector icon library icons

The official gave 3 introduction methods (only two are explained in detail here)

1. Font-class reference

• Good compatibility, supports ie8+, and all modern browsers.
• Compared with unicode, the semantics are clear, and writing is more intuitive. It is easy to tell what this icon is.
• Because class is used to define the icon, when the icon needs to be replaced, only the unicode reference in the class needs to be modified.
• Multicolor icons are not supported.

Steps for usage:

Step 1: Create a new project and add the icons used in the project to the project

Step 2: Click Download to Local in the new project, create a new iconFont folder, and copy the decompressed files to this folder

Step 3: Introduce index.css in Main.js

import '../../shared/library/iconFont/index.css'

Step 4: Select the corresponding icon and get the class name, apply it to the page

<i class="iconfont icon-xxx"></i>

Two, symbol reference

Platform recommended usage

• Multi-color icons are supported, no longer limited by monochrome.
• Through some tricks, it is supported to adjust the style through font-size and color like fonts.
• Poor compatibility, supports ie9+, and modern browsers.
• The performance of browser rendering svg is average, not as good as png.
  Steps for usage:

Step 1: Ditto

Step 2: Add the following line of code to index.html

// 项目下的图标在线地址
<script type="text/javascript" src="https://at.alicdn.com/t/font_2797108_z8bjfxy68us.js"></script>

Step 3: Add common css code (introduce it only once)

<style type="text/css">
    .icon {
    
    
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

Step 4: Select the corresponding icon and get the class name, apply it to the page

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

Local reference is to refer the downloaded local js to main.js, and other operations are the same