Add: component <Icon>

Improve: use SFC

.stylelintrc

@@ -1,6 +1,7 @@
 {
     "extends": "stylelint-config-standard",
     "rules": {
-        "indentation": 4
+        "indentation": 4,
+        "font-family-no-missing-generic-family-keyword": null
     }
 }

src/components/Header/index.tsx

@@ -8,13 +8,11 @@ interface HeaderProps extends BaseComponentProps {
     title: string
 }
 
-export class Header extends React.Component<HeaderProps, {}> {
+export const Header: React.SFC<HeaderProps> = props => {
-    render () {
+    const { title, children, className, style } = props
-        const { title, children, className, style } = this.props
 
     return <header className={classnames('header', className)} style={style}>
         <h1>{title}</h1>
         <div className="operations">{children}</div>
     </header>
-    }
 }

src/components/Header/style.scss

@@ -9,7 +9,7 @@
 
     > h1 {
         flex-shrink: 0;
-        font-size: 30px;
+        font-size: 24px;
         color: $color-primary-dark;
         font-weight: 500;
         text-shadow: 0 2px 6px rgba($color: $color-primary-dark, $alpha: 0.4);

src/components/Icon/index.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { BaseComponentProps } from '@models/BaseProps'
+import classnames from 'classnames'
+
+interface IconProps extends BaseComponentProps {
+    // icon type
+    type: string
+
+    // icon size
+    size?: number
+}
+
+export const Icon: React.SFC<IconProps> = props => {
+    const { type, size = 14, className: cn, style: s } = props
+    const className = classnames('clash-iconfont', `icon-${type}`, cn)
+    const style: React.CSSProperties = { fontSize: size, ...s }
+    const iconProps = { ...props, className, style }
+
+    return <i {...iconProps} />
+}

src/components/index.ts

@@ -1 +1,2 @@
 export * from './Header'
+export * from './Icon'

src/containers/Proxies/index.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react'
-import { Header } from '@components'
+import { Header, Icon } from '@components'
 
 export default class Proxies extends React.Component<{}, {}> {
     render () {
         return <div className="container">
             <Header title="代理" >
-
+                <Icon type="plus" size={20} style={{ fontWeight: 'bold' }} />
             </Header>
         </div>
     }

src/styles/common.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'iconfont';
 
 // styles initial
 html {

src/styles/iconfont.scss

@@ -0,0 +1,37 @@
+/**
+ * Clash Dashboard Iconfont
+ * generated by iconfont.cn
+ */
+@import 'variables';
+
+@font-face {
+    font-family: "clash-iconfont";
+    src: url('//at.alicdn.com/t/font_841708_2viqaiy9h37.ttf') format('truetype');
+}
+
+.clash-iconfont {
+    font-family: "clash-iconfont" !important;
+    font-size: 14px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: $color-primary-dark;
+}
+
+.icon-close::before { content: "\e602"; }
+
+.icon-info::before { content: "\e603"; }
+
+.icon-drag::before { content: "\e604"; }
+
+.icon-down-arrow-o::before { content: "\e605"; }
+
+.icon-check::before { content: "\e606"; }
+
+.icon-plus::before { content: "\e607"; }
+
+.icon-triangle-up::before { content: "\e608"; }
+
+.icon-triangle-down::before { content: "\e609"; }
+
+.icon-up-arrow-o::before { content: "\e60a"; }

src/views/Proxies/index.tsx

@@ -4,11 +4,11 @@ import * as React from 'react'
 import ProxiesContainer from '@containers/Proxies'
 import ProxyGroupContainer from '@containers/ProxyGroup'
 
-export default class Proxies extends React.Component<{}, {}> {
+const Proxies: React.SFC = () => (
-    render () {
+    <div className="page">
-        return <div className="page">
         <ProxiesContainer />
         <ProxyGroupContainer />
     </div>
-    }
+)
-}
+
+export default Proxies