Lucide icons for Taro React - 为 Taro 框架封装的 Lucide 图标库

[NoyaMrXiao]

lucide-taro-react

Lucide icons for Taro React - 为 Taro 框架封装的 Lucide 图标库

Installation

# 使用 npm
npm install lucide-taro-react

# 使用 yarn
yarn add lucide-taro-react

# 使用 pnpm
pnpm add lucide-taro-react

Usage

基础使用

import { Search, Heart, User } from 'lucide-taro-react'

function MyComponent() {
  return (
    <View className="flex gap-2">
      <Search size={32} color="#f00" />
      <Heart size={28} color="#0f0" />
      <User size={24} color="#00f" />
    </View>
  )
}

使用 Tailwind 类名

支持从 Tailwind 类名中自动提取尺寸和颜色：

import { Search } from 'lucide-taro-react'

// 使用 Tailwind 类名
<Search className="w-8 h-8 text-red-500" />

// 混合使用 props 和 className
<Search size={32} className="text-blue-600" />

自定义创建图标

如果需要从 SVG 字符串创建自定义图标：

import { createLucideIcon } from 'lucide-taro-react'

const svgString = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M2 12h20"/></svg>'
const MyIcon = createLucideIcon(svgString, 'MyIcon')

<MyIcon size={24} color="#000" />

批量创建图标

如果需要批量创建自定义图标：

import { createLucideIcons } from 'lucide-taro-react'

const Icons = createLucideIcons({
  CustomIcon1: '<svg>...</svg>',
  CustomIcon2: '<svg>...</svg>',
  CustomIcon3: '<svg>...</svg>',
})

<Icons.CustomIcon1 size={24} />
<Icons.CustomIcon2 size={32} color="#ff0000" />

Props

所有图标组件都支持以下属性：

• size?: number | string - 图标大小（默认: 24），支持数字或字符串（如 "24px"）
• color?: string - 图标颜色（默认: 'currentColor'）
• className?: string - 支持 Tailwind 类名，会自动提取 w-*、h-*、text-* 等类名
• style?: any - 自定义样式
• 其他 @tarojs/components/Image 支持的属性

Tailwind 类名支持

• 尺寸: w-4, w-5, w-6, w-8, w-10, w-12, w-16 或对应的 h-* 类名
• 颜色: text-* 类名（如 text-red-500, text-blue-600, text-primary-500 等）

查看所有可用图标

所有图标都可以直接导入使用。如果需要查看所有可用的图标名称：

import { iconNames } from 'lucide-taro-react'

console.log(iconNames) // ['AArrowDown', 'AArrowUp', 'Search', ...]

所有图标都支持 tree-shaking，只导入使用的图标会被打包。

Development

构建

npm run build

本地测试

# 在包目录
npm link

# 在你的 Taro 项目中
npm link lucide-taro-react

发布

查看 PUBLISH.md 了解详细的发布步骤。

更多信息

• 查看 USAGE.md 了解详细的使用指南
• 查看 Lucide Icons 了解所有可用的图标

License

MIT