iconify / icon-sets

150+ open source icon sets. Icons are validated, cleaned up, optimised, ready to render as SVG. Updated automatically 3 times a week.
https://icon-sets.iconify.design/
591 stars 56 forks source link

Add Fluent UI MDL2 icons from @fluentui/react-icons-mdl2 #61

Closed gburning closed 1 year ago

gburning commented 1 year ago

The icons are currently defined directly in the JSX of the components (example component), locking them into use with React (I have opened an issue with them about this). However, as they are licensed under MIT and similarily formatted it should prove trivial to extract the actual SVG files (simply running a search using <svg(.|\n)*<\/svg> in VSCode on the relevant directory yields the necessary results for me).

If you wish I could perhaps provide a pull request for this.

cyberalien commented 1 year ago

I'll test it.

While it probably is possible to import from .tsx files, it would be much easier to do that with SVG. Those icons are generated from something, but I can't find any sources for it. Can you check if you have better luck?

I also have questions about maintenance of that icon set. Looks like it was created about 2 years ago, since then the only change was to add focusable attribute to icons. Is it maintained?

cyberalien commented 1 year ago

Checked NPM package to see if it would be possible to use it to keep icon set up to date. Unfortunately it isn't usable.

  1. Even though it seems like it is updated often, those updates don't actually change any icons, mostly just version number.
  2. In NPM package .tsx files are compiled to .js and look like this, making them unusable:
    import * as React from 'react';
    import createSvgIcon from '../utils/createSvgIcon';
    const AcceptIcon = createSvgIcon({
    svg: ({ classes }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 2048 2048", className: classes.svg, focusable: "false" },
        React.createElement("path", { d: "M640 1755L19 1133l90-90 531 530L1939 275l90 90L640 1755z" }))),
    displayName: 'AcceptIcon',
    });
    export default AcceptIcon;
    //# sourceMappingURL=AcceptIcon.js.map

So unfortunately massive GitHub repo is the only somewhat usable source.

gburning commented 1 year ago

I see, is there a tool that you use to automatically pull updates in some way?

I might be able to fork it and provide a repository that would be manually updated. Of course, that would require maintenance and wouldn't be a direct source. Is that a no-go for Iconify?

cyberalien commented 1 year ago

Added. It will appear tomorrow after icon sets update.

Looking at icons, it looks like it is an old version of Fluent UI, new version of it is available here https://icon-sets.iconify.design/fluent/ (and source is here: https://github.com/microsoft/fluentui-system-icons ). New version is much better designed, with proper padding around icons that improves visual dimensions, so I recommend using new icons over old icon set.

gburning commented 1 year ago

Sorry, I’m confused. Where was it added?

Those are for other applications I’m afraid and not in use across the board for Microsoft’s various products. I’m building an Azure DevOps extension which still uses the MDL2 set. As far as I know there are no plans to use the system icons there instead.

cyberalien commented 1 year ago

It will appear tomorrow after icon sets update.

It was added to icon sets update script, which updates all icon sets automatically 3 times a week. Next run is scheduled for tomorrow.

cyberalien commented 1 year ago

https://icon-sets.iconify.design/fluent-mdl2/

gburning commented 1 year ago

Thank you! I really appreciate it :)