使用React和react-fa在输入文本背景上动态放置一个Font Awesome图标

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faIconName } from '@fortawesome/free-solid-svg-icons';

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faIconName } from '@fortawesome/free-solid-svg-icons';

const MyComponent = () => {
  return (
    <div>
      <input type="text" className="input-with-icon" />
      <FontAwesomeIcon icon={faIconName} className="icon" />
    </div>
  );
};

export default MyComponent;

.input-with-icon {
  background-image: url('path/to/your/background-image.png');
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 30px; /* 调整右边距以适应图标的宽度 */
}

.icon {
  position: absolute;
  top: 50%;
  right: 10px; /* 调整右边距以适应图标的位置 */
  transform: translateY(-50%);
}