skills.rest
wanyusheng63-alt
wanyusheng63-altCOMMUNITY
Explore all skills by this author →
GitHub

tabbar-icon-generator

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

Updated May 3, 2026
Search Tags:#png#svg#icon-generation#weixin#color-theme#miniprogram#tabbar
One-click install
npx skills add https://github.com/wanyusheng63-alt/vocab-learn --skill tabbar-icon-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tabbar-icon-generator
Source: https://github.com/wanyusheng63-alt/vocab-learn/tree/main/.codebuddy/skills/tabbar-icon-generator
Command: npx skills add https://github.com/wanyusheng63-alt/vocab-learn --skill tabbar-icon-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Automates the creation of consistent TabBar icons for WeChat MiniProgram and Taro projects, eliminating manual design and inconsistent assets.

Core Features & Use Cases

  • Generate PNG TabBar icons (81x81) in normal and active states from SVG templates.
  • Support common icon types (home, list, user, settings, search, message, cart, favorite) with customizable colors.
  • Use case: quickly scaffold navigation assets for a new mini-program by generating all required icons and integrating them into the app.

Quick Start

Generate all preset icons with default colors using the command line.

Frequently Asked Questions about tabbar-icon-generator

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

FAQPage Schema
How do I generate 81x81 TabBar icons for WeChat MiniProgram?▼

To generate WeChat MiniProgram TabBar icons, this Skill converts SVG templates into 81x81px PNG assets. It outputs both normal and active color variants directly from the command line for quick integration.

Can I generate TabBar icons for Taro projects with custom colors?▼

Yes, you can generate TabBar icons for Taro projects with custom colors using the --normal-color and --active-color CLI arguments. This allows you to create matching active and inactive state assets.

How do I automate MiniProgram navigation asset creation from SVG templates?▼

You automate MiniProgram navigation asset creation by running the Node.js CLI to batch process SVG templates. The script outputs 81x81 PNG files, eliminating manual design and ensuring icon consistency.

Do I need sharp installed to generate MiniProgram TabBar icons?▼

No, you do not need to manually install sharp to generate MiniProgram TabBar icons. The Skill's Node.js script automatically handles the sharp dependency during the PNG generation process.

What common MiniProgram TabBar icon types are available for PNG generation?▼

Available MiniProgram TabBar icon types include home, list, user, settings, search, message, cart, and favorite. These SVG templates are converted into 81x81px PNGs for both normal and active states.

What is the best way to scaffold navigation assets for a new MiniProgram?▼

The best way to scaffold navigation assets is using the CLI to generate all preset TabBar icons with default colors. This outputs the required 81x81px PNGs instantly for your MiniProgram or Taro project.

Related Skills

Explore More Design & Creative Skills→
fabioc-alohafabioc-aloha

svg-to-png

Convert SVG files to PNG images using the resvg-js library.

Community
Intermediate
louisyoungxlouisyoungx
14

lucide-react-taro

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

Community
Intermediate
SoltusSoltus
1

cloudbase-document-database-in-wechat-miniprogram

Integrate CloudBase document database CRUD operations in WeChat MiniPrograms.

Community
Intermediate
Cuki2910Cuki2910
1

_svg-drawing

Convert SVG source code into PNG images for visual feedback.

Community
Basic