icon search

Icon Search คือ ไอคอนที่ใช้แสดงผลเมื่อต้องการแสดงการค้นหา

Source Code

ReactJs
Copy
export default function IconSearch({ width = "14", color = "#333",className,style}) {
  return (
    <svg
      width={width}
      style={style}
      className={className}
      viewBox="0 0 416 416"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M408.69 373.39L314.6 279.3C337.253 249.143 349.481 212.437 349.44 174.72C349.44 78.38 271.06 0 174.72 0C78.38 0 0 78.38 0 174.72C0 271.06 78.38 349.44 174.72 349.44C212.437 349.481 249.143 337.253 279.3 314.6L373.39 408.69C378.153 412.948 384.365 415.22 390.751 415.042C397.137 414.863 403.212 412.246 407.729 407.729C412.246 403.212 414.863 397.137 415.042 390.751C415.22 384.365 412.948 378.153 408.69 373.39ZM49.92 174.72C49.92 150.037 57.2394 125.908 70.9526 105.385C84.6658 84.8616 104.157 68.8657 126.961 59.4198C149.765 49.974 174.858 47.5026 199.067 52.318C223.276 57.1334 245.513 69.0195 262.967 86.4731C280.421 103.927 292.307 126.164 297.122 150.373C301.937 174.582 299.466 199.675 290.02 222.479C280.574 245.283 264.578 264.774 244.055 278.487C223.532 292.201 199.403 299.52 174.72 299.52C141.633 299.48 109.913 286.319 86.5169 262.923C63.121 239.527 49.9597 207.807 49.92 174.72Z"
        fill={color}
      />
    </svg>
  );
}

Usage

ReactJs
Copy
import IconSearch from "../../element/icon/IconSearch";

export default function TestView() {
  return <div className="test-view">
          <IconSearch color="#fff" width={50} />
  </div>;
}

Properties

Property

Description

Type

Default

width

ความกว้างของ view

number

"14"

color

สีของ view

string

"#333"

className

กำหนดลักษณะเฉพาะของ view

string

style

inline style

CSSProperties

ยักซ่า (Yakxar)
สร้างสรรค์และแบ่งปันสื่อดิจิทัลง่ายๆ ที่นี่
© 2025 ยักซ่า (Yakxar)