Include *all* RemixIcons

[coreyward]

Some are not postfixed with either “line” or “fill” (e.g. those inside of Editor).

[aogaili]

Release in version 3.0.

I think all the icons are there now https://icons.meronex.com/icons?name=ri

Cheers

[coreyward]

Thanks! FYI I just updated Material Design icons to a separate repo that has more recent additions as well as the outline, rounded, and two-tone versions. Might make sense for us to combine efforts if you're also interested in maintaining.

[aogaili]

Thanks! FYI I just updated Material Design icons to a separate repo that has more recent additions as well as the outline, rounded, and two-tone versions. Might make sense for us to combine efforts if you're also interested in maintaining.

Yes, I agree.

It is indeed good idea to combine efforts instead of duplicating it. And yes I will be maintaining this long term as per the Roadmap. I am not sure when react-icons will gain momentum again, and this repo is now many commits a head. It is unfortunate that we had to fork it, but this is open source, we have to move on and we were blocked.

Which repo did you switch MD to? Want to open another issue/PR for this?

[aogaili]

Ah I see the library

https://github.com/coreyward/react-icons/commit/2c229e19c0dc75cbd584463ab5b217df4e332049

I checked it out and I think it is more inclusive than the one we currently have so will swap it on this fork as well.

👍

[aogaili]

@coreyward I tried to add as per your code but some icons appear broken for example MdImportContacts (and many others).

I'm not sure if you are also seeing 🤷‍♂️ also I think we need to sort this list alphabetically it was hard to navigate in the preview.

I'll hold on adding this, and better open another issue if you still want to merge the work.

[coreyward]

Ah yeah looks like you have it singular when Material Design has it pluralized. Check the list here: https://github.com/Dreomite/Material-Icons-Complete/tree/master/glyphs/baseline

[aogaili]

But I used the formatting you used so we should have the same result https://github.com/coreyward/react-icons/blob/2c229e19c0dc75cbd584463ab5b217df4e332049/packages/react-icons/src/icons/index.js#L42

[coreyward]

If you import MdImportContacts and console.log it what do you get? I'm not at the computer to try it myself.

Is it possible that Material has renamed some icons and your web tool is maybe just using cached/stale names?

[aogaili]

Perhaps, although I am sure that I cleared the cached.

So in your case they all render? Do you have a preview site somewhere? So I can compare the rendered outputs.

No rush on this.

[coreyward]

If you check the source of the package it looks like MdImportContacts is present:

module.exports.MdImportContacts = function (props) {
  return GenIcon({"tag":"svg","attr":{"xmlns:ns1":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24"},"child":[{"tag":"defs","attr":{},"child":[{"tag":"path","attr":{"d":"M0 0h24v24H0V0z","id":"a"}}]},{"tag":"clipPath","attr":{"id":"b"},"child":[{"tag":"use","attr":{"overflow":"visible","ns1:href":"#a"}}]},{"tag":"path","attr":{"clipPath":"url(#b)","d":"M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1zm0 13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z"}}]})(props);
};

I don't have a preview website—really just forked to fold in updates I needed for a client project. I am able to import the icon and it renders out an svg element, but nothing is visible—between a lack of a stroke or fill and an odd clip-path I think there may be something wrong with the source.

<svg stroke="currentColor" fill="currentColor" stroke-width="0" xmlns:ns1="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" class="sanity-studio__preview-fallback-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path d="M0 0h24v24H0V0z" id="a"></path>
  </defs>
  <clipPath id="b">
    <use overflow="visible" ns1:href="#a"></use>
  </clipPath>
  <path clip-path="url(#b)" d="M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1zm0 13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z"></path>
</svg>

Oh, you know what, it looks like this has been run through SVGO resulting in alphabetical IDs that collide with other elements on the same page when more than 1 icon is used. Not sure if that's the cause of the rendering issue or not.