wmira / react-icons-kit Goto Github PK
View Code? Open in Web Editor NEWReact Svg Icons
Home Page: https://react-icons-kit.vercel.app/
License: MIT License
React Svg Icons
Home Page: https://react-icons-kit.vercel.app/
License: MIT License
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.
import { Button } from 'reactstrap'
import Icon, { horizontalCenter } from 'react-icons-kit';
import { ic_looks_one } from 'react-icons-kit/md/ic_looks_one'
const MyButton = horizontalCenter(props => <Button>{props.children}</Button>)
<MyButton>
hello world <Icon icon={ic_looks_one} />
</Mybutton>
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?
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
.
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.
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..
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?
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.
Is that possible?
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
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.
Please add a LICENSE.MD file ๐
See https://help.github.com/articles/licensing-a-repository/
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
It would be awesome if this package could include FeatherIcons.
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.
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!
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>
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.
@ ./~/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.
Hi, just a new feature request.
Is it possible to upgrade to IonIcons v3?
Hope so, Cheers!
Some icons are missing. For example: https://material.io/tools/icons/?icon=fastfood&style=baseline
Probably library needs update for google material icons.
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'
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'
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.
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.
use import('').then to reduce size of main bundle
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.