1
$ npm install semantic-ui-react semantic-ui-css
2
import 'semantic-ui-css/semantic.min.css'

1
// Webpack CSS import
2
// import 'onsenui/css/onsenui.css';
3
// import 'onsenui/css/onsen-css-components.css';
4
// import OnesenUIExample from './components/OnsenUI/OnesenUIExample';
5
// import AntDesignExample from './components/AntDesign/AntDesignExample';
6

7
import 'semantic-ui-css/semantic.min.css'
8
import ReactSemanticUIExample from './components/ReactSemanticUI/ReactSemanticUIExample'
9

10
export default function App() {
11
  return (
12
    <>
13
      <ReactSemanticUIExample />
14
      {/* <AntDesignExample /> */}
15
      {/* <OnesenUIExample /> */}
16
    </>
17
  )
18
}

1
import { Button, Icon, Label } from 'semantic-ui-react';
2

3
export default const ButtonExampleLabeledBasic = () => (
4
  <div>
5
    <Button as="div" labelPosition="right">
6
      <Button color="red">
7
        <Icon name="heart" />
8
        Like
9
      </Button>
10
      <Label as="a" basic color="red" pointing="left">
11
        2,048
12
      </Label>
13
    </Button>
14
    <Button as="div" labelPosition="right">
15
      <Button basic color="blue">
16
        <Icon name="fork" />
17
        Fork
18
      </Button>
19
      <Label as="a" basic color="blue" pointing="left">
20
        2,048
21
      </Label>
22
    </Button>
23
  </div>
24
);

1
// src/components/ReactSemanticUI/ReactSemanticUIExample.jsx
2
import ButtonExampleLabeledBasic from './ButtonExampleLabeledBasic'
3

4
export default function ReactSemanticUIExample() {
5
  return (
6
    <>
7
      <ButtonExampleLabeledBasic />
8
    </>
9
  )
10
}