Office UI Fabric Icon Generator
Like
Share
Report
Posted
by
R3dKap
1,594
[13-mar-2022] Update v2.0
- Added latest official icons -> now 2254 icons available!
- Application direct download below (instead of ZIPped component MSAPP file)
This application will allow you to generate the SVG code for any of the official Office UI Fabric Icons library. You will then be able to use that SVG code as the Image property of an Image control in your application.
All details and important notes about how to use the component can be found here: OfficeUIFabricIconGenerator.
I hope you will enjoy this component and that you will find it usefull. If it does, please consider giving it a thumbs up.
Emmanuel (@R3dKap)
INSTALLATION instructions
- Download the ZIP file below
- Go to make.powerapps.com on your tenant
- Import the application
- Play the app, choose your icon, get the icon code and paste it in an image control in the app your are developing
- DO NOT IMPORT the component itself to the app your are developing as it holds thousands of icon SVG data!
Comments
-
Office UI Fabric Icon Generator
Found a solution to my own needs, I can use the PowerApp, find the icon and color it how I like. Copy the section of the code from <svg xmlns to </svg> and paste it here: https://www.svgviewer.dev/svg-to-png - I can then save as a PNG. I can also update the color code here without going back to the PowerApp. Works for my needs so thank you for all the hard work on this!
-
-
Office UI Fabric Icon Generator
Excellent solution. I just made a small modification to the component. The issue is that if the selected icon color is white, then it is kind of hard to see it. What I did was that if the color selected in text in txtIconColorOFI.Text is some form of white, then ctrRightPaneOFI.Fill is a darker color. For example:
If(txtIconColorOFI.Text = "#FFFFFFFF", ColorValue("#DEDEDEFF"),RGBA(0, 0, 0, 0))You can add multiple conditions depending if you use RGB, #rrggbbaa, or if caps are used or not.
I'm sure this can be improved, but it works for me for now.
I hope is helpful for someone else out there.
-
Office UI Fabric Icon Generator
@millsapril wrote:Wait, what?
Why would someone go to the trouble of selecting these only to not be able to publish them with your app?I'm not sure what you mean.
The purpose of this app is to quickly get the SVG vector image data of authentic Office UI Fabric icons to use in our projects. For example, the reason I found this project is because on SPFx listview command set projects, I have to use an image url or data uri to change the command bar icon, I couldn't use html or react components, and this app from R3dKap let me use a real Office UI Fabric icon by giving me a way to easily retrieve the SVG image data that I could then copy and convert to base64 to use in my project to maintain style continuity.
-
-
Office UI Fabric Icon Generator
@jaeiow yes I'm planing on adding this feature to the actual Office UI Fabric Icon Generator. I'm even considering adding to the app a small component called OfficeUIFabricIconsLibrary with a GetIconWithColor "function" to retreive an icon from the library and set its color dynamically... 😉
ETA: next coming weeks... 🙂
-
Office UI Fabric Icon Generator
Do you plan on making a way to build a component with an icon (or set of icons) and declare them with OnStart as part of the app, or should that be a more individual thing? I'm asking because I'm not sure how to make a component, but I can figure it out. Your post below mentioned it as a driver for a "v2".
*This post is locked for comments