CODEWITHSUNDEEP
cssreactjscheckboxantd
Kubilay
Kubilay

Reputation: 65

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

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.

Upvotes: 0

Views: 3225

Answers (1)

Ved
Ved

Reputation: 1028

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).

Upvotes: 1

Related Questions