微信小程序 (Taro) 使用 lucide icon

README.md

Icon 组件

一个用于在 Taro 小程序中渲染 Lucide 图标的 React 组件。

使用方法

import { Icon } from './lib/icon'
import { Home, Settings, User } from 'lucide'

// 基本用法
<Icon icon={Home} />

// 自定义尺寸
<Icon icon={Settings} size={32} />

// 自定义颜色和描边
<Icon 
  icon={User} 
  size={24} 
  color="#ff6b6b" 
  strokeWidth={2} 
/>

API 参数

参数	类型	默认值	描述
icon	IconNode	-	必需。Lucide 图标节点
size	number	24	图标尺寸（像素）
color	string	"currentColor"	图标颜色
strokeWidth	number	1	描边宽度

内部函数

btoa(string)

自定义实现的 Base64 编码函数，用于在不支持原生 btoa 的环境中工作。

svgPropToBase64(iconNode, options)

将 Lucide 图标节点转换为 Base64 数据 URL 的核心函数。

参数:

• iconNode: Lucide 图标节点数组
• options: 包含宽度、高度、颜色和描边宽度的选项对象

Icon.tsx

import { IconNode, Pause } from 'lucide'
import { Image } from '@tarojs/components'
import React from 'react'

const b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
  // Regular expression to check formal correctness of base64 encoded strings
  b64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/;

function btoa(string) {
  string = String(string);
  var bitmap, a, b, c,
    result = "", i = 0,
    rest = string.length % 3; // To determine the final padding

  for (; i < string.length;) {
    if ((a = string.charCodeAt(i++)) > 255
      || (b = string.charCodeAt(i++)) > 255
      || (c = string.charCodeAt(i++)) > 255)
      throw new TypeError("Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.");

    bitmap = (a << 16) | (b << 8) | c;
    result += b64.charAt(bitmap >> 18 & 63) + b64.charAt(bitmap >> 12 & 63)
      + b64.charAt(bitmap >> 6 & 63) + b64.charAt(bitmap & 63);
  }

  // If there's need of padding, replace the last 'A's with equal signs
  return rest ? result.slice(0, rest - 3) + "===".substring(rest) : result;
};

function svgPropToBase64(
  iconNode: IconNode,
  options: {
    width?: number,
    height?: number,
    color?: string,
    strokeWidth?: number
  }
) {

  const { width = 24, height = 24, color = "currentColor", strokeWidth = 2 } = options;

  // Convert SVG icon node to SVG string
  const svgString = iconNode.map(([tag, attrs]) => {
    const attrsString = Object.entries(attrs)
      .map(([key, value]) => `${key}="${value}"`)
      .join(' ');
    return `<${tag} ${attrsString}/>`;
  }).join('');

  // Wrap in SVG root element with proper attributes
  const fullSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round">${svgString}</svg>`;

  // Convert to base64
  const base64 = btoa(fullSvg);

  return `data:image/svg+xml;base64,${base64}`;
}

export const Icon = React.memo((props: {
  icon: IconNode
  size?: number
  color?: string
  strokeWidth?: number
}) => {
  const { size = 24, color = "currentColor", strokeWidth = 1 } = props;
  return <Image style={{
    width: size,
    height: size,
  }} src={svgPropToBase64(props.icon, {
    width: size,
    height: size,
    color: color,
    strokeWidth: strokeWidth
  })} />
})