组件库中引入字体图标库
一,从阿里字体图标库下载字体文件
放置到之前文章新建的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>