Is there a simple way to use SVGs as a checkbox in JSX?

I have a fairly complicated form that I am working on and I have two SVG's that are styled as checkboxes for the checked and unchecked states. I am trying to find a way to use these instead of the default html checkbox, but still want to be able to disable it. Here is an example of the JSX code for the checkbox, any help is greatly appreciated!

<input type="radio" name='weekly' value="weekly1" id="weekly1" 
checked={this.props.RecurForm.weeklyRadio === 'weekly1'} 
onChange={(e) => { this.onFormChange(e, 'weeklyRadio') }} disabled={(this.props.RecurForm && (this.props.RecurForm.dailyRadio !== 'daily2') ? false : true)} />