阿里圖標庫的引入方式

1、下載方式引入 https://www.iconfont.cn/search/index?q=%E8%B4%A6%E6%88%B7%E7%AE%A1%E7%90%86

選擇要加入的icon -> 加入購物車 -> 點擊購物車 -> 下載代碼，

項目裏新建lib文件夾，將下載的以iconfont開頭的文件放在lib文件夾裏

在 main.js引入iconfont.js

有三種方式引入，能夠看下載的demo.html

在已經有iconfont的項目裏添加新的iconfront

一、將iconfont.css裏面的放在項目裏iconfont.css代碼裏

.icon-zizhanghaoguanli:before {
  content: "\e747";
}

.icon-huochedong:before {
  content: "\e640";
}

二、在下載的iconfont.js取svg複製放在項目裏的iconfont.js文件裏 使用

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

---

2、動態加載阿里圖標庫圖標

選擇要加入的icon -> 加入購物車 -> 點擊購物車 -> 添加至項目，

點擊 紅色字【點此複製代碼】//at.alicdn.com/t/font_367131_xd3dpkl99n.js 獲取367131_xd3dpkl99n這個值

項目中新建iconfont.js

let iconfontVersion = ['567566_pwc3oottzol', '1066523_6bvkeuqao36', '1362981_mjin5nz23vj']
let iconfontUrl = `//at.alicdn.com/t/font_$key.css`
export default { iconfontVersion, iconfontUrl }

utils文件夾新建util.js 寫一個動態插入css的方法

/**
 * 動態插入css
 */
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)
}

在main.js裏面引入方法和變量

// 動態加載阿里雲字體庫
iconfont.iconfontVersion.forEach(ele => {
  loadStyle(iconfont.iconfontUrl.replace('$key', ele))
})

這樣頁面就能夠直接用下面的代碼引用圖標了 <i class="iconfont icon-shuaxin"></i>