How can I change Checkbox's Icon using Ant Design? - css

Question

As you can see, I have a Checkbox element, I have an svg file and I want to place it in this checkbox. I don't know how to do this, I searched the internet but couldn't find it. It is not mentioned in the document, unfortunately, can you help?
https://codesandbox.io/s/h4eb1
As an example, I can show the required field at the bottom.

Answer 1

Following example shows how to customize and replace check box with SVG. Please note that this example is not using Antd check box, still you can get the same results
index.css
.my-image:hover {
cursor: pointer;
}
input[type="checkbox"]:checked +.customcheckbox {
fill: red;
}
Demo.js
import React from 'react';
import 'antd/dist/antd.css';
import './index.css';
const Demo = () => {
function onChange(e) {
console.log(`checked = ${e.target.checked}`);
}
return (
<>
<label>
<input
type="checkbox"
onChange={onChange}
name=""
value=""
style={{ display: 'none' }}
/>
<svg
className="customcheckbox"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
width="20"
height="20"
viewBox="0 0 25 28"
>
<path
d="M8 0v2h8v-2h-8zm0 24v-2h8v2h-8zm10-24h6v6h-2v-4h-4v-2zm-18 8h2v8h-2v-8zm0-2v-6h6v2h-4v4h-2zm24 10h-2v-8h2v8zm0 2v6h-6v-2h4v-4h2zm-18 6h-6v-6h2v4h4v2zm12-18h-12v12h12v-12z"
class="cls-1"
/>
</svg>
</label>
</>
);};
export default Demo;
If you want to customize antd checkbox icon (not SVG), use can customise the antd css classes (inspect the checkbox in browser to check the classes).