How to use custom icon in vue

This time I will show you how to use custom icon icons in vue. What are the precautions for using custom icon icons in vue. The following is a practical case. Let’s take a look.

First of all, because elementUI provides too few icons, I have to look for any vector images that can be added. I try a variety of methods. I think the following method is simple and easy to understand, so I will share it with everyone

Rendering:

It is recommended to use Alibaba vector icon management, iconfont

##Use the method to log in to the account, find the required icon and add it to the shopping cart

Then add it to the project

Then download the code to the local

Download the code file and then unzip it and this list will appear

##Open the HTML file and quote the method tutorial

To add to my pitfalls, I thought about @import "" in the style tag, but the result kept getting errors. I tried many methods but it still didn't work, which complicated the problem.

Step 1: Introduce in index.html fontclass code:

<link rel="stylesheet" type="text/css" href="./iconfont.css" rel="external nofollow" >

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

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

Features: Good compatibility, supports ie8 and all modern browsers.

Compared with unicode, the semantics are clear and writing is more intuitive. It's easy to tell what this icon is.

Because class is used to define the icon, when you want to replace the icon, you only need to modify the unicode reference in the class.

However, because the font is still used essentially, multi-color icons are still not supported.

symbol reference The first step: html introduces the symbol code:

<script src="./iconfont.js"></script>

The second step: Add the general css code (introduce it once):

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

The third step: Select Corresponding icon and get the class name, apply to the page:

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

This is a brand new way of usage. It should be said that this is the mainstream in the future and is also the currently recommended usage by the platform. For related introduction, please refer to this article. This usage is actually a collection of svg. Compared with the other two, it has the following characteristics:

supports multi-color icons and is no longer affected by Monochrome limit.
Through some techniques, it supports adjusting styles like fonts through

• font-size<a href="http://www.php.cn/wiki/807.html" target="_blank"> and </a>color.

It has poor compatibility and supports ie9 and modern browsers.
The performance of browser rendering svg is average, not as good as png.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use WebPack to configure vue multi-page

Perfectly handle the Nodejs global installation module cannot find the command

The above is the detailed content of How to use custom icon in vue. For more information, please follow other related articles on the PHP Chinese website!