<i class="icon-loading" />

1
.icon-loading {
2
  font-family: "iconfont";
3
  color: red;
4
  font-size: 20px;
5
}
6
.icon-loading:before {
7
  content: "\e602";
8
}

1
/* 对应的scss写法为 */
2
.icon-loading {
3
  font-family: "iconfont";
4
  color: red;
5
  font-size: 20px;
6
  &:before {
7
    content: "\e602";
8
  }
9
}

10
/* loading */
20
.icon-loading {
30
    /* ... */
40
    &:before { content: '\e602' }
50
}
60

70
.icon-refresh {
80
    /* ... */
90
    &:before { content: '\e6aa' }
10
}

<Icon type="close" />

<Icon className="close" type="close" />

1
// 第一种可以直接传入对应的属性
2
<Icon type="close" color="red" />
3

4
// 另外一种是利用jsx支持的style语法，传入css样式。
5
const style = {
6
    color: 'red',
7
    fontSize: '20px'
8
}
9
<Icon type="close" style={style} />

1
// 通过对spin的修改，来控制图标是否旋转
2
<Icon type="refresh" spin={true} />

1
+ Icon
2
  + fonts
3
  - index.jsx
4
  - style.scss

> yarn add classnames

10
import classnames from 'classnames';
20

30
// 拼接所有参数
40
classnames('foo', 'bar');  // 'foo bar'
50

60
// 拼接值为true的参数
70
classnames({
80
    foo: true,
90
    bar: false
10
})  //  'foo'
11

12
// 也可以比较随意的混合使用
13
classnames('foo', {
14
    bar: true,
15
    tag: true,
16
    mm: false
17
}) // 'foo bar tag'

1
import React from 'react';
2
import classnames from 'classnames';
3
import './style.scss';

1
const defaultProps = {
2
    type: '',
3
    spin: false
4
}

10
const Icon = (props = defaultProps) => {
20
  // 依次从props中取出可能会出现的值，此处的other表示其余所有剩余的属性，这是ES6的语法
30
  const { type, className, spin, color, style, ...other } = props;
40

50
  // 利用classnames方法计算出最终的classname字符串。
60
  const cls = classnames({
70
    'icon': true,
80
    'icon-spin': !!spin || type === 'loading',
90
    [`icon-${type}`]: true
10
  }, className);
11

12
  const _style = { ...style, color };
13

14
  return (
15
    <i className={cls} {...other} style={_style} /> 
16
  )
17
}

10
import React from 'react';
20
import classnames from 'classnames';
30
import './style.scss';
40

50
const defaultProps = {
60
  type: '',
70
  /**
80
   * 是否旋转
90
   */
10
  spin: false
11
}
12

13
const Icon = (props = defaultProps) => {
14
  // 依次从props中取出可能会出现的值，此处的other表示其余所有剩余的属性，这是ES6的语法
15
  const { type, className, spin, color, style, ...other } = props;
16

17
  // 利用classnames方法计算出最终的classname字符串。
18
  const cls = classnames({
19
    'icon': true,
20
    'icon-spin': !!spin || type === 'loading',
21
    [`icon-${type}`]: true
22
  }, className);
23

24
  const _style = { ...style, color };
25

26
  return (
27
    <i className={cls} {...other} style={_style} /> 
28
  )
29
}
30

31
export default Icon;
32

10
/**
20
 * 图标项目地址
30
 * http://iconfont.cn/manage/index?spm=a313x.7781069.1998910419.db775f1f3&manage_type=myprojects&projectId=597416&keyword=
40
 */
50

60
@font-face {
70
  font-family: "iconfont";
80
  src: url('./fonts/iconfont.eot?t=1543309990807'); /* IE9*/
90
  src: url('./fonts/iconfont.eot?t=1543309990807#iefix') format('embedded-opentype'), /* IE6-IE8 */
10
  url('./fonts/iconfont.ttf?t=1543309990807') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
11
  url('./fonts/iconfont.svg?t=1543309990807#iconfont') format('svg'); /* iOS 4.1- */
12
}
13

14
.icon {
15
  font-family: "iconfont" !important;
16
  font-size: 16px;
17
  font-style: normal;
18
  display: block;
19
  -webkit-font-smoothing: antialiased;
20
  -moz-osx-font-smoothing: grayscale;
21
}
22

23
.icon-add::before { content: '\e65b' }
24
.icon-step:before { content: '\e65a'; }
25
.icon-complete:before { content: '\e658'; }
26
.icon-clock:before { content: '\e67d'; }
27
.icon-selected:before { content: '\e674'; }
28
.icon-phone:before { content: '\e67c'; }
29
.icon-share:before { content: '\e67b'; }
30
.icon-advisory:before { content: '\e67a'; }
31
.icon-car:before { content: '\e679'; }
32
.icon-star:before { content: '\e678'; }
33
.icon-starno:before { content: '\e677'; }
34
.icon-count:before { content: '\e676'; }
35
.icon-add2:before { content: '\e675'; }
36
.icon-check:before { content: '\e673'; }
37
.icon-gift:before { content: '\e672'; }
38
.icon-programe:before { content: '\e671'; }
39
.icon-order:before { content: '\e670'; }
40
.icon-adviser:before { content: '\e66f'; }
41
.icon-activity:before { content: '\e66e'; }
42
.icon-coupon:before { content: '\e66d'; }
43
.icon-aboutus:before { content: '\e66c'; }
44
.icon-envelope:before { content: '\e66b'; }
45
.icon-eyehide:before { content: '\e66a'; }
46
.icon-category:before { content: '\e669'; }
47
.icon-volume:before { content: '\e668'; }
48
.icon-pk:before { content: '\e667'; }
49
.icon-slider:before { content: '\e664'; }
50
.icon-scenes:before { content: '\e661'; }
51
.icon-full:before { content: '\e660'; }
52
.icon-eyeshow:before { content: '\e65f'; }
53
.icon-forward:before { content: '\e65e'; }
54

55
.icon-spin {
56
  animation-name: rotate;
57
  animation-duration: 1s;
58
  animation-timing-function: linear;
59
  animation-iteration-count: infinite;
60
}
61

62
@keyframes rotate {
63
  from {
64
    transform: rotate(0)
65
  }
66
  to {
67
    transform: rotate(360deg)
68
  }
69
}

10
import React from 'react';
20
import ReactDOM from 'react-dom';
30
import Icon from 'components/Icon';
40
import { icons } from 'components/Icon/config';
50

60
const container = {
70
  display: 'flex',
80
  maxWidth: '300px',
90
  margin: 'auto',
10
  justifyContent: 'space-around',
11
  flexWrap: 'wrap'
12
}
13

14
const itemContainer = {
15
  width: '40px',
16
  height: '40px',
17
  display: 'flex',
18
  justifyContent: 'center',
19
  alignItems: 'center'
20
}
21

22
class App extends React.Component {
23
  render() {
24
    return (
25
      <div style={container}>
26
        <Icon type="add" spin />
27
        {icons.map((item, i) => (
28
          <div key={i} style={itemContainer}>
29
            <Icon type={item} />
30
          </div>
31
        ))}
32
      </div>
33
    )
34
  }
35
}
36

37
ReactDOM.render(<App />, document.getElementById('root'));