Vue Custom Icon

A. Icon Library 1.1 Icon Reference The icon reference can be applied to the mobile end and the Web side, this article mainly describes the web side of the offline reference, other platforms can refer to the official introduction. 1.1.1 Icon Download

Register Login

New Project

Project Settings

the reference name at the red circle on the diagram to prevent conflicts with other references in your local project, you can set up your search and add the icons you need

Add an icon to your project

Entering the project you just added, you can see that the official has provided us with an online reference, but we use a local reference to mitigate the project load.

Download to local and unzip

It is then copied into the project (a new icon folder is created in the Assets folder);
Some of these demos and samples can be used without importing the project, but to give others a reference it is best to copy them all.

Open the Icnfont.css file, set icon properties, and reference labels.

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

Add a reference tag, icon-test the fontclass/symbol prefix
[class^= "Icon-test"] when we first started a new project [class*= "Icon-test"] {
  font-family: "Iconfont"!important;
  * * The following refer to the rules of the Third party icon Library itself
  /font-size:66px;
  Font-style:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

Sets the specified icon property
. icon-test-icon-test10 {
  width:1em; height:1em;
  Vertical-align: -0.15em;
  Fill:currentcolor;
  Overflow:hidden;
}

1.1.2 Page References

① CSS files and JS files on your Xxx.vue page

Import ' @/assets/icon/iconfont.css '
import ' @/assets/icon/iconfont.js '

The Unicode and font class methods do not support multicolor icons; Symbol method supports multicolor icons So here is the introduction of JS file. Icon details and settings can be changed to the corresponding. css file .

<div>
    <i class= "Iconfont" >& #xe615;</i> <i class= "Iconfont
    icon-test-icon-test2" ></i>

    <el-button type= "PRIMARY" class= "icon-test-icon-test17" @click = "style=" padding:6px 4px; width:70px "></el-button>

    <el-button type=" PRIMARY "class=" icon-test-icon-test14 "@click =" "style=" padding:6px 4px;width:70px "></el-button>

    <i class=" Iconfont icon-test-icon-test10 "></i>

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

    <svg class= "Icon-test-icon-test8" aria-hidden= "true" >
         <use xlink:href= "#icon-test-icon-test8" ></use>
    </svg>
</div>

Unicode mode:

<i class= "Iconfont" >& #xe615;</i>

Font class Method:

<i class= "Iconfont icon-test-icon-test2" ></i>

Symbol mode:

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

Effect Chart:

1.1.3 Production and upload because I am not a professional UI, the icon made this piece did not do too much in-depth research, want to know friends can refer to the official website. Note: All the icons in this article source: Alibaba vector icon Library