It is very common to introduce ElementUI in Vue

ElementUI – icon icon

ElementUI provides a collection of icon ICONS by default, which can be displayed using the I tag

It is very convenient to write the icon name directly to the class name

< I class=" icon name "/>Copy the code

But ICONS are definitely not enough, and you always have to introduce your own ICONS, such as Alibaba’s Iconfont

Iconfont introduced

In the Ali help page we can see several ways of introduction

The font-class mode is introduced

As you can see, I need to write a fontclass

.iconfont{ font-family:"iconfont" ! important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; - its - text - stroke - width: 0.2 px; -moz-osx-font-smoothing: grayscale; }Copy the code

You then need to write the FontClass Icon name for each reference

<i class="iconfont icon-xxx"/>
Copy the code

It’s not a chore, but it’s annoying to write a lot…

So how do you make it like element-icon and just write the icon name

How does element’s icon require only an icon class name

Here’s the secret: CSS selectors

[class*="el-icon-"], [class^="el-icon-"]{
  xxxx
}
Copy the code

Using the CSS selector, this CSS will be applied to any class name that starts with or contains el-icon-

Do the same thing

1. The IconFont platform supports project prefixes

As you can see, the project – More Operations – Edit – prefix

Write prefixes, such as wX-icon -, are supported

2. Modify the imported CSS

[class*="wx-icon-"], [class^="wx-icon-"]{ font-family:"iconfont" ! important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; - its - text - stroke - width: 0.2 px; -moz-osx-font-smoothing: grayscale; }Copy the code

3. Main. Js

import '@/styles/iconfont.css';
Copy the code

Of course,

If you have a precompiled framework like LESS or SCSS, you can also go to vue.config.js with global import

I’m just going to introduce it

Use 4.

<i class="wx-icon-xxx" />
Copy the code

That’s nice