vue项目使用iconfont（本地下载、彩色icon）

一、vue-element-admin项目使用iconfont（页面+菜单）

1.iconfont下载资源到本地

2.将下好的文件取这5个放在项目assets文件夹里

3.查看iconfont.css

@font-face {
	font-family: "iconfont";
	... ...
}
.icondemo:before {
  content: "\e613";           //上传的名字会被转换成拼音
}

4.1页面使用

<el-button
	type="primary"
	icon="iconfont icondemo"
>icon</el-button>

4.2菜单使用

1.src/layout/components/sidebar/Item中添加代码，优先判断引入的icon
2.router/index中meta直接使用

if (icon) {
	//优先处理 iconfont
	if(icon.includes('icon')) {
		vnodes.push(<i class={[icon,'iconfont','sub-el-icon']} />)
	} else if (icon.includes('el-icon')) {
        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
	} else {
        vnodes.push(<svg-icon icon-class={icon}/>)
	}
}

二、另一种下载至本地

1.下载iconfont文件，包含iconfont.ttf、iconfont.css（具体下载步骤见第三种）
2.iconfont.ttf 文件 转base64（地址戳这里）
3.打开 iconfont.css文件，修改 @font-face 部分，将转换好的 base64代码粘贴到对应位置

@font-face {  
  font-family: "iconfont";  
  src: url(data:application/font-woff;charset=utf-8;base64,转换的base64内容) format('woff');  
}
/* 或 */
@font-face {  
  font-family: "iconfont";  
  src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');  
}

4.App.vue中引入iconfont.css文件 && 使用

<style>
	@import "./static/font/iconfont.css"; 
</style>
<view class="iconfont icon-XXX"></view>

三、彩色iconfont

1.下载插件：npm install -g iconfont-tools
2.同上，iconfont文件下载后，黑窗口运行命令 iconfont-tools。一直按enter，会多出一个 iconfont-weapp 文件夹
3.iconfont-weapp-icon.css放入static文件夹
4.App.vue引入；项目中使用（t-icon必须；第二个类型要看生成的css文件）

<style>
	@import './static/iconfont-weapp-icon.css'; 
</style>
<view class="t-icon icondianhua"></view>