背景

再项目开发过程中，有动态设置字体图标的需求，保证图标选框中的图标和最后发布的项目图标库一致。

思路

读取本地字体图标库文件，然后进行相应的字符串转换，这样就可以保持图标的一致啦

步骤

1、获取本地的文件

const loadFile = function (name) { // name为文件所在位置

let xhr = new XMLHttpRequest(),

okStatus = document.location.protocol === "file:" ? 0 : 200;

xhr.open('GET', name, false);

xhr.overrideMimeType("text/html;charset=utf-8");//默认为utf-8

xhr.send(null);

return xhr.status === okStatus ? xhr.responseText : null;

}

export default loadFile;

2、组件中引入并进行相应的字符串处理

import loadFile from '../assets/js/localFile';

处理获取到的文件数据

// 以.iconfont为节点分割字符串，只需要.iconfont之后的字符串

let iconData = loadFile('iconfont/iconfont.css').split('.iconfont')[1];

// 获取第一次出现'}'时候的索引值

let iconLi = iconData.indexOf('}');

// 得到第一次出现'}'之后的所有字符串信息【这部分就是我们需要的字体图标的信息】

let liList = iconData.substring(iconLi + 1, iconData.length-1);

// 分割每个字体图标信息

let icons = liList.split('.');

// 设置分割标识

let flag = ':before';

// 循环获取到的字体图标数组

for (let i = 0; i < icons.length; i++) {

// 判断不为空

if (icons[i].indexOf(flag) > -1) {

// 获取图标信息中的class部分，也就是:before之前的信息

let liList = icons[i].split(flag);

// 将class添加到数组，最后再页面上进行循环输出

this.iconList.push(liList[0]);

}

}

最后通过循环，将 this.iconList 里面的值绑定到 的 class 即可。