The procedures Ali icon library

symbol references 
This is a new use, it should be said that this is the future mainstream, but also the platform currently recommended usage. Related presentations can refer to this article This usage is actually made of a collection svg, and has the following characteristics compared to the above two: 

support for multi-color icons, and no longer subject to restrictions monochrome. 
By some techniques, like fonts that support, through font - to adjust the pattern size, color. 
Poor compatibility, support for IE9 + , and modern browsers. 
Svg browser rendering performance in general, not as good as png. 
Use the following steps: 

first step: generating a copy of the program code for the following symbol: 
// at.alicdn.com/t/font_8d5l8fzk5b87iudi.js 
Step: General added css code (once introduced into the line):
<style type = "text / CSS "> 
    .icon { 
       width: 1em; height: 1em; 
       Vertical -align: -0 .15em; 
       Fill: currentColor; 
       overflow: hidden; 
    }
 </ style>
 The third step: the selection of the icon to obtain the class name, applied page:
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

 

Guess you like

Origin www.cnblogs.com/edczjw-Edison/p/12402305.html