一、步骤

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.sh

5、执行 ./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 写了一个批量处理的工具。