gorangajic / react-icon-base Goto Github PK

base icon for https://github.com/gorangajic/react-icons

JavaScript 100.00%

react-icon-base's Introduction

react-icon-base

base element for react-icons

Installation

npm install react-icon-base --save

Usage

import React from 'react'
import IconBase from 'react-icon-base'

export default class FaHeart extends React.Component {
    render() {
        return (
            <IconBase viewBox="0 0 1792 1896.0833" {...this.props}>
                <g><path d="m896 1664q-26 0-44-18l-624-602q-10-8-27.5-26t-55.5-65.5-68-97.5-53.5-121-23.5-138q0-220 127-344t351-124q62 0 126.5 21.5t120 58 95.5 68.5 76 68q36-36 76-68t95.5-68.5 120-58 126.5-21.5q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z"/></g>
            </IconBase>
        )
    }
}

Configuration

You can configure react-icon-base props in context.

class HigherOrderComponent extends Component {

    static childContextTypes = {
        reactIconBase: PropTypes.object
    };

    getChildContext() {
        return {
            reactIconBase: {
                color: 'tomato',
                size: 24,
                style: {
                    ...
                }
            }
        }
    }

    render() {
        ...
    }
}

Context can be overriden inline, like so:

<Icon size={30} color='aliceblue' style={{ ... }} />

Licence

MIT

react-icon-base's People

Contributors

Stargazers

Watchers

react-icon-base's Issues

Warning: Unknown prop `fit` on <svg> tag (React 15.2.0)

Warning: Unknown prop `fit` on <svg> tag. Remove this prop from the element.
For details, see https://fb.me/react-unknown-prop
    in svg (created by IconBase)
    in IconBase (created by MdVolumeUp)

Default color for icon that specified in component styles has bigger priority than CSS class color

In our project we are using CssModules and react-icons. We specifying colors/size and other possible properties thru CSS styles by assigning styleName to icon, which is converted by CssModules to className. With last changes all icons in our project has one color that specified as default for BaseIcon component. The problem is that this default color has bigger priority than color that we specify by setting CSS class name for icon. Guys do you agree that color is better to hold in CSS styles than in React component props?

PropTypes validators warning

I'm getting this warning in my web console:

Warning: Failed context type: Calling PropTypes validators directly is not supported by the 
`prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at 
http://fb.me/use-check-prop-types
    in IconBase
    in MdRemoveCircleOutline

run build and push to npm

main is set to lib/index.js which still has fill: "#000",. I assume you didn't run npm build before publishing 0.0.6

Should the default style of `verticalAlign: middle` be removed from icons?

I wanted to suggest that the default verticalAlign be left to baseline, instead of being set to middle here:

Usecase

When using with text, it's almost always the case that the icon should align with the baseline instead of the text-middle. And when putting inside buttons as a standalone icon, the button's css would already take case of alignment.

Current Issues

Another issue with the putting default inline styles is that when using approaches different than CSS-in-JS, such as css-modules, I have to always write <IconEye style={{...}} />.

AltText Addition

I am using a lot of the icons in place of a checkbox or something like that (trash can for a remove, etc...) and would love to be able to have an altText value associated with. any chance of getting something like that as an optional set?

Usage question: How to apply styles to individual paths - not a bug

Hi everyone! First off, thanks for the attention.

I am trying to use this lib with svg icons my clients send me. I however have not well understood how to apply styles to individual paths within the svg.

I will leave my sample code in the end, but my question is: why aren't the styles I pass in on the style prop not being applied to the paths? If I place them as actual props on each path I do get the expected behavior.

Thanks again!

import React from 'react'
import Icon from 'react-icon-base'

const BlueBin = (props) => (
  <Icon
    viewBox="0 0 54.86 48.4"
    style={{
      cls1: {
        fill: '#6291c1',
        strokeMiterlimit: 10,
        strokeWidth: '2px',
        stroke: '#040006',
      },
      cls2: {
        fill: '#6291c1',
        strokeMiterlimit: 10,
        strokeWidth: '2px',
        stroke: '#000',
      },
      cls3: {
        fill: 'none',
        stroke: '#fff',
        strokeLinecap: 'round',
        strokeLinejoin: 'round',
        strokeWidth: '2.1px',
      },
      cls4: {
        fill: 'none',
        stroke: '#fff',
        strokeLinecap: 'round',
        strokeLinejoin: 'round',
        strokeWidth: '2.23px',
      }
    }}
    {...props}
  >
    <g>
      <path className="cls1" d="M6.66,47.4H48.2a.79.79,0,0,0,.8-.75l2.07-35.41a.8.8,0,0,0-.8-.84H4.59a.79.79,0,0,0-.8.84L5.86,46.65A.79.79,0,0,0,6.66,47.4Z" />
      <path className="cls2" d="M1.59,9.22a.8.8,0,0,0,.8.73H52.47a.79.79,0,0,0,.79-.73l.6-7.36a.8.8,0,0,0-.8-.86H1.8a.8.8,0,0,0-.8.86Z" />
      <path className="cls3" d="M33.66,23.91l0,14.9a1.74,1.74,0,0,1-1.75,1.74l-8.92,0a1.75,1.75,0,0,1-1.74-1.75l.05-14.91A1.75,1.75,0,0,1,23,22.13l8.92,0A1.75,1.75,0,0,1,33.66,23.91Z" />
      <rect className="cls3" x="24.28" y="15.95" width="6.04" height="6.04" />
      <rect className="cls4" x="21.5" y="29.62" width="11.98" height="5.09" />
    </g>
  </Icon>
)

export default BlueBin

prop-types should be added as a dependency

Title say it, react-icon-base is depended on prop-types but it's not in package.json

Setting a hover styles

Hi!

How i can set dinamic styles for hover effect for icon? It's possible to looks like a color prop?

Default size

I was wondering why the size defaults to 24? Is there any specific reason? If not, do you think its reasonable to default it to 1em? I'm not sure if this would have side effects, but I assume having the icon the same size as the text is more reasonable default than 24 pixels.

Error "prop-types" not installed

yarn check throw such error
error "react-icon-base#prop-types" not installed

Fix or remove jsnext:main

jsnext:main is intended to point at transpiled code that uses ES modules instead of CJS, not at untranspiled code.

Your current declaration of jsnext:main will actually break things for users who are following the recommended approach of not also running Babel on the contents of node_modules.

You should either add an ES module build target (see React Router and Redux for a couple of different ways of doing this), or remove the jsnext:main entry point entirely.

Icons don't have height in Firefox (using Flexbox) unless set height/width in styles

I'm guessing the problem has something to do with Flexbox but as I'm quite new to Flexbox, I'm not sure. You can view the problem on relaterocket.co.

@gorangajic would you be open to a PR that adds width/height to style as well as attributes?

Unmet peer dependency "prop-types@*".

Any chance of fixing this:

warning "[email protected]" has unmet peer dependency "prop-types@*".

Thanks in advance, amazing library, we use it everywhere now.