notiflix / Notiflix

Notiflix is a pure JavaScript library for client-side non-blocking notifications, popup boxes, loading indicators, and more that makes your web projects much better.

Home Page:https://notiflix.github.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Screenshots
image

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:

  1. the timeout property is not working, the notification doesn't go away automatically. using showOnlyTheLastOne as a workaround for now, would be really cool if this gets a fix.
  2. 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.