Warning!
If you want to modify default icons (plus, minus signs, arrows etc.), you should not change the default components in the components/Icons/ path, instead, you need to create a new component with custom icons.
Generally, there are multiple ways to create custom icons. Let's create a new component called 'CustomIcons.tsx' and here is how we can code new custom icons:
CustomIcons.tsx
import React from 'react';export const SomeCustomIcon1 = (props) => ( <svg className='some_class_name'> ... </svg>);export const SomeCustomIcon2 = (props) => ( <svg className='some_class_name'> ... </svg>);export const SomeCustomIcon3 = (props) => ( <svg className='some_class_name'> ... </svg>);
And then you will be able to use these icons in any other component like that:
Some component
...some imports here...import { SomeCustomIcon1, SomeCustomIcon2, ...more icons if needed } from 'CustomIcons.tsx'; // import newly created file with custom icons ...some code here...<SomeCustomIcon1 props={props} /> //Here is how you can use an icon...some code here