步骤概览
1. 注册/登录
- 访问 iconfont官网
- 让项目负责人发出邀请进项目
2. figma 上面导出svg 不保留颜色上传 至项目iterms-pro
image.png
3. 提交审核后 会自动审核 大概5分钟
4.覆盖本地资源 （手动版）
- src/icons/iconfont
-
index.css 文件保留
企业微信截图_6d5eea7f-285a-460b-b618-084971179a41.png
image.png
- public/iconfont
运行一段时间后 public 里面的iconfont会删除，毕竟那个chrome版本（85.x.x）比较低
image.png
5.覆盖本地资源 （自动版）
Install
yarn add iconfont-fdd -D
Usage
基本用法
- 第一步：安装 iconfont-fdd 插件；
- 第二步：在你的项目代码根目录下，创建一个 iconfont-fdd.js 文件；
- 第三步：参照示例代码配置好参数，在命令行执行 node iconfont-fdd.js，即可自动导入阿里巴巴矢量库图标文件。
// iconfont-fdd.js
const IconfontAutoImport = require('iconfont-fdd').default;
const path = require('path');
const app = new IconfontAutoImport({
username: 'XXXX', // 阿里巴巴矢量库登录账号
password: 'XXX', // 阿里巴巴矢量库登录密码
projectId: '4826913', // iterms-pro的项目id 这里已是正确的id
basePath: path.resolve('./'),
iconfontFolder: ['public/iconfont', 'src/icons/iconfont'],
protectedFiles: ['index.css'], // 不会被替换的文件
});
app.start();
在项目组如何使用
<i class="icon-pro-你的icon名字"></i>
