ReactでSVGを描く
便利だった
canvasに描画される線と共通の色・サイズ指定で図形を描ける
<PenButton size={10} color='#000' active onClick={onClickCallback}> のように使えるbutton.jsexport const PenButton = ({size, color, active, onClick}) => (
<div onClick={onClick}>
<svg width='36' height='36'>
<rect width='36' height='36' rx={active ? 20 : 10} ry={active ? 20 : 10} fill='#fff'>
<circle cx=18 cy=18 r={size/2} fill={color} />
</svg>
</div>
)