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:
parent
28d93159ec
commit
5fc507d9a9
@ -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 {
|
||||
|
@ -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"
|
||||
},
|
||||
|
@ -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
|
||||
};
|
||||
|
@ -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' />
|
||||
);
|
||||
}
|
||||
```
|
||||
|
3
ui/src/components/icon/style.css
Normal file
3
ui/src/components/icon/style.css
Normal file
@ -0,0 +1,3 @@
|
||||
.icon {
|
||||
font-size: inherit;
|
||||
}
|
@ -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'),
|
||||
|
@ -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'),
|
||||
|
10
ui/yarn.lock
10
ui/yarn.lock
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user