https://github.com/wmira/react-icons-kit#installation

Version 4.0.0 was released at the end of August and it has icons that the current 3.0.1 is missing. I was trying to find calendar_today, for example, but it doesn't exist in 3.0.1.

http://ionicons.com/

Is this package optimized so that if 1 have 1 icon from 1 pack, it doesn't load all packs, or all icons in a pack? Thanks!

The problem at the moment with having a single version is that if we decided to upgrade an icon-set and that icon changes for some reason, the current icon being used by a user changes as well. So now people migrating to 2.x for example would be seeing a very different material design icons. We should separate the build to core, icon-packages such that it is possible to upgrade the core but leave the version for the given icon set unchanged if needed.

Hi, just a new feature request.
Is it possible to upgrade to IonIcons v3?
Hope so, Cheers!

I noticed some icons have duplicate SVG paths.

For example, the ionicons flag SVG is this:

<svg fill="currentColor" height="32" width="32" viewBox="0 0 512 512" style="display: inline-block; vertical-align: middle;"><g><path d="M426.4,182.5c-35.8,5.9-94.2,7.5-133-66.1c-41.6-79.1-108.8-81.5-148.1-74.3c-19.1,3.5-33.4,19.5-33.4,35v196.6
		c11.3,4.3,23.4-0.2,26.5-0.8c0.8-0.2,1.5-0.3,2.4-0.5c25-5.5,51.4-8.1,116.8,23.3c82,39.3,153.8-33.1,181.6-83.5
		c2-3.5,8.7-20.2,8.7-36.2C438.2,180,426.4,182.5,426.4,182.5z"><path d="M426.4,182.5c-35.8,5.9-94.2,7.5-133-66.1c-41.6-79.1-108.8-81.5-148.1-74.3c-19.1,3.5-33.4,19.5-33.4,35v196.6
		c11.3,4.3,23.4-0.2,26.5-0.8c0.8-0.2,1.5-0.3,2.4-0.5c25-5.5,51.4-8.1,116.8,23.3c82,39.3,153.8-33.1,181.6-83.5
		c2-3.5,8.7-20.2,8.7-36.2C438.2,180,426.4,182.5,426.4,182.5z"></path></path><path d="M88,32H72c-4.4,0-8,3.6-8,8v432c0,4.4,3.6,8,8,8h16c4.4,0,8-3.6,8-8V40C96,35.6,92.4,32,88,32z"><path d="M88,32H72c-4.4,0-8,3.6-8,8v432c0,4.4,3.6,8,8,8h16c4.4,0,8-3.6,8-8V40C96,35.6,92.4,32,88,32z"></path></path></g></svg>

Notice the circled children paths are the same, it seems like react-icon-kits is doubling up on the paths

SvgIcon uses wrong React prop. Instead of stroke-width, stroke-linecap, stroke-linejoin, should be used strokeWidth, strokeLinecap, strokeLinejoin.

use import('').then to reduce size of main bundle

Some icons are missing. For example: https://material.io/tools/icons/?icon=fastfood&style=baseline

Probably library needs update for google material icons.

I think you need to add redirection rules for the URLs used in react-icons-kit website because the refreshing of any page giving 404
http://wmira.github.io/react-icons-kit/guide

A team member switched us to this library from material-design-icons, but it messed up a bunch of our styling. After perusing the source code, I have a suggestion: remove the style attributes used in Icon and SvgIcon and instead use a CSS class (perhaps className="react-icons-kit") with some CSS to apply the inline-block and vertical-align rules. My reasoning is that this will make it easier to style the icons and override your defaults without having to add a className and style to every Icon component.

I recently upgraded to the latest version and now I get this warning in my console.

Failed prop type: Icon: prop type `size` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.

This is my code.

import { withBaseIcon } from 'react-icons-kit'
.
.
.
const SidebarIcon = withBaseIcon({ size: 16 })

<a className="app-sidebar__list-link">
    <SidebarIcon className="app-sidebar__link-icon" icon={props.icon} /> 
    <span className="app-sidebar__link-text">{props.title}</span>
</a>

Hi, I'm using one/two icons from feather, typicons, fa, icomoon, md, ikons.

However, doing so results in my bundle.js becoming extremely big, adding it 6 mB

I'm using create-react-app no build, and when I analyze the source with source-map-explorer, I see that the libraries in react-icons-kit take up lots of space for example:
1.5 mB for ikons,
1 mB for ionicons,
0.7 mB for linea,
and so on, summing up to 6 mB.

Is that expected?
What can I do to load only the used icons, in order to reduce the bundle size?

Thanks.

I updated the main README with the notes:
v2.0.0

@kamikazebr export withBaseIcon - PR #75
@lyleunderwood Don't discard fill=none - PR #73
@lyleunderwood Update Material Design Icons to 4.0.0 - PR #60
@vahissan Allow IconProp type definition to allow all HTML attributes. PR#58
@gottschalkironhack - Same material v4 update

Thanks @kamikazebr @lyleunderwood @vahissan @gottschalkironhack
Appreciate the PR.

Some icons like ic_calendar_today and ic_menu_book are missing in Material Design section. I get the error Cannot resolve symbol 'ic_menu_book'

     @ ./~/react-icons-kit/SvgIcon.js 18:17-38
     @ ./~/react-icons-kit/Icon.js
     @ ./~/react-icons-kit/index.js

camel-case is defined as a devDependency.

Hey!

I have the following component rendering in a loop:

<ListItem isBeta={menuItem.isBeta} key={menuItem.id} title={menuItem.title} id={menuItem.id} icon={menuItem.icon} />

the menuItem.icon is returned by an API.

Let's assume that props.icon = "home"

Then, in the definition of ListItem component i have the following:

.
.
import { home } from 'react-icons-kit/fa/home'; 
return (  
        <li key={props.id} className={isBetaClass}>
            <Icon icon={props.icon} />
            {props.title}
        </li>
    );

but this is not working, i can't render the ion based on a received props. Any idea how to do this?

thanks!

At the moment the only way to use and provide dead code elimination and tree shaking is via including the dependency via the bundler. Most of the time node_modules is excluded.

Provide a way to have an es6 folder and make use of jsnext:main. We should be able to have the icons under the specific dir e.g. icomoon/home.js which would have imports be in the current format

import { home } from 'react-reacticons/icomoon/home';

a bundle would then be just using the code it needs.

Feather Icons are not displayed anymore

I'm trying to build a font picker which lists multiple svg icons. Is it possible to get all the icon names from a library as an array or object?

current:

import Icon from 'react-icons-kit';
import { drop } from 'react-icons-kit/ikons/drop';       

<Icon icon={drop} />

suggested:

import DropIcon from 'react-icons-kit/ikons/drop';       

<DropIcon />

Essentially remove the export const iconName = and use export default that has Icon built in.

I am not sure why you used display:inline-flex but it doesn't make Icons align well if I used inside other element, for example in the below screenshots, it is placed inside h1 and you can see the default alignment. it's a bit upward

Instead if you have used display:inline-block it would fit very well

So I have to change it every time display:inline-block.

It would be awesome if this package could include FeatherIcons.

Is that possible?

https://github.com/stephenhutchings/typicons.font

At the moment we need to do import one at a time to prevent a whole import of the icon tree. We should export an es6 version to have it easier to use if users are using bundlers like webpack 2 that supports tree shaking

target:

import { someIcon1, someIcon 2} from 'react-icons-kit/es6/md'

The above works like

import { someIcon1 } from 'react-icons-kit/md/someIcon'
import { someIcon2 } from 'react-icons-kit/md/someIcon'

How to get Icons dynamically?
`....
import { Icon } from 'react-icons-kit'
import {facebook} from 'react-icons-kit/feather/facebook';
import {instagram} from 'react-icons-kit/feather/instagram';
import {twitter} from 'react-icons-kit/feather/twitter';
....

// dynamic array from redux store
"sociallinks": [
{
"_id": 1,
"type": "facebook",
"linkname": "Facebook",
"link": "https://www.facebook.com/zzzzz/"
},
{
"_id": 2,
"type": "instagram",
"linkname": "Instagram",
"link": "https://www.instagram.com/yyy/"
},
{
"_id": 3,
"type": "twitter",
"linkname": "Twitter",
"link": "https://twitter.com/xxx"
},
{
"_id": 4,
"type": "youtube",
"linkname": "Youtube",
"link": "https://www.youtube.com/user/youtube"
}
]

// problem is here how to markup icon = {xxxxx} from map item.type? item.lin and item.linkname woks fine..

{this.props.data.socialLinks.map((item,i) => (
• {item.linkname}
)) }

When using the iosCloseOutline from the ionicons library, the following warning is logged to the console:

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

Here is a demo of that in codesandbox. (To see the warning, you have to open the Console tab at the bottom.)

I have not seen this warning for any other Icon (and I have used this library quite a bit), so I think this might be an issue specific to this Icon.

Please add a LICENSE.MD file 👍

See https://help.github.com/articles/licensing-a-repository/

After looking into accessiblity of SVG icons, it seems the most universal solution would be to add a <title> element as a child of the element. The title text could be passed to Icon as a prop.

If this is something you're likely to merge, I'd be happy to contribute a PR.

The 1.1.6 version that is deployed on npm 8 days ago changes the behavior of the inline styling. I am also unable to override this styling with my own style prop. The change greatly affects the look of the icon since the div container takes up much more space.

With 1.1.6 I get the following styling

div {
display: flex;
justify-content: center;
align-items: center;
}

Previously i got this.

div {
display: inline-flex;
justify-content: center;
align-items: center;
}

Any reason why the 1.1.6 changes are not on github yet? Without the breaking changes published I am unable to provide pull request.

Font Awesome icons support animation via fa-spin (rotating icon) or fa-pulse (rotating icon in discrete steps) classes.
https://fontawesome.com/v4.7.0/examples/

Is it possible to add this effect to React Icons Kit version of these icons?