miniapp/src/components/MenuIcon.jsx

import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import RatioView from './RatioView';
import Icon from './Icon';

const wrapperStyle = {
  display: 'grid',
  placeItems: 'center',
  width: '100%',
  height: '100%',
}

const iconStyle = {
  width: '100rpx',
  height: '100rpx',
  margin: 'auto',
  display: 'block',
}

const txtStyle = {
  marginTop: '20rpx',
  textAlign: 'center',
  fontSize: '30rpx',
  color: '#202020',
}

export default (props) => {
  
  const { icon, text, link } = props;

  const onClick = () => {
    Taro.navigateTo({
      url: link
    })
  }

  return (
    <RatioView>
      <View style={wrapperStyle} onClick={onClick}>
        <View>
          <Icon name={icon} style={iconStyle} />
          <View style={txtStyle}>{text}</View>
        </View>
      </View>
    </RatioView>
  )
}