Detailed tutorial on using icon in Vue Element (third-party), vueicon

Detailed tutorial on using icon in Vue Element (third-party), vueicon

The icon library provided by element-ui is still incomplete. You still need to introduce a third-party icon, which has always been a problem when you use it. Refer to some tutorials and record them in detail.

For us, the first choice is of course the Alibaba icon library.

Tutorial:

1. Open Alibaba icon, register> log on> icon Management> my projects

 

Icon Management> my projects, click in

Create a project

 

Create a project

Enter the project name. Note that the prefix should not be the same as the icon (prefix: el-icon) that comes with element-ui.

After setting, click New.

 

Note the prefix. After setting, click New.

Now, we return to the Alibaba icon homepage and click in the icon library you want. Because there is no batch import to the shopping cart, we usually need to click one by one, which is a waste of time, enter the following code in the console to import data in batches.

var icons = document.querySelectorAll('.icon-gouwuche1'); var auto_click = function(i) { if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };auto_click(0);

 

Then press enter to add all the icons in the Image Library to the shopping cart.

Click shopping cart on the page

 

Click the shopping cart icon on the right of the page.

Add the icons to the project you just created.

 

Add

Set fontClass and download it to the local device.

 

Download to your local computer and decompress the package.

After decompression, you will get these files and open the files in the circle in the figure.

Add the following code. Note: el-icon-third is the prefix of the icon you set earlier. The front of the second el-icon-third contains spaces.

[Class ^ = "el-icon-third"], [class * = "el-icon-third"]/* Space */{font-family: "iconfont "! Important; font-size: 16px; font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale ;}

 

The data in the green box must be consistent.

2. After the above settings, open the vue project. I created the icon folder under src-assets and copied all the files.

Introduce css in main. js

 

Remember to bring in

And then try againnpm run devClick

3. Open the project on Alibaba icon and copy the desired icon code.

 

Icon code:el-icon-ump-qianniudaidise

Use. The two reference methods are the same as those provided by element.

 

Final effect:

 

Summary

The above is a detailed tutorial on how to use the icon of Vue Element. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!