levrik / mdi-react Goto Github PK

This is how HelpOutlineIcon looks in mdi-react before v7.5.0:

And this is how HelpOutlineIcon looks in mdi-react v7.5.0:

HelpOutlineIcon in mdi-react v7.5.0 looks exact like HandshakeOutlineIcon

Warning: Invalid DOM property 'class'. Did you mean 'className'?

Is there some possibility to replace class with className?

Here's the full log.

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Users\John Lamont\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'install',
1 verbose cli 'md-react' ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session 2ee9b2d8c5f225d9
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 http fetch GET 404 https://registry.npmjs.org/md-react 597ms
8 silly fetchPackageMetaData error for md-react@latest 404 Not Found: md-react@latest
9 timing stage:rollbackFailedOptional Completed in 1ms
10 timing stage:runTopLevelLifecycles Completed in 4078ms
11 verbose stack Error: 404 Not Found: md-react@latest
11 verbose stack at fetch.then.res (C:\Users\John Lamont\AppData\Roaming\npm\node_modules\npm\node_modules\pacote\lib\fetchers\registry\fetch.js:42:19)
11 verbose stack at tryCatcher (C:\Users\John Lamont\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\util.js:16:23)
11 verbose stack at Promise._settlePromiseFromHandler (C:\Users\John Lamont\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\promise.js:512:31)
11 verbose stack at Promise._settlePromise (C:\Users\John Lamont\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\promise.js:569:18)
11 verbose stack at Promise._settlePromise0 (C:\Users\John Lamont\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\promise.js:614:10)
11 verbose stack at Promise._settlePromises (C:\Users\John Lamont\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\promise.js:693:18)
11 verbose stack at Async._drainQueue (C:\Users\John Lamont\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\async.js:133:16)
11 verbose stack at Async._drainQueues (C:\Users\John Lamont\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\async.js:143:10)
11 verbose stack at Immediate.Async.drainQueues (C:\Users\John Lamont\AppData\Roaming\npm\node_modules\npm\node_modules\bluebird\js\release\async.js:17:14)
11 verbose stack at runCallback (timers.js:810:20)
11 verbose stack at tryOnImmediate (timers.js:768:5)
11 verbose stack at processImmediate [as _immediateCallback] (timers.js:745:5)
12 verbose cwd c:\Projects\react-travel\react-travel-ui
13 verbose Windows_NT 6.1.7601
14 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\John Lamont\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install" "md-react"
15 verbose node v8.11.2
16 verbose npm v6.1.0
17 error code E404
18 error 404 Not Found: md-react@latest
19 verbose exit [ 1, true ]

See #8

Edit: Solution is on its way: #9 (comment)

Hello, is there any property to use if you want the icon to change the color on mouseover?

Since we can forward props to the svg element (eg style), this should be reflected in the props type definition MdiReactIconProps.

To reproduce:

import CloseIcon from 'mdi-react/CloseIcon'

const MyComponent: React.FC<{}> = () => {
  return <CloseIcon style={{marginLeft: 5}} />
}

This raises a type-script error

error TS2322: Type '{ style: { marginLeft: number; }; }' is not assignable to type 'IntrinsicAttributes & MdiReactIconProps & { children?: ReactNode; }'.
  Property 'style' does not exist on type 'IntrinsicAttributes & MdiReactIconProps & { children?: ReactNode; }'.

Is it possible to set "title" attribute on icon to show tooltip. Is there a list of attributes an icon component supports?

Hi,

Thank your for the library!

One question... how can I set the size ?

@mdi is currently at 4.3.95, while the used version is 3.7.95. Can you bump it? I'm missing some icons in this package.

I've tried running dts-gen to resolve cannot find module mdi-react and just declare module "mdi-react'"; neither of which works. dts-gen says it couldn't load module "mdi-react"

Thank you for your help...

I am trying to use

import HomeIcon from 'mdi-react/HomeIcon';

<HomeIcon size="21px" />

in dev it is working fine but when i am trying to make production build it throws

ERROR in ./app/ui-components/ResponsiveHeader/index.js 8:19
Module parse failed: Unexpected keyword 'var' (8:19)
You may need an appropriate loader to handle this file type.
| import './styles.scss';
| import logo from 'images/logo.svg';
> import HomeIcon, { var _ref =
| /*#__PURE__*/
| _jsx(ResponsiveHeader, {
 @ ./app/ui-containers/StyleGuide.js 13:0-62 36:29-45
 @ ./app/config/routeConfig.js
 @ ./app/containers/App/index.js
 @ ./app/app.js
 @ multi ./node_modules/react-app-polyfill/ie11.js ./app/app.js

Awesome project, adding this to the list of projects I'll try to track after each release.

Might be a good idea to use mdi-svg as dependency instead of as a folder like some of the other libraries do (ember for instance I think does this).

When upgrading to latest version I've got this errors.
When I remove mdi icons from component it goes away.

From 4.4.0 -> 5.4.0

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

const MyComponent = () => {
  return (
    <AlertIcon />
    <AlertCircleIcon className="some-class" />
  );
};

should be

const MyComponent = () => {
  return (
    <div>
       <AlertIcon />
       <AlertCircleIcon className="some-class" />
    </div>
  );
};

Add .js.flow files for every Icon with the flow type

There's been many MDI updates since the last package release. Could you update the version used in the package to the latest?

Please see this error here:
https://bundlephobia.com/result?p=mdi-react

"We could not guess a valid entry point for this package. Perhaps the author hasn't specified one in its package.json?"

Could you please add this property? Thanks in advance!

Add a generic Icon component that takes a prop called icon which allows us to dynamically change the icon based on a string.

Have you considered adding React.memo to the icons to prevent unneccesary re-renders? As of right now react devtools always show icons re-rendering even though the dom does not change.

when using ImageIcon I am expecting to see

But instead I get:

I've cloned the repository and run npm run build and it does seem to create the correct SVG for ImageIcon so I think the published package is somehow out of date.

Could this be published to get a correct icon? Thanks!

As explained in this comment, title is not a valid svg attribute and will then not display a tooltip on icon hover. Setting title prop should instead add a <title> child element as follow:

<Icon title="my title" />

resulting in:

<svg>
    <title>{title}</title>
</svg>

Icon AccountCardDetailsOutline is missing from the last release even though it was added to MDI on Feb 14th.

Hi every guys
when I use this library and import icon and use in my render method, I faced with this error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Can anyone help me to fix this?
Thank you.

Hey, is there any specific reason we dont export all icons from an index.js-file?

I've created a fork which exports the icons using the export {default as Icon} from './Icon'-syntax. A great benefit from this would be easier import-syntax. Additionally, it enables bundlephobia analysis of this package (see https://bundlephobia.com/result?p=mdi-react).

Please see my pull-request:
#54

es module built make tree-shaking available in build tools like webpack/rollup

It's painstaking to determine what's changed since the version you're currently using. It also includes tons of unreleased changes. An overview of what's changed between minor and major versions is extremely important in my view. We can't upgrade because we don't have time to figure out what's changed.

Hi, just updated to the shiny new version, but some things are not right now:

Templarian/MaterialDesign#4901

For example all codepoints have been changed and some icons for example "TextBoxIcon" now produce the wrong icon according to

http://materialdesignicons.com/cdn/5.0.45/

I would like to be able to pass in spin, rotate and flip and it automatically have the appropriate styling. Basically adding the functionality of the helper css classes at the bottom of this page: https://cdn.materialdesignicons.com/2.3.54/

<CarIcon spin={true} />

<CarIcon flip="h" />
<CarIcon flip="v" />

<CarIcon rotate={45} />
<CarIcon rotate={180} />

I can get lots of the other Delete icons, but not the outline one. There are also lots of other xOutline icons.

Must have been forgotten?

Hi,

I can see that the package contains a js file for each Icon with a default export, which seems very clear.

Is it feasible to add an exports field to package.json to resolve entry points for each .js file?

Hello :)

I am using Webpack 4, and:

import { VolumeHighIcon, VolumeMediumIcon, VolumeLowIcon, VolumeOffIcon } from 'mdi-react';

is significantly slower (around 20 seconds?)

than importing icons that way:

import VolumeHighIcon from 'mdi-react/VolumeHighIcon';
import VolumeMediumIcon from 'mdi-react/VolumeMediumIcon';
import VolumeLowIcon from 'mdi-react/VolumeLowIcon';
import VolumeOffIcon from 'mdi-react/VolumeOffIcon';

The Webpack hint is:

 92% after chunk asset optimization SourceMapDevToolPlugin bundle.js generate SourceMap

Hey! I love your library!

It would be amazing if other than mdi-react and mdi-preact there was a third option, mdi-react-native. The differences would be tiny:

• do not apply default className
• replace svg and path with import Svg, { Path } from 'react-native-svg'
• I'm not 100% sure right now but I think fill needs to be applied on Path instead of Svg

I'd love to send a PR but I'm not a TypeScript person so I gave up after trying to fix the typings (sorry!)

Would you be interested in adding this and releasing it as your own library or would you rather not maintain any extra baggage and I should just fork? :)

I think it would improve developer experience if there was an index file where each icon was exported, as opposed to all default exports.

At least for VSCode, I can start typing ServerNe..., then VSCode will suggest the icon, then I hit enter and it automatically adds the import statement. This doesn't work unfortunately with default exports.

Would you accept a PR that generates an index file that exports each icon?

Wouldn't it make more sense if the default color was 'CurrentColor' instead of black? That way it just defaults to the text color unless you pass a specific color.

I think the '360' icon doesn't have corresponding component.

How do I change the color of each icon?

See #16

Seems like these two issues would be much more simply addressed if this package just utilized an icon-font, that way text CSS props would just be inherited?
#11
#10

Following this question on StackOverflow, I found an error that should be fixed. The line here should change from :

<svg {...props} className={className} width={size} height={size} fill={color} viewBox="0 0 24 24">

to

<svg {...props} className={className} width={size} height={size} fill={color} viewBox="0 0 24 24" style={{ minWidth: size }}>

Perhaps even add maxWidth: size to prevent oversizing as well.

Some icons, such as weather-cloudy-clock, are not available with this library. Maybe the library is outdated?

Adding the following classes does not reflect any change in the icons

<PlusCircleOutlineIcon className="mdi-rotate-45" size={16} />
<PlusCircleOutlineIcon className="mdi-spin" size={16} />

It should work as shown at the end of this page

With "module": "node16" and "nodenext", TypeScript supports the CJS/ESM resolution of Node.JS. Unfortunately, this means that some CJS packages will not work in this mode because they use default exports. See microsoft/TypeScript#49271 (comment).

This can be fixed if all export default were changed to export =. I see that they are generated in scripts/generate-react.js and scripts/generate-preact.js. I will send a PR fixing this.