【vite插件】iconify字体图标离线加载_vite-plugin-purge-icons

安装插件包

yarn add @iconify/iconify
yarn add @purge-icons/generated vite-plugin-purge-icons @iconify/json -D

# @iconify/json 中存放了离线字体

# vite-plugin-purge-icons 提供了离线扫描功能
# 扫描vue、ts、js等文件中插件正则匹配到的字体图标；
# 正常情况下，扫到的图标可以通过@iconify/json离线图标库加载
# 没扫到的图标会调用官方api远程加载
1
2
3
4
5
6
7
8
9

在编译阶段按需加载本地离线图标（注意：字体库会导致打包体积变大）

1. 抽取要离线加载的json图标数据文件 iconData.json (在离线扫描失效时使用)

{
  "ep:": ["add-location", "aim", "alarm-clock", "apple"],
  "fa:": ["home", "address-book", "address-book-o", "address-card"],
  "fa-solid:": ["abacus", "ad", "address-book"]
}
1
2
3
4
5

2. vite.config.js 配置插件

import PurgeIcons from 'vite-plugin-purge-icons'
import iconData form './data/iconData.json'

type ValueType<T> = [T, T[]]

// 提前加载本地图标数据
// 依赖 @iconify/json 包中提供的的数据
const preloadOfflineIcons = (iconData): string[] => {
  return Object.entries(iconData).reduce((a: string[], [k, v]: ValueType<string>) => {
    a = a.concat(v.map((i) =>  k+i))
    return a
  }, [])
}


// included中配置的图标不经过文件扫描，可通过@iconify/json处理后直接离线加载
export default {
  plugins: [
    PurgeIcons({
      included: preloadOfflineIcons()
    })
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3. main.js 加入 iconify 图标支持

import { createApp } from 'vue'
import App from './App.vue'

import '@purge-icons/generated' // <-- This

createApp(App).mount('#app')
1
2
3
4
5
6

4. 组件中使用

<!-- 
 注意：未能离线加载的图标将调用官方api来加载 
  正常情况不需要在vite.config.js中配置included，因为会自动扫描vue等文件进行离线加载 
  只有当 data-icon 中的值是通过动态绑定，导致扫描时正则匹配失效，此时若需离线加载，则需配合included使用
-->
<span class="iconify" data-icon="fa:home"></span>
1
2
3
4
5
6