How to create custom icons

❗️
Warning!
If you want to modify default Findify 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:

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

❗️Warning!

❗️
Warning!