React-native-vector-icons: Cheatsheet for icons?

[frankandrobot]

For material design, I tried using http://zavoloklom.github.io/material-design-iconic-font/cheatsheet.html. However, not all icons listed are included (ex: caret-up).

Are there working cheatsheets for the icons?
Alternatively, is there a quick way to preview them?

[nertilzhuri]

Here you have the material design icons (with previews): https://design.google.com/icons/

Note: In using react-native-vector-icons the spaces are substituted with -
For instance if the icon name is 'alarm on', in react-native you will use it as 'alarm-on'

[ghost]

@frankandrobot here's your cheatsheet: https://github.com/oblador/react-native-vector-icons#iconexplorer. I believe this can be closed.

[quadsurf]

not so fast @jhabdas .. when i do a $ npm install --save react-native-vector-icons, it's subdir Examples/IconExplorer is not even added to my node_modules folder, as should be expected, so it's not that simple.

and since that didn't work, next test would be to follow the readme instructions for IconExplorer... unfortunately, there's only 1 instruction:
$ npm install [email protected]
lol, then what? did the readme designer think the next step was totally obvious? lol

further more, from the looks of things, would i have to swap in and out of 2 different apps (the one i'm building, and the IconExplorer app), every time I need a "cheatsheet" icon reference? cuz if so, that would be a productivity killer.

would be nice if things were a little more explained for those new to coding, like step-by-step instructions, especially since following the regular instructions yields a red-screen: MaterialIcons undefined... I had spent all sorts of time figuring out that all that was needed, was to restart the server and run a new build, not obvious by any stretch of the imagination. i wish senior devs would stop assuming that everything is totally obvious.

so i agree with @frankandrobot ... would be nice if there was "a quick way to preview them" ... cuz so far, IconExplorer ain't one of them!

[ghost]

@quadsurf It's ultimately up to the maintainer and the issue creator as to whether this is closed. A simple +1 emoji on @frankandrobot's original comment is a strong enough signal to send to the maintainer et. al others are interested. When it comes to open source software leaving issues open will cause FUD and hurt otherwise glorious projects, like this one. And we're extremely fortunate as a community to have an icon explorer. Cheers.

[quadsurf]

thank you @jhabdas point taken :-)

[saada]

Unfortunately, there are no installation instructions for the IconExplorer. Maybe I'm missing something @jhabdas ... but... installing a completely separate project just to explore the available icons and their names without any instructions doesn't make this project "glorious".

So far I've tried

cd Examples/IconExplorer
npm install
npm start

No idea how to start this IconExplorer.
It would be amazing to have something like this: http://fontawesome.io/icons/
Or at least the prefixes for each icon suite

I found this: https://github.com/oblador/react-native-vector-icons/blob/master/Ionicons.js
infinitely more helpful than the IconExplorer that has no instructions.

[nertilzhuri]

@saada Have you tried also running the project? I mean:

react-native run-ios
or
react-native run-android

Moreover you can always use pages like http://fontawesome.io/icons/ or https://design.google.com/icons/ or any other official icons website which is supported by this package, and you can find these pages here: https://github.com/oblador/react-native-vector-icons#bundled-icon-sets.

Correct me if I am wrong, you can get the name of the icon from the pages, and substitute the spaces with - (ie. mode comment icon from material design will be used as mode-comment in react native).

There are many ways in exploring the icons besides the IconExplorer project and I don't see why not having a dedicated page for exploring all the icons supported by this package (which are listed on their own respective web pages) makes this a bad project. Personally I think this is one of the best packages that I have ever used in React-Native.

[saada]

@nertilzhuri

When I run

react-native run-ios

I get

** BUILD FAILED **


The following build commands failed:
        CompileC /Users/saada/react-native-vector-icons/Examples/IconExplorer/iOS/build/Build/Intermediates/RCTWebSocket.build/Debug-iphonesimulator/RCTWebSocket.build/Objects-normal/x86_64/RCTSRWebSocket.o RCTSRWebSocket.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)
Installing build/Build/Products/Debug-iphonesimulator/IconExplorer.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/IconExplorer.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist

[nertilzhuri]

I see, I have the same problem now. Can you open a new issue directed to this problem so the package developers can look into it?

[oblador]

The exponent guys made a website for this purpose, and hopefully they will make a PR for it to be maintained here in the future. For now see https://exponentjs.github.io/vector-icons/

[tfrasc]

I know this issue is old and closed, but there's a great cheatsheet here now:
https://oblador.github.io/react-native-vector-icons/