[BUG] - Icon size prop on Notify module
Sparkenstein opened this issue · comments
Hi, just found out about this library, kudos!
I looked into docs, if I understand correctly, svgSize
is the prop that controls the size of internal svg icons. I am using notify module and it seems like svgSize
doesn't exists on notify, it exists on other modules.
is there any other way I can control the size of icon on svg module?
Expected behavior
Need a way to change svg icon on notify.
Desktop (please complete the following information):
- OS: MacOs
- Browser Chrome
- Version: latest
- Framework: nextjs.
Additional context
PS: on the other hand I have noticed few other bugs as well, if you want I can open separate issues for them. for the time being Just writing them here:
- the
timeout
property is not working, the notification doesn't go away automatically. usingshowOnlyTheLastOne
as a workaround for now, would be really cool if this gets a fix. - when I use
useFontAwesome
the icons are not visible, classes are getting applied, but can't see the icon at all. Do I have to install font-awesome for this?
heres my code:
Notify.success("Login successful", () => {}, {
position: "center-top",
timeout: 1000,
showOnlyTheLastOne: true,
width: "33%",
borderRadius: "8px",
fontSize: "14px",
useIcon: true,
success: {
background: "#00CC6D",
},
});
another cool to have option would be customSvgUrl
in all of them, currenly it looks like it's only in loading
module. so that I can just import my icon from library like
import { SomeIcon } from 'react-icons';
and give it to notiflix
Hi @Sparkenstein ,
I will try to give your answers one by one. There are too many questions in there 😊
-
Using SVG icons in Notify module is not available. There is an option that for the font-based icons and its name is
useFontAwesome
as you have mentioned. And the icons fonts library has to be added to your project by yourself. (Docs) And also, you can use any other font-based icon library within these options as well. Using custom code-based SVG icons in Notify module is already planned for the next updates but it will not be soon. Please use font-icons or the default SVG one until then. -
Using with font-based icons scenario,
fontAwesomeIconSize
option will be helpful to sizing.Notify.success('hello', { useFontAwesome: true, fontAwesomeIconSize: '24px', // e.g. success: { fontAwesomeClassName: 'your-icon-class-name', fontAwesomeIconColor: 'any color that you wanted', }, });
-
The
timeout
property is working like a charm. In your scenario, you are passing a callback function as a second argument to the success method, and the notifications with a callback function do not disappear until they're clicked. This link might be helpful.Notify.success("Login successful", /**() => {}**/, {
-
Font icons libraries have to be added to your project by yourself separately. You can just use these icon class names within Notify module as I have mentioned above.
Thanks,
Furkan.