ponciusz / icomoon-react Goto Github PK

When I set color with props, icon's color not changing. If I preview element from inspect, the element has just color prop in the styles. I tried to add style prop to component.

<IcoMoon iconSet={iconSet} icon="home" style={{ fill:"blue" }} />

But in this case default coler overriding my color.

Would it be possible to update react to latest 17 version?

Dear @ponciusz, we noticed that you are not allowing className is passed as an attribute in your component.
It would be useful that we can apply such modification to your code.
As an advantage, we would be able to use it with styled-components.
Thanks in advance,
Pablo.

In READM there is:

use selection.json generated from http://icomoon.io/app

This is inaccurate, because there are several ways to obtain a proper json file. The most obvious one - simply downloading full icon set is incorrect since file data structure is invalid.

If user needs to use svg icon she/he has to select proper icons, go to SVG section, download SVG and unzip it - inside there's a proper selection.json file.

Hi, i would say you did nice work with this library
but there is a little problem with multicolor icons

if i have an icon with attrs (also 4 paths defined in json)

"attrs": [
    { "fill": "rgb(82, 184, 91)" },
    { "fill": "rgb(225, 131, 39)" },
    { "fill": "rgb(213, 33, 39)" },
    { "fill": "rgb(29, 84, 112)" }
]

fix me when I am wrong, but those colors are ignored. I found something like currentIcon.icon.paths.join(' '). maybe its better to split those paths and css should be able to set fill color for each properly

maybe i will take a look on that in next few days, but if someone want it would be nice to have support for "multicolors"

I'd like to add margins to an icon to position it using inline styles, however when I pass a style prop, it doesn't seem to get forwarded to the underlying svg element, and the style is ignored

I encounter this issue, when I successfully define the width to 48 but the height still static at 1024.
How do you override the height on viewBox?

Please add CHANGELOG.md and maintain it, or use https://github.com/ponciusz/icomoon-react/releases.

This makes it easier for us developers to figure out what they can expect to get when upgrading and using your package.

I'm using 2.x and see there's 3.x available, but I have no overview of what's changed and why it's a new major version.

Thanks a lot!

Using icomoon-react in a project means installing coveralls, enzyme, typescript, etc. for no good reason.

Also, when using @hot-loader/react-dom through Yarn name resolution, this will still install the original react-dom in ./node_modules/icomoon-react/node_modules/ in addition to @hot-loader/react-dom in ./node_modules/. Declaring React as a peer dependency would fix that, as anyone using icomoon-react would have React in their own dependencies as well.

Hi Ponciusz, how are you?

First of all, I would like to say that you made a great job creating this library! I have my own Icomoon component in some of my projects but yours seems more complete and carefully done. I would love to use it on my projects.

One thing that bothers me a little bit is the fact that you must to create a wrapper for the Icomoon component even that you want to use the default IconSet. It would be great to include the default IconSet (selection.json) as a default prop. Of course that if you want another icon set, you can not run from creating a wrapper.

Please check my pull request to see if you agree that a default IconSet is suitable for the Icomoon component.

Hello,

I would like to set "1em" as the default size for my icons but I get an error because of the prop type:

Warning: Failed prop type: Invalid prop size of type string supplied to Icon, expected number.

Because of this line in IcomoonReact.js

Would it be possible to take into account this use case of the prop ?

Hey,

I just created a selection.json from icomoon.

Did the setup but got the error

TypeError: Cannot read property 'name' of undefined

Call Stack
find
file:///src/IcomoonReact/IcomoonReact.js (26:61)
Array.find
<anonymous>
getSvg
file:////src/IcomoonReact/IcomoonReact.js (27:37)

The element from icons key looks like:

    {
      "paths": [
        "...
      ],
      "grid": 0,
      "tags": [
        "OutlinedAvatar"
      ]
    },

This is the line with error:

var find = function (iconEl) { return iconEl.properties.name.split(", ").includes(icon); };

Looks like properties is null. The icons element doesn't have it. Is it a breaking change on icomoon selection.json?

This is my code

import IcomoonReact from 'icomoon-react';
import iconSet from './icomoon.json';

export default props => <IcomoonReact iconSet={iconSet} {...props} />;

Hi @ponciusz,

It would be very useful to embed the selection.json file from CDN.
I found this package but I'm not sure to use it.
https://www.npmjs.com/package/import-cdn-js

What do you think?

Hey,

I have an issue with other props not being passed down to the element. For example: data-test

<IcomoonReact
      {...props}
      className={className}
      iconSet={iconSet}
      size={size}
      color={color}
      icon={icon}
      data-test="test"
    />

I think this would be useful. I was trying onClick too did not work for the same reason.

Hi,
Currently when building the project it includes the entire icons.json.
Any idea if is possible to include just the used icons?