博客

现在这个项目用的是umi4+vue3，之前一直用是的umi+react，所以想换下vue来开发，这个项目算是第一次使用vue，因为用umi习惯了，所以还是用它，加上umi4也支持vue了，umi4的配置有点不一样了，所以与vue3一起都是摸索着开发。

我放了一个umi+vue的

demo

在github上，大家可以看看。

下面还是开始讲我是怎么添加iconfont上的图标的。

首先，打开在iconfont上的我的项目，这个大家应该都知道，我就不多说了，然后点击Font class，复制下面的css路径，如下图所示：

第二步，在vue项目的根目录下有个plugin.ts文件，没有可以新建一个，我是把网站的favicon.ico引入放在这里了，其实也可以放在umi的配置里的favicons属性中，我以前是放在document.ejs中的，但是umi4已经没有这个文件了，我的plugin.ts是这样的：

/*
 * @Description: 
 * @Author: wangzhicheng
 * @Date: 2022-08-25 09:38:31
 */
import { IApi } from 'umi';

const iconfontUrl = '//at.alicdn.com/t/font_2249139_kupo2k97hkf.css' // Font class

export default (api: IApi) => {
    api.modifyHTML(($) => {
        return $;
    });
    api.addHTMLLinks(() => [{ rel: 'icon', href: `${api.config.publicPath}favicon.ico`, type: 'image/x-icon' }]);
    api.addHTMLLinks(() => [{ rel: 'stylesheet', href: iconfontUrl, type: 'text/css' }]);
};

好了，路径已经引入了，但是还需要加一个样式：

[class^="icon"] {
	font-family: "iconfont" !important;
	font-size: 18px !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

最后就是在template中引入了，如：

<i class="iconwenjianjia"></i>

页面上应该有显示的图标了，当然也可以不用Font class引入，直接下载到本地，应该也是可以的，我就没有去试了，欢迎大家去尝试。