@ant-design/icons#PlaySquareTwoTone TypeScript Examples

The following examples show how to use @ant-design/icons#PlaySquareTwoTone. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: App.tsx    From pcap2socks-gui with MIT License 5 votes vote down vote up 
renderDevice = () => {
    return (
      <div className="content-content">
        <Row className="content-content-row" gutter={[16, 16]} justify="center">
          <Col className="content-content-col" span={24}>
            <PlaySquareTwoTone className="content-content-icon" />
          </Col>
        </Row>
        <Row className="content-content-row" gutter={[16, 32]} justify="center">
          <Col className="content-content-col" span={24}>
            <Paragraph>
              <Title level={3}>源设备</Title>
              <Paragraph type="secondary" style={{ marginBottom: "0" }}>
                源设备是你希望被代理的设备，和此设备处于同一网络中的任何设备都可以是源设备。
              </Paragraph>
              <Paragraph type="secondary">如果你不清楚如何配置，你可以任选一个预设方案尝试并继续。</Paragraph>
            </Paragraph>
          </Col>
        </Row>
        <Row className="content-content-row" gutter={[16, 0]} justify="center">
          <Col className="content-content-col" xs={24} sm={18} md={12}>
            <RowSelect
              label="预设方案"
              options={presets}
              valueTooltip="预设方案不影响使用效果，但如果你在使用 pcap2socks 的同时也使用其它加速器，使用预设方案将免去你频繁修改网络设置的烦恼"
              value={this.state.preset}
              onChange={(value) => this.setState({ preset: Number(value) })}
            />
            {(() => {
              if (this.state.preset === 0) {
                return (
                  <div>
                    <RowInput
                      label="源 IP 地址"
                      valueTooltip="如果你需要代理多台设备的网络流量，请填写源 CIDR 地址"
                      value={this.state.source}
                      onChange={(value) => {
                        this.setState({ source: value });
                      }}
                    />
                    <RowInput
                      label="虚拟网关"
                      valueTooltip="虚拟网关可以用于创建代理源设备与此设备间的网络隔离环境，如果你不希望使用虚拟网关，请留空"
                      value={this.state.publish}
                      onChange={(value) => {
                        this.setState({ publish: value });
                      }}
                    />
                  </div>
                );
              }
            })()}
          </Col>
        </Row>
        <Row gutter={[16, 16]} justify="center"></Row>
      </div>
    );
  };