How to use VUE to call Ali Iconfont library online

Preface

Many years ago, I was a newbie on the server side, but as the industry became more competitive, I was forced to become a newbie on the front end. . . Just kidding, I just like learning technology! This chapter will lead you to open Alibaba Iconfont Library in another high-end way. In the past, we either had to spend a lot of effort on the Internet to find some icon pictures to beautify our web pages. However, with the development of technology and the technical contributions of some large platforms, we have to say that Alibaba is still awesome. This is not to praise it or advertise it. Indeed, they do better than Tencent in some fields. It may be related to the field. Due to my personal cognitive level, I can only think so. For example, in the direction of our JAVA server, Alibaba has some open source technologies such as Nacos, Canal, RocketMQ, Dubbo, and Sentinel. Back to the topic. As the title suggests, the content of this chapter revolves around the VUE front-end and the Ali Iconfont icon library. After going through the era of piecing together icons from the website, I started to use the Ali Iconfont icon library around 2015-2016. At the beginning, I only knew how to download icons for use, as follows

insert image description here

This is a downloaded picture, which is quite lol. Later, with the learning of front-end technology, I began to learn how to use icon file applications when I wrote uniapp.

insert image description here

If the icons are frequently changed, you will need to frequently download the icon files and re-import them, which is troublesome. In this chapter, we will introduce the Ali Iconfont icon library online to dynamically load it. This method does not require downloading icon icons or icon files. I personally feel that the most convenient thing is that the icon library can be dynamically updated! And even if we delete the project group in the Ali Iconfont icon library, as long as the connection has been generated, it can still be used in the project, but I don’t know how long the connection recovery time is!

Start using Iconfont

Official Website

Iconfont

Select Icon

insert image description here

Add to Project

insert image description here

Get the link

insert image description here

So far, the Iconfont platform related operations are completed. Next is the convenient operation of VUE

Online call test

index.html introduces the link

insert image description here

<link rel="stylesheet" href="//at.alicdn.com/t/font_2872687_x5kgx7w5eth.css" rel="external nofollow" >

Interface Usage

<i class="iconfont icon-3column"></i>

Effect View

insert image description here

Testing completed!

VUE project integration

Write a tool to add head

/**
 * Dynamically insert css
 */

export const loadStyle = url => {
    const link = document.createElement('link')
    link.type = 'text/css'
    link.rel = 'stylesheet'
    link.href = url
    const head = document.getElementsByTagName('head')[0]
    head.appendChild(link)
}

This is to help us add the link tag in the head, the effect is as follows
insert image description here

main configuration <br /> Import and load link tool

import { loadStyle } from './utils/util'

Initialize iconfont connection

let iconfontVersion = ['2872417_3u9w2bdk2b'];
const iconfontUrl = `//at.alicdn.com/t/font_$key.css`

The reason why $key is used here is that if we have multiple icon items, we can add multiple to the iconfontVersion array.

Write a replacement $key connection method and call the add link tool method

// Dynamically load Alibaba Cloud font library iconfontVersion.forEach(ele => {
  console.log(iconfontUrl.replace('$key', ele))
  loadStyle(iconfontUrl.replace('$key', ele))
})

Complete code

insert image description here

Icon Usage

		 <i class="iconfont icon-3column"></i>
        <i class="iconfont icon-column-4"></i>

Effect display

insert image description here

Here we need to write iconfont in the i tag, so we can optimize it

Optimize iconfont
Theoretically, if we use iconfont icons, then icon-3column and icon-column-4 are both prefixed with icon-, then we can use css matching to do css overlay!
Write the common.scss file, the code is as follows

// About icon CSS settings [class^="icon-"] {
  font-family: "iconfont" !important;
  /* The following content refers to the rules of the third-party icon library itself*/
  font-size: 18px !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.avue-input-icon__item i, .avue-crud__icon--small {
  font-family: "iconfont" !important;
  /* The following content refers to the rules of the third-party icon library itself*/
  font-size: 24px !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.el-menu-item [class^=icon-] {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}

.el-submenu [class^=icon-] {
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
}

Global References
Write in the main file

import './styles/common.scss'

Effect View

insert image description here

Done

This is the end of this article about VUE calling Ali Iconfont icon library online. For more relevant content about VUE calling Ali Iconfont icon library, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: