一、步骤
1、把 lucide 项目下载到本地；
2、把这个项目 svg-path-outline-with-inkscape 下载到本地；
3、把 lucide 项目里面的 icons 文件夹下的 svg 图片复制到 svg-path-outline-with-inkscape 项目的 src 目录下；
4、给 svg-path-outline-with-inkscape 项目里面的 convert.sh 执行权限；
chmod +x convert.sh5、执行 ./convert.sh 开始转换；
6、打开 iconfont.cn 创建项目；
7、上传 svg-path-outline-with-inkscape 项目里面的 out 下的 svg 图片到项目，等审核通过；
8、下载到本地，解压 download.zip；
9、更改 iconfont.css 拓展为 iconfont.wxss，复制到小程序项目中并引用；
10、创建小程序组件 components/icon
components/icon/icon.js
/**
* Icon Component (iconfont)
* Usage: <l-icon name="home" size="48" color="#059669" />
*/
Component({
properties: {
name: {
type: String,
value: ''
},
size: {
type: Number,
value: 48
},
color: {
type: String,
value: ''
}
}
})components/icon/icon.json
{
"component": true,
"styleIsolation": "apply-shared"
}components/icon/icon.wxml
<text wx:if="{{name}}" class="iconfont icon-{{name}}"
style="font-size: {{size}}rpx;{{color ? ' color: ' + color + ';' : ''}}" />components/icon/icon.wxss
/* Icon Component Styles */
.iconfont {
display: inline-block;
vertical-align: middle;
line-height: 1;
}11、配置为小程序全局组件
app.json
{
"usingComponents": {
"l-icon": "/components/icon/icon"
},
......
}12、业务页面引用
<l-icon name="log-in" size="44" />二、Q&A
为什么要有 svg-path-outline-with-inkscape 这个项目？
lucide 下载的 svg 直接上传到 iconfont 无法正常使用，提示「上传失败，请尝试将所有图层进行轮廓化」，文件太多，sketch 无法处理，需要使用 Illustrator 一个个处理不现实（不知道有没有批量操作、软件需要付费、卒），于是乎就做让 AI 写了一个批量处理的工具。
照片.app 」；
