如果给 input 左侧放个图标？

Question

我想在 input 左侧放个图标。tailwind-css 有一个 ReactJS 库，带有 SVG 和组件作为图标：https://heroicons.com/ 。
我的组件：

import React from 'react';

import { MailIcon } from '@heroicons/react/solid';
const BlogPost = () => (
  <section className="container-full flex flex-col m-20">
    <h2 className="mx-auto uppercase font-bold">Check my blogpost</h2>
    <form action="POST" className="mx-auto mt-5 w-6/12">
      <label htmlFor="email">
        <MailIcon className="w-8 h-8" />
        <input
          className="form-input w-full"
          type="email"
          name="email"
          id="email"
          placeholder="[e-mail]"
        />
      </label>
    </form>
  </section>
);

export default BlogPost;

并且 MailIcon 组件的 className 可以接受 tailwind css。但如何将图标包含在 input 框中呢？

Answer 1

这都是视觉效果，给input左边一个padding，然后把图标盖在上面就行