如何将文本放入react-icons组件中？

npm install react-icons --save

import React from 'react';
import { FaBeer } from 'react-icons/fa'; // 导入你需要的图标组件

const MyComponent = () => {
  return (
    <div>
      <FaBeer>我的啤酒</FaBeer> {/* 将文本作为子组件传递 */}
    </div>
  );
};

export default MyComponent;

import React from 'react';
import { FaBeer } from 'react-icons/fa';
import './MyComponent.css'; // 引入CSS文件

const MyComponent = () => {
  return (
    <div className="icon-container">
      <FaBeer />
      <span className="icon-text">我的啤酒</span>
    </div>
  );
};

export default MyComponent;

.icon-container {
  display: flex;
  align-items: center;
}

.icon-text {
  margin-left: 5px; /* 调整文本与图标之间的间距 */
}