Icon Option

Icon Option คือ ไอคอนที่ใช้แสดงเมนูเมื่อเกิดการกด

Source Code

ReactJs
Copy
export default function IconOption({
  width = 16,
  color = "#333",
  isVertical,
  style,
  className,
}) {
  return (
    <svg
      className={className}
      width={width}
      viewBox="0 0 25 7"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style={{
        ...style,
        transform: "rotate(" + (isVertical ? "90" : "0") + "deg)",
      }}
    >
      <path
        d="M12.3149 0.678903C13.84 0.678903 15.0764 1.91525 15.0764 3.44037C15.0764 4.96548 13.84 6.20184 12.3149 6.20184C10.7898 6.20184 9.55347 4.96548 9.55347 3.44037C9.55347 1.91525 10.7898 0.678903 12.3149 0.678903Z"
        fill={color}
      />
      <path
        d="M21.5198 0.678903C23.0449 0.678903 24.2812 1.91525 24.2812 3.44037C24.2812 4.96548 23.0449 6.20184 21.5198 6.20184C19.9947 6.20184 18.7583 4.96548 18.7583 3.44037C18.7583 1.91525 19.9947 0.678903 21.5198 0.678903Z"
        fill={color}
      />
      <path
        d="M3.1101 0.678903C4.63522 0.678903 5.87157 1.91525 5.87157 3.44037C5.87157 4.96548 4.63522 6.20184 3.1101 6.20184C1.58498 6.20184 0.348633 4.96548 0.348633 3.44037C0.348633 1.91525 1.58498 0.678903 3.1101 0.678903Z"
        fill={color}
      />
    </svg>
  );
}

Usage

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

export default function TestView() {
  return (
    <div className="test-view">
      <IconOption color="var(--txt-bright)" width={50} isVertical/>
    </div>
  );
}

Properties

Property

Description

Type

Default

width

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

number

16

color

สีของ view

string

"#333"

isVertical

กำหนดค่าเป็น true เมื่อต้องการในไอคอนแสดงผลแนวตั้ง

boolean

style

inline style

CSSProperties

className

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

string

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