Comments (9)
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:
- To have a way to render icons from a string, that string can change dinamically in runtime.
- To make those icons fit the format of each Prime React component to avoid customizations per component.
- 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.
Hi @gucal , I have seen that my change in the documentation was not published in 10.5.3 but it is now set to 10.5.4. Why is that? Is there something I missed to do in the PR workflow (like, close this ticket)?
Thank you.
from primereact.
Related Issues (20)
- VirtualScroller: does not update items if only rows length changes HOT 9
- Datatable: Header button icons not rendering properly sometimes HOT 2
- TreeTable: frozen column support for column grouping.
- Galleria: Galleria image in fullscreen mode not closing on escape button click
- DataTable: PageLinks uses prop pageCount instead of totalPages HOT 2
- Tooltip: Crashes when `position` prop is `undefined` HOT 1
- MultiSelect: Duplicate Labels in MultiSelect Component Cause Errors HOT 1
- Calendar: Incorrect styling when selecting month range
- DataTable: row group doesn't allow to group different values
- Input Changes
- rowIndex undefined when pressing tab key while second row is selected in (editable) DataTable
- Console Error on Left Click After Right Click in Data Table HOT 1
- Apollo theme: UI Issue with Frozen Columns and Selection Mode in Dark Mode
- Password - eye icon gets tabindex along with the input HOT 2
- InputNumber throw error and not update the value when use browser autocomplete HOT 8
- DataTable: Global filter resets column filters
- Button Internal Changes
- Calendar: onMonthChange callback works incorrectly
- Calendar: onBlur triggers when clicking a day, but onChange is not triggered HOT 2
- Accordion is completely broken when set unmountOnExit to false HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from primereact.