{
    "id": "bhaskar/icon-search-field",
    "kind": "component",
    "title": "Icon Search Field",
    "summary": "A rounded search bar with a magnifier icon and a quiet focus state.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/icon-search-field/",
    "stack": [],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "mit",
    "version": "1.0",
    "overview": "A single-line search input with a leading magnifier icon that darkens on focus. Wrap it in a form to submit.",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Other",
        "html": "<div class='sf'><svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg><input type='search' placeholder='Search components...' aria-label='Search'></div>",
        "css": ".sf{position:relative;width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif}.sf svg{position:absolute;left:14px;top:12px;color:#8a8a8a;transition:color .15s}.sf input{width:100%;box-sizing:border-box;height:40px;padding:0 14px 0 40px;font:inherit;font-size:14px;color:#111;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none}.sf input::placeholder{color:#a3a3a3}.sf input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.sf:focus-within svg{color:#111}",
        "js": "",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}