Trying to put a tailwindcss icon into input

Question

I am trying to put an icon inside an input, to the left. tailwindcss has a library for ReactJS with SVG and components as icons: https://heroicons.com/.

My component:

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="[email protected]" />
      </label>
    </form>
  </section>
)

export default BlogPost

As you see, the MailIcon components can receive tailwindcss. Any idea to incrust the icon inside the input?

Answer 1

You can use position: absolute to place it above input and pointer-events-none to prevent click on it

<label htmlFor="email" className="relative text-gray-400 focus-within:text-gray-600 block">

     <MailIcon className="pointer-events-none w-8 h-8 absolute top-1/2 transform -translate-y-1/2 left-3" />

      <input type="email" name="email" id="email" placeholder="[email protected]" className="form-input w-full">
</label>

Demo here (with extra input classes and plain svg icon for demonstration purposes)

Answer 2

I did this way (using tailwindcss):

<div class="w-2/3 flex justify-end items-center relative">
    <input
       placeholder="Pesquisar"
       class="border border-gray-400 rounded-lg p-4 w-full"
    />
    <img src="/icons/search.svg" class="absolute mr-2 w-10" alt="Search Icon" />
</div>