阿里图标库的引入方式

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>