1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-28 06:00:06 +02:00

creating button-icon component

This commit is contained in:
Alex Windett 2016-11-23 15:39:40 +00:00
parent 07e391bd37
commit 7fb2cb3131
5 changed files with 78 additions and 0 deletions

View File

@ -0,0 +1,36 @@
const React = require('react');
const classNames = require('classnames');
const styles = require('./style.css');
const Button = require('../button');
const ButtonIcon = ({
name = 'beer',
className,
iconSet = 'fa',
style
}) => {
const Component = require(`react-icons/lib/${iconSet}/${name}`);
const cn = classNames(
className,
styles.icon
);
return (
<div>
<Button>
<Component className={cn} style={style} />
</Button>
</div>
);
};
ButtonIcon.propTypes = {
className: React.PropTypes.string,
iconSet: React.PropTypes.string.isRequired,
name: React.PropTypes.string.isRequired,
style: React.PropTypes.object
};
module.exports = ButtonIcon;

View File

@ -0,0 +1,37 @@
# `<ButtonIcon>`
## demo
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('../column');
const ButtonIcon = require('./index.js');
const styles = require('./style.css');
nmodule.exports = ReactDOM.renderToString(
<Base>
<Row>
<Column>
<ButtonIcon iconSet='fa' name='beer' />
</Column>
</Row>
</Base>
);
```
## usage
```js
const React = require('react');
const ButtonIcon = require('ui/button-icon');
module.exports = () => {
return (
<ButtonIcon iconSet='fa' name='beer' />
);
}
```

View File

@ -0,0 +1,3 @@
.icon {
font-size: inherit;
}

View File

@ -16,6 +16,7 @@ module.exports = {
Select: require('./components/select/readme.md'),
Column: require('./components/column/readme.md'),
Button: require('./components/button/readme.md'),
'Button Icon': require('./components/button-icon/readme.md'),
'Range Slider': require('./components/range-slider/readme.md'),
Toggle: require('./components/toggle/readme.md'),
Checkbox: require('./components/checkbox/readme.md'),

View File

@ -2,6 +2,7 @@ module.exports = {
Avatar: require('./components/avatar'),
Base: require('./components/base'),
Button: require('./components/button'),
ButtonIcon: require('./components/button-icon'),
Checkbox: require('./components/checkbox'),
Column: require('./components/column'),
Container: require('./components/container'),