Icon

代码示例

以下是一个在 Taro 项目中使用 Icon 组件的示例代码：

import { Icon } from '@ant-design/react-native'
import { View } from '@tarojs/components'
 
export default function MyIcon() {
  return (
    <View>
      {/* 使用内置图标 */}
      <Icon name="search" size={30} color="#333" />
 
      {/* 自定义颜色和大小 */}
      <Icon name="user" size={40} color="#108ee9" />
 
      {/* 加载自定义图片作为图标 */}
      <Icon
        name="custom"
        size={50}
        color="#f00"
        style={{ fontSize: 50 }}
        // 如果需要使用本地图片或网络图片作为图标，可以通过其他组件实现
      />
    </View>
  )
}

注意事项

• Taro 默认支持部分第三方 UI 库的 Icon 组件，如 @ant-design/react-native。不同库的图标名称和用法可能有所差异，请根据具体文档使用。
• Icon 的 name 属性通常对应图标库中预设的图标名称，确保名称正确，否则无法显示。
• 可以通过 size 和 color 属性控制图标大小和颜色，单位一般是像素。
• 自定义图标（如本地图片）可能需要借助 Image 组件或者其他方式实现，Icon 组件本身多用于矢量字体图标。

常用 Icon 名称示例

图标名称	含义
search	搜索
user	用户
setting	设置
home	首页

你可以根据实际需求选择合适的图标名称。