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

adding in icon ui component and react-icon node module

This commit is contained in:
Alex Windett 2016-11-23 15:00:10 +00:00
parent 28d93159ec
commit 5fc507d9a9
8 changed files with 49 additions and 22 deletions

View File

@ -2,6 +2,7 @@ const React = require('react');
const ReactHotLoader = require('react-hot-loader');
const ReactRouter = require('react-router');
// const App = require('../src/components/icon/');
const App = require('./containers/app/');
const {

View File

@ -24,6 +24,7 @@
"param-case": "^2.1.0",
"react": "^15.3.2",
"react-a11y": "^0.3.3",
"react-icons": "^2.2.1",
"reduce-css-calc": "^1.3.0",
"traverse": "^0.6.6"
},

View File

@ -1,18 +1,31 @@
const React = require('react');
// const icons = require('react-icons/md');
const classNames = require('classnames');
const styles = require('./style.css');
const Icon = ({
name,
className,
iconSet,
style
}) => {
// const Component = icons[name];
// <Component className={className} style={style} />
return (<div />);
const Component = require(`react-icons/lib/${iconSet}/${name}`);
const cn = classNames(
className,
styles.icon
);
return (
<div>
<Component className={cn} style={style} />
</div>
);
};
Icon.propTypes = {
className: React.PropTypes.string,
iconSet: React.PropTypes.string.isRequired,
name: React.PropTypes.string.isRequired,
style: React.PropTypes.object
};

View File

@ -9,32 +9,29 @@ const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('../column');
const Checkbox = require('./index.js');
const Icon = require('./index.js');
const styles = require('./style.css');
nmodule.exports = ReactDOM.renderToString(
<Base>
<Row>
<Column>
<Checkbox checked>
Checkbox checked
</Checkbox>
</Column>
</Row>
<Row>
<Column>
<Checkbox>
Checkbox unchecked
</Checkbox>
</Column>
</Row>
<Row>
<Column>
<Checkbox disabled>
Checkbox disabled
</Checkbox>
<Icon iconSet='fa' name='beer' />
</Column>
</Row>
</Base>
);
```
## usage
```js
const React = require('react');
const Icon = require('ui/icon');
module.exports = () => {
return (
<Icon iconSet='fa' name='beer' />
);
}
```

View File

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

View File

@ -10,6 +10,7 @@ module.exports = {
Container: require('./components/container/readme.md'),
Row: require('./components/row/readme.md'),
Input: require('./components/input/readme.md'),
Icon: require('./components/icon/readme.md'),
Radio: require('./components/radio/readme.md'),
'Radio Group': require('./components/radio-group/readme.md'),
Select: require('./components/select/readme.md'),

View File

@ -10,6 +10,7 @@ module.exports = {
Tabs: require('./components/tabs'),
Toggle: require('./components/toggle'),
Input: require('./components/input'),
Icon: require('./components/icon'),
RangeSlider: require('./components/range-slider'),
Radio: require('./components/radio'),
RadioGroup: require('./components/radio-group'),

View File

@ -5275,6 +5275,16 @@ react-hot-loader@^3.0.0-beta.6:
redbox-react "^1.2.5"
source-map "^0.4.4"
react-icon-base@2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.0.3.tgz#f5d9083f64c903d3e983fc9b3f292314b0c0f262"
react-icons:
version "2.2.1"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-2.2.1.tgz#354d725d60acf341d09fd50c6398ae7b97d7f157"
dependencies:
react-icon-base "2.0.3"
react-proxy@^3.0.0-alpha.0:
version "3.0.0-alpha.1"
resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"