taro button 加图标

### 在 Taro 中为 Button 组件添加图标

为了实现按钮带有图标的样式，在 Taro 框架下可以创建自定义组件来组合 `Button` 和 图标元素。由于官方组件库中的 Icon 可能存在命名冲突问题[^2]，建议使用其他名称如 UIcon 或 OhMyIcon 来避免此类情况。

下面是一个简单的例子展示如何通过封装一个新的组件来进行操作：

import React from 'react';
// 假设这里导入的是一个名为UIcon的自定义图标组件而非标准Icon
import { View, Button } from '@tarojs/components';

class IconButton extends React.Component {
  render() {
    const { iconName, children, ...otherProps } = this.props;
    
    return (
      <View className='icon-button'>
        {/* 使用自定义的UIcon代替默认Icon */}
        <UIcon name={iconName}></UIcon>
        <Button {...otherProps}>{children}</Button>
      </View>
    );
  }
}

此代码片段展示了如何构建一个包含图标的按钮组件。在这个例子中，`IconButton` 接收两个主要属性：一个是用于指定要显示哪个图标的 `iconName` 属性；另一个则是传递给内部 `Button` 的剩余所有 props (`...otherProps`) ，这允许外部使用者自由设置按钮的行为和其他外观特性。

对于希望进一步定制样式的开发者来说，还可以利用 CSS 类名 `.icon-button` 对布局做调整，比如让图标和文字之间有适当间距等。