SuperAPI AI 工具集

lucide-react-taro

前端与建站

查看项目

更新于 10-16 00:01

技能介绍

用途:lucide-react-taro 是 Lucide 图标库的 Taro 适配版本,面向 Taro 微信小程序和 Web 平台,用于在 Taro 项目中添加图标、使用 lucide 图标库以及生成 TabBar 图标。

主要能力:提供与 Lucide 官方一致的 PascalCase 图标组件,支持按需导入与 tree shaking;组件支持 size、color、filled、strokeWidth、absoluteStrokeWidth、className、style 等属性,并兼容 Taro Image 的其他属性;提供 LucideTaroProvider 设置子树默认颜色与尺寸;附带 CLI 工具用于模糊或精确查找图标、批量验证图标是否存在,以及生成微信小程序 TabBar 所需的 PNG 图标。

使用方式:安装命令为 npm install lucide-react-taro 或 pnpm add lucide-react-taro。基础用法从 lucide-react-taro 导入图标组件,例如 House、Settings、Camera 等,通过 color、size、strokeWidth 等属性控制外观。按需导入可使用 lucide-react-taro/icons/house。查找图标命令如 pnpm dlx taro-lucide-find arrow,精确查找加 --exact,列出全部加 --list,批量验证加 --json。生成 TabBar 图标命令如 pnpm dlx taro-lucide-tabbar House Settings User -c "#999999" -a "#1890ff",可用 -o 指定输出目录、-s 指定尺寸。

适用场景:Taro 微信小程序与 Web 项目中的图标展示、TabBar 图标生成,以及需要在生成代码前验证图标名称是否正确的场景。

限制:微信小程序端图标通过 Image 组件渲染 data:image/svg+xml,className 仅作用于外层 Image,无法穿透修改内部 SVG 的 stroke 或 fill,也不能用 text-* 类名改变颜色,需使用 color 属性或 LucideTaroProvider;小程序端无法继承父元素文本颜色,currentColor 在 Data URL 中回退为黑色;TabBar 不支持 SVG 或 base64,只能使用 CLI 生成的本地 PNG,且 iconPath 与 selectedIconPath 必须加 ./ 前缀。组件内部已实现 base64 缓存与编码 polyfill。