尝试将 tailwindcss 图标放入输入中
Trying to put a tailwindcss icon into input
我正在尝试将图标放在输入框内的左侧。 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。想在输入中嵌入图标吗?
您可以使用 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>
演示 here(带有额外输入 类 和用于演示目的的普通 svg 图标)
我正在尝试将图标放在输入框内的左侧。 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。想在输入中嵌入图标吗?
您可以使用 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>
演示 here(带有额外输入 类 和用于演示目的的普通 svg 图标)