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
Updated over 4 years ago