将文本放在React JS中的图标上方

import React from 'react';

const IconWithText = ({ icon, text }) => {
  return (
    <div className="icon-with-text">
      <div className="icon">{icon}</div>
      <div className="text">{text}</div>
    </div>
  );
};

export default IconWithText;

.icon-with-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.icon {
  /* 根据需要设置图标的样式 */
}

.text {
  /* 根据需要设置文本的样式 */
}

import React from 'react';
import IconWithText from './IconWithText';

const App = () => {
  return (
    <div>
      <IconWithText icon={<i className="fa fa-user" />} text="用户" />
      <IconWithText icon={<i className="fa fa-envelope" />} text="消息" />
    </div>
  );
};

export default App;