基于vue2.x搭建组件库的流程-（四 ）-组件库中引入字体图标

组件库中引入字体图标库

一，从阿里字体图标库下载字体文件

放置到之前文章新建的packages/font文件夹下：

二，修改iconfont.css文件

修改iconfont.css，使得iconfont的字体样式用我们自己的库命名：

三，在组件库的入口文件引入字体

在packages/index.js中：

// 导入组件
import BiuButton from "./Button";
import BiuDialog from "./Dialog";
import BiuInput from "./Input";
import BiuSwitch from "./Switch";
import BiuRadio from "./Radio";
import BiuRadioGroup from "./RadioGroup";
//引入字体图标
+  import "./fonts/iconfont.css";
// 组件列表
const components = [
  BiuButton,
  BiuDialog,
  BiuInput,
  BiuSwitch,
  BiuRadio,
  BiuRadioGroup,
];

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return;
  // 遍历注册全局组件
  components.map((component) => Vue.component(component.name, component));
};
export default {
  install,
  BiuButton,
  BiuDialog,
  BiuInput,
  BiuSwitch,
  BiuRadio,
  BiuRadioGroup,
};
export { BiuButton, BiuDialog, BiuInput, BiuSwitch, BiuRadio, BiuRadioGroup };

四，项目中使用

<i class="biu-icon-basic_qrcode"></i>