Detailed explanation of the three usage methods of iconfont

Iconfont is often used in our projects. Here we use the icon icon provided by Alibaba Vector Library. This icon library is enough to provide us with a large number of icons. The first thing we need is to create a new account in Alibaba Vector Icon Library and create a new project. This project contains all the icons you want to use. We need to select the required icon and put it in our project, download it and put it in the iconfont folder under our project. (When the icon needs to be updated, the download package also needs to be downloaded and updated again)

Method 1: Use symbol method (essentially composed of svg tags)

Step 1: In order to better reuse the code, we encapsulate an svg-icon component, the code is as follows:

<template>
 <svg :class="svgClass" aria-hidden="true">
  <use :xlink:href="iconName" rel="external nofollow" ></use>
 </svg>
</template>
<script>
export default {
 name: 'svg-icon',
 props: {
  iconClass: {
   type: String,
   required: true
  },
  className: {
   type: String
  }
 },
 computed: {
  iconName() {
   return `#icon-${}` // Note: Because the svgClass name bound here already contains #icon, copying the symbol name does not require the prefix of the name.  },
  svgClass() {
   if () {
    return 'svg-icon ' + 
   } else {
    return 'svg-icon'
   }
  }
 }
}
</script>
<style scoped>
.svg-icon {
 width: 1em;
 height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}
</style>

Step 2: Introduce

import '@/assets/icons/' //Symbol-based related documentsimport '@/assets/icons/' // Unicode and fontclass style packagesimport SvgIcon from '@/components/SvgIcon' // Use icon component('svg-icon', SvgIcon) // Introduce global components，It can also be introduced locally

Step 3: Use

Among the components you need:

<template>
 <div>
 <!--Method one：usesvg-->
 <svg-icon class="h1" icon-class="iconfontzhizuobiaozhunbduan35"></svg-icon>
 <svg-icon class="h1" icon-class="hekriconshebeidengpao"></svg-icon>
 <!--Method 2：useunicode-->
 <i class="iconfont unicode"></i>
 <i class="iconfont unicode"></i>
 <!--Method Three：useiconfontclass-->
 <span class="iconfont icon-baojingliebiao classicon"></span>
 </div>
</template>
<script>
// import '@/assets/icons/'
</script>
<style>
  .h1{
 width:50px;
 height:50px;
 font-size: 100px;
 }
 .unicode{
 font-size: 30px;
 }
 .classicon{
  /* You can customize the color and size of the icon */
 font-size: 100px; 
 color:red;
 }
</style>

The other two ways of using are to use unicode and fontclass. The above code introduces and uses

Then let's talk about the advantages and disadvantages of these three methods.

unicode：

advantage:

• The best compatibility, supports ie6+
• Support dynamically adjusting icon size, color, etc. according to fonts
  

shortcoming:

• Multicolor icons are not supported
• The rendering of fonts in different devices will be slightly different. In different browsers or systems, the rendering of text is different. The display position and size may be affected by CSS attributes such as font-size, line-height, word-spacing, etc., and this impact is more difficult to adjust.
• Not intuitive, it is difficult to tell which icons are found when looking at unicode codes
  

fontclass：

• Good compatibility, support ie8+
• Compared with unicode, the meaning is clear and the writing is more intuitive. It is easy to tell what this icon is.
  

symbol：

• Multi-color icons are supported and are no longer restricted by monochrome.
• Supports font-size and color to adjust styles like fonts.
• Support ie9+
• CSS can be used to implement animation.
• Reduce HTTP requests.
• Vector, scaling without distortion
  
• You can control every part of the SVG icon in detail

To sum up some of the above characteristics, I personally recommend using symbol or fontclass

Summarize

The above are the three ways to use iconfont introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time!