ajwann / svg-loaders-react Goto Github PK

Hello,

Thanks for creating this library!

I've tried all sorts of ways to re-size the svg, fontSize, width, height. Nothing seems to work. When I go here: https://samherbert.net/svg-loaders/

I can change the width directly on the "rings" svg and it just works. I'm trying to understand what this react layer is doing and why the size can't be controlled as easily. Any suggestions?

Thanks

The components aren't complex, so basic specs that test rendering are probably all that is needed.

https://www.npmjs.com/package/svg-loaders-react states latest publish was 2 months ago,

Latest PR ( which includes default classNames PR) was 4 days ago.

npm install results in a version without default classNames, npm update fails to detect a new minor release.

is this due to a missing bump of the package version in the package.json ?

should the test stage check for a change in the package.json version to ensure this won't happen again?

None of these components need to be class components, and all of them can be converted to functional components.

The CI server is passing, but each spec is logging a warning about an invalid prop type. This appears to be a problem with the test suite set-up, and not a poroblem with the actual
props being passed.

The error is

Warning: Failed prop type: Invalid prop `svg` of type `object` supplied to `SVGInline`, expected `string`.
          in SVGInline

Based on this issue from enzyme
it looks like the issue can be fixed by adding the following moduleNameMapper to the
jest.config.js file:

moduleNameMapper: { 
  '\\.svg$': '<rootDir>/assets/mocks/svgMock.js', 
} 

Before version 1.0 a few things need to happen:

• basic specs
• conversion of class components to functional components
• CI server setup on Travis CI or equivalent

Each component no longer wraps an SVGInline component. Thanks to @pandasa123 , each component renders a regular <svg> tag.

That means that each component should be able to accept any/all SVG tag presentation attributes as props.

The section covering SVGInline options in the readme should be replaced with a section that covers and links to the available presentation attributes on MDN.

It would also be really nice to have a "Usage Examples" section that shows users how to make the most common configuration changes to a component, like changing the color, width or height, etc.

Once the readme is updated to show the new API changes, we can release version 2.0.0 (since these are technically breaking API changes).

It would be pretty sweet if all the components would come with a default className, this would allow us to handle svg customization from css on a global level instead of having to repeat the className everytime the spinner is used or the fill...

Adding eslint and the linting package from a major React shop would be great.
Here are some example of eslint configuration packages for AirBnB and Facebook. But I'm open to adopting any major React shops eslint rules.