SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillslucide-react-taro

lucide-react-taro

Frontend & websites

View repository

Updated 10-16 00:01

About this skill

lucide-react-taro

lucide-react-taro is the Taro-adapted version of the Lucide icon library, designed specifically for Taro WeChat Mini Program and Web platforms.

Rendering principle (WeChat Mini Program side)

In the WeChat Mini Program environment, icons are not rendered through the native <svg /> tag. To be compatible with the Mini Program platform, the underlying layer converts the SVG into a data:image/svg+xml format string and hands it to the @tarojs/components of <Image /> component for display (implementation entry point:src/create-icon.tsx of createIcon）。

Based on the above implementation principle, please note the following points:

  • The passed-in className only applies to the outer <Image /> component, and can usually only be used to control styles such as layout, margin, and alignment. It cannot penetrate to modify the stroke or fill of the internal SVG.
  • Therefore, the icon color cannot be changed through a text color class name such as text-* . If you need to adjust the icon color, please directly use the color property provided by the component.

Installation

npm install lucide-react-taro
# or
pnpm add lucide-react-taro

Basic usage

✅ Correct example (use color/size/strokeWidth, and the optional style to override the size)

import { House, Settings, Camera, Zap, Heart } from 'lucide-react-taro';

function MyComponent() {
  return (
    <View>
      <House />
      <Settings size={32} />
      <Camera color="#ff0000" />
      <Zap size={48} color="#1890ff" strokeWidth={1.5} absoluteStrokeWidth />
      <Heart filled color="#ff3e98" />
      <House className="my-icon" style={{ marginRight: 8 }} />
    </View>
  );
}

❌ Incorrect example (className of text-* will not change the icon's stroke/fill; it is only the <Image /> class)

import { House } from 'lucide-react-taro';

function MyComponent() {
  return (
    <View>
      <House className="text-red-500 w-8 h-8" />
    </View>
  );
}

Props

Property Type Default value Description
size number | string 24 Icon size
color string - Icon color (falls back to black when not set)
filled boolean false Whether to render as solid (fill=currentColor)
strokeWidth number | string 2 Stroke width
absoluteStrokeWidth boolean false Absolute stroke width; when enabled, the stroke does not scale with size
className string - Image's className (used for layout, etc.)
style CSSProperties - Inline style

Also supports other properties of the Taro Image component.

On-demand import

Supports tree shaking, packaging only the icons used:

import { House, Settings } from 'lucide-react-taro';
import { House } from 'lucide-react-taro/icons/house';

Icon list

All icon names are consistent with Lucide official , using PascalCase naming.

Common icons:House、Settings、User、Search、Menu、ChevronRight、Check、X、Plus、Minus、Heart、Star、Camera、Image、Share、Download、Upload

CLI tool: find and validate icons

This library provides a CLI tool to find and validate whether icons exist. This is very useful for AI assistants, as it can validate whether icon names are correct before generating code.

Find icons

# 模糊查找（默认）
pnpm dlx taro-lucide-find arrow

# 精确查找
pnpm dlx taro-lucide-find arrow-up --exact

# 列出所有图标
pnpm dlx taro-lucide-find --list

Validate icons

It is recommended to use the --json parameter to batch validate whether icons exist before generating code.

pnpm dlx taro-lucide-find arrow-up user settings arw --json

Example output:

[
  {
    "query": "arrow-up",
    "exists": true,
    "name": "ArrowUp",
    "suggestions": []
  },
  {
    "query": "arw",
    "exists": false,
    "name": null,
    "suggestions": ["ArrowBigDownDash", "Archive", "..."]
  }
]

If exists is false, please use the recommended icon name from suggestions .

CLI tool: generate TabBar icons

The WeChat Mini Program TabBar does not support base64 or SVG images, and can only use local PNG files. This library provides a CLI tool to generate the PNG icons required by the TabBar.

Batch generate TabBar icons

Supports generating all TabBar icons at once.

pnpm dlx taro-lucide-tabbar House Settings User -c "#999999" -a "#1890ff"

Specify output directory and size

pnpm dlx taro-lucide-tabbar House Settings User -c "#999999" -a "#1890ff" -o ./src/assets/tabbar -s 81

CLI parameters

Parameter Short form Default value Description
--color -c #000000 Icon color
--active-color -a - Selected state color
--size -s 81 Icon size
--output -o ./tabbar-icons Output directory
--stroke-width - 2 Stroke width

Usage in app.config.ts

export default defineAppConfig({
  tabBar: {
    color: '#999999',
    selectedColor: '#1890ff',
    backgroundColor: '#ffffff',
    borderStyle: 'black',
    list: [
      {
        pagePath: 'pages/index/index',
        text: '首页',
        iconPath: './assets/tabbar/house.png',
        selectedIconPath: './assets/tabbar/house-active.png',
      },
      {
        pagePath: 'pages/settings/index',
        text: '设置',
        iconPath: './assets/tabbar/settings.png',
        selectedIconPath: './assets/tabbar/settings-active.png',
      },
    ],
  },
});

LucideTaroProvider (global default configuration)

Via LucideTaroProvider set the default color and size for all icons in the subtree, avoiding passing props repeatedly for each icon. Priority:color prop > defaultColor > falls back to black.

import { LucideTaroProvider, House, Settings } from 'lucide-react-taro';

function App() {
  return (
    <LucideTaroProvider defaultColor="#666" defaultSize={20}>
      <House />              {/* 使用 #666, 20px */}
      <Settings color="red" /> {/* color prop 优先 */}
    </LucideTaroProvider>
  );
}

LucideTaroProvider Props

Property Type Description
defaultColor string Default icon color for child components
defaultSize number | string Default icon size for child components

Notes

  1. No color inheritance: On the mini program side, it is <Image /> rendering, and text color cannot be inherited from the parent element (currentColor falls back to black in the Data URL); please set the color explicitly via the LucideTaroProvider or color prop, and do not rely on className 's text-*。
  2. Performance optimization: base64 caching is implemented internally in the component, so the same parameter combination is computed only once.
  3. Compatibility: a base64 encoding polyfill is built in, so it can be used in WeChat Mini Programs without additional configuration.
  4. TabBar icons: Mini Program TabBar does not support SVG/base64; please use the CLI tool to generate PNG icons.
  5. TabBar icon path：iconPath and selectedIconPath must be prefixed with ./ (e.g. ./assets/tabbar/house.png), otherwise the image cannot be loaded correctly.