Icon Option คือ ไอคอนที่ใช้แสดงเมนูเมื่อเกิดการกด
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>
);
}
import IconOption from "../../element/icon/IconOption";
export default function TestView() {
return (
<div className="test-view">
<IconOption color="var(--txt-bright)" width={50} isVertical/>
</div>
);
}
Property | Description | Type | Default |
---|---|---|---|
width | ความกว้างของ view | number | 16 |
color | สีของ view | string | "#333" |
isVertical | กำหนดค่าเป็น true เมื่อต้องการในไอคอนแสดงผลแนวตั้ง | boolean | |
style | inline style | CSSProperties | |
className | กำหนดลักษณะเฉพาะของ view | string |