skills.rest
louisyoungx
louisyoungxCOMMUNITY
Explore all skills by this author →
Website𝕏@louisyoungxGitHub

lucide-react-taro

Wrap Lucide icons for Taro-based WeChat mini-programs with PNG asset generation.

14|3|Updated Feb 14, 2026
Search Tags:#react#cli#icons#lucide#taro#miniprogram
One-click install
npx skills add https://github.com/louisyoungx/lucide-react-taro --skill lucide-react-taro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lucide-react-taro
Source: https://github.com/louisyoungx/lucide-react-taro/tree/main
Command: npx skills add https://github.com/louisyoungx/lucide-react-taro --skill lucide-react-taro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires commander, sharp, and includes scripts (resource) components.

What problem does it solve?

This Skill solves the challenge of using the Lucide icon library in Taro-based WeChat mini-programs, where native SVG rendering is not supported, by providing a high-performance, tree-shakable component wrapper and CLI tools for asset generation.

Core Features & Use Cases

  • Dynamic Rendering: Supports runtime color, size, and stroke width adjustments via React props.
  • Asset Generation: Includes a CLI tool to generate platform-compliant PNG icons for TabBar configurations.
  • Use Case: Developers can maintain a consistent design system across Web and Mini-program platforms by using the same Lucide icon set with optimized performance and minimal bundle size.

Quick Start

Use the lucide-react-taro skill to generate TabBar PNG icons for the House and Settings components with a primary color of #1890ff and a size of 81 pixels.

Frequently Asked Questions about lucide-react-taro

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Lucide icons in a Taro WeChat mini-program when SVG rendering is not supported?▼

To use Lucide icons in a Taro WeChat mini-program without native SVG rendering, you need a component wrapper that handles rendering and a CLI tool to generate platform-compliant PNG assets for required configurations.

How do I generate TabBar PNG icons from Lucide for a WeChat mini-program?▼

You can generate TabBar PNG icons from Lucide for a WeChat mini-program by running a CLI tool that converts specified icon components into platform-compliant PNG assets with defined colors and pixel dimensions.

Can I dynamically style Lucide icon size and color in Taro at runtime?▼

Yes, you can dynamically style Lucide icon size, color, and stroke width in Taro at runtime by passing standard React props to the wrapper component, ensuring consistent API parity with web implementations.

Does the Lucide Taro wrapper support TypeScript and tree-shaking?▼

The Lucide Taro wrapper supports TypeScript type safety and tree-shaking to ensure optimized performance and minimal bundle size in mini-program production builds.

What is the best way to maintain a consistent icon design system across Web and Taro mini-program platforms?▼

The best way to maintain a consistent icon design system across Web and Taro mini-programs is using a wrapper that provides API parity with standard React icon implementations while generating required native PNG assets.

Why does my Lucide SVG icon not render in the Taro WeChat mini-program TabBar?▼

Lucide SVG icons do not render in the Taro WeChat mini-program TabBar because the platform lacks native SVG support, requiring automated conversion of SVG components into PNG assets via a CLI tool.

Related Skills

Explore More Software Engineering Skills→
akillnessakillness
40

spec-kit

Bootstrap a Spec Kit project with specify-cli and wire the SDD pipeline.

Community
Advanced
williamwang25williamwang25

miniprogram-development

Guide WeChat Mini Program project structure, configuration, debugging, and publishing workflows.

Community
Intermediate
wanyusheng63-altwanyusheng63-alt

tabbar-icon-generator

Generate 81x81px PNG TabBar icons from SVG templates for WeChat MiniProgram and Taro projects.

Community
Intermediate
elab-developmentelab-development

fluxui-development

Create Flux UI components in Laravel Blade and Livewire workflows.

Official
Basic