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