fluentui-system-icons
fluentui-system-icons copied to clipboard
microsoft
Are we going to see a good web interface?
Hey, it's a great work. Are we going to see a web interface where people can find the icons they need, instead of getting them all. It would be alot more helpful and easy to manage, and are you also planning for web fonts?
Since I've got some spare time, I think I can launch a website like materialdesignicons.com.
Thanks! For now if you are looking to search for an icon on a web browser, you can try doing so in the icons.md readme file. A website for showcasing the icons like our Android and Mac demo apps is something we are considering but don't have more to share currently.
Regarding to avoid getting all the icons, if you are consuming the mobile libraries in your projects, consider enabling shrink resources for Android and running the exclusion script for iOS, they will help preventing unused icons being bundled into the app.
Thanks, will look into it, this is amazing work. Hatts off to the team.
I made this a wee back when the icon set first got released on figma, a quick web interface to search through icons (based on the VSCode Codicon repo 🙈) (nb. can't download individual icons via web portal)
Repo: @wayne-shih / MSFT-FluentSystemIcons Web portal: https://wayne-shih.github.io/MSFT-FluentSystemIcons
We're using Fluent icons as part of a NZ based MS Programme, a few of us on the design/dev team didn't have iconjar (which we use to sort and browse icons), this was a quick and easy alternative for them to hunt through the icon set and the name referenced instead of digging through the master folder.
Search function is rather limited, as it only looks at the file name.
ps. this was based on the v1.0.1 release and some file names have since been renamed
pss. the file name had to be modified to get it working (all spaces removed)
I made this a wee back when the icon set first got released on figma, a quick web interface to search through icons (based on the VSCode Codicon repo 🙈) (nb. can't download individual icons via web portal)
Repo: @wayne-shih / MSFT-FluentSystemIcons Web portal: https://wayne-shih.github.io/MSFT-FluentSystemIcons
We're using Fluent icons as part of a NZ based MS Programme, a few of us on the design/dev team didn't have iconjar (which we use to sort and browse icons), this was a quick and easy alternative for them to hunt through the icon set and the name referenced instead of digging through the master folder.
Search function is rather limited, as it only looks at the file name.
ps. this was based on the
v1.0.1release and some file names have since been renamed pss. the file name had to be modified to get it working (all spaces removed)
Oh Okay so are we going to see any further updates?
Oh Okay so are we going to see any further updates?
Potentially... it’s not currently on any roadmap but keen to get it back up and running on the side
I’ve currently got it setup so the figma file is the source of truth but looks like that haven’t been updated since it was first released. I would have to look into making this repo (/packages) as the source of truth for update
But feel free to play around with the current codes and make suggestions if you want it done faster
Oh Okay so are we going to see any further updates?
Potentially... it’s not currently on any roadmap but keen to get it back up and running on the side
I’ve currently got it setup so the figma file is the source of truth but looks like that haven’t been updated since it was first released. I would have to look into making this repo (/packages) as the source of truth for update
But feel free to play around with the current codes and make suggestions if you want it done faster
The thing that I want to mention is that there is no way shown how to use the application you provide when we click on the Icon we want the name of the icon is copied instead what we can do is open a new page with a bit of description and variations of the icons it would be more helpful and user friendly.
I would suggest using the flutter example project inside the repo as the website. It is very easy to automate with github actions and github pages.
WEBSITE: https://jamesblasco.github.io/fluentui-system-icons/ BRANCH: https://github.com/jamesblasco/fluentui-system-icons/tree/web
@jamesblasco There are some issues with that web interfaces. Some of the icon names shown in the tooltip when hovered are truncated. Some icons like the Activity icon cannot be displayed properly (see below picture). Seems like some icons are present in the JSON and CSS files but not present in font files(?)
If we were to make a more robust web interface for finding icons, would it be appropriate to assign alternative names or extra search terms to each icon? For example, Font Awesome provides these search terms for their Alert icon: - date - late - reminder - sleep - snooze - timer - timestamp - watch
The lack of a scrollbar and a janky scrolling issues are probably due to the limitations of Flutter Web :(
The problem with the icons not displaying it is not a problem with the website itself, and more than those icons are not available on the official Flutter package. Maybe they are not in the font file or the reference is wrong.
We can change the tooltips for something different and the scrollbars can be added easily, I just forgotten about it.
The tags is a great idea, but it would be useful if they are added to the official repository itself. The packages are generated automatically and I would expect this website to do the same.
Related (duplicate?) issue: https://github.com/microsoft/fluentui-system-icons/issues/194#issuecomment-801879278
I always love to check https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font when I'm searching for an icon. Is that what you mean in this request, @mubeenpatel99 ?
I always love to check https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font when I'm searching for an icon. Is that what you mean in this request, @mubeenpatel99 ?
No I was talking a web interface that is provided in fontawsome, it becomes easy to navigate @Jay-o-Way
