Question: Is "i" tag supported as Custom Icon? about primereact HOT 8 OPEN

Agreed either it needs to be supported that way or the docs need to be updated.

from primereact.

Can I ask what was your idea behind <Button icon={() => <i className="pi pi-times" />}/> If you need an icon like that just use icon="pi pi-times" so I am curious your use case?

from primereact.

Hi!

My use case is to have a way to embed an SVG icon from a string (either markup or data URI). This string can change dynamically in runtime, so a solution in compilation time is not an option.

According to the "Custom Icon" page, you can use the "img" tag to embed an icon, which means you can theoretically use an embedded data URI icon. However, the format will not be applied due to the limitations of the "img" tag. Using an "i" tag would fix that (by changing the "content" CSS property?) through the "style" property.

Also, that page mentions that you can use the SVG element to embed an icon. However, if you have that markup in a string, it is complicated to parse that into an SVG element without using "dangerouslySetInnerHTML," which requires a parent element to wrap the SVG. Having the possibility to use the "i" tag with embedded SVG set in "dangerouslySetInnerHTML" would solve that issue as well.

I hope it is clear what I am saying. I can provide you with some examples if you want; just give me a couple of days to be in front of a computer again. :)

Thanks!

from primereact.

Hi @melloware

Finally, I have something to show.

In this forked example you can see different ways in which icons can be rendered.

As I said before, my use case is the following:

1. To have a way to render icons from a string, that string can change dinamically in runtime.
2. To make those icons fit the format of each Prime React component to avoid customizations per component.
3. The approach must work offline.

As you can see in the example, the components (dropdown and button) that have as label "i tag embedded SVG markup" almost fulfill my goal. Both use the same constant iconIEmbeddedSvg which renders icons using the i tag and injecting the SVG string via dangerouslySetInnerHTML.

The only thing I would miss would be to format the icon a bit (size and position) like the ClassName elements do.
But, as you can see, that is a problem that is also shared by the "embedded SVG" elements who embed the SVG directly (as supported in the Custom Icons page). So, I guess this is a Bug?

The only other way I have tried that half works is to embed the data uri of the SVG as src of the img tag. But as you can (I think due to the limitations of the img tag) the corresponding color is not applied, so I would discard this option for now and stay with the i tag.

I also tried to replace the CSS "content" value (where the font is displayed accordingly) with the icon's data uri, however, I could not find a way to do it since content is located inside ::before of each icon's class.

As a conclusion, this is the reason why I believe that rendering icons with the "i" tag should be officially supported and listed in the documentation, as it promotes flexibility when rendering svg icons that come from a string that is not possible to do otherwise. The other options to display custom icons ("Material" and "Font Awesome") I have discarded for now because I don't want to be attached to a library and because I need it to work offline (I think with both you must be online for it to work).

What do you think?

Thanks!

from primereact.

Sounds good to me! Changing the ticket to enhancement. Feel free to research and provide a PR most of hte work is done in the class utils\IconUtils.js

from primereact.

Thanks!

Is there a guide to make PRs for PrimeReact? That would be the first time I do that.

What about the documentation? The fact that you changed the ticket to "Enhancement" means that someone will update the documentation? Or must I PR that as well?

from primereact.

if you fix it submit your PR and i will coach your through fixing it. The docs are in this repo too it is really easy to update the examples in \components\doc\customicons and it will get published on next build!

from primereact.

Hi @melloware

Since I am not sure what to fix, for now I just updated the docu, I submitted the PR: #6303

Please let me know If I did it correctly.

from primereact.