ReactでSVGを描く
Cosenseのお絵描き機能の左上のペンの選択部分
SVGを返すReactコンポーネントで作っている
便利だったshokai.icon
canvasに描画される線と共通の色・サイズ指定で図形を描ける
https://gyazo.com/00c38121b4b4da58792a7a82e224810e
<PenButton size={10} color='#000' active onClick={onClickCallback}>のように使える
code:button.js
export 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>
)