尝试将 tailwindcss 图标放入输入

Posted

技术标签:

【中文标题】尝试将 tailwindcss 图标放入输入【英文标题】:Trying to put a tailwindcss icon into input 【发布时间】:2021-08-29 19:04:41 【问题描述】:

我正在尝试在左侧的输入中放置一个图标。 tailwindcss 有一个 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="email@kemuscorp.com" />
      </label>
    </form>
  </section>
)

export default BlogPost

如您所见,MailIcon 组件可以接收tailwindcss。将图标包含在输入中的任何想法?

【问题讨论】:

【参考方案1】:

您可以使用position: absolute 将其放在输入上方,并使用pointer-events-none 防止点击它

<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@kemuscorp.com" className="form-input w-full">
</label>

Demo here(带有额外的输入类和纯 svg 图标用于演示目的)

【讨论】:

谢谢,对我帮助很大。

以上是关于尝试将 tailwindcss 图标放入输入的主要内容,如果未能解决你的问题,请参考以下文章

TailwindCSS FontAwesome svg 图标未对齐

如何将delphi程序图标放入系统托盘中?

设置阶段图标

如何将上传图标修复为文件上传输入(材料 UI)

无法设置操作扩展图标,改为灰色图标

将图标添加到角度材料输入