# AppIcon 自定义/模块 图标展示组件

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/app-icon/freepass)
- 平台：PC
- 维护者：揭志胜
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s40
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[AppIcon]

## 代码演示

### 使用方法

基础使用方法

```jsx
import react, { PureComponent } from 'react';
import { AppIcon, AppIconModuleType } from '@weapp/ui';

class BasicDemo extends PureComponent {
  render() {
    return (
      <div>
        <h4>普通使用</h4>
        <AppIcon
          isBg  // 是否展示背景
          noLinear  // 是否非线性图标
          value={1} />
        <h4>自定义颜色与背景色</h4>
        <AppIcon
          isBg
          noLinear
          customBgColor={'#e6b7b7'}
          customIconColor={'#f95151'}
          value={1}
        />
      </div>
    );
  }
}

export default BasicDemo;
```

### AppIcon

AppIcon 组件包含的所有图标

```jsx
import React, { PureComponent } from 'react';
import { AppIcon, AppIconModuleType, Popover, Dialog } from '@weapp/ui';
const IconMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, "saleChance", "mainline", "task", "calendar", "document", "statisticalReport", "voiceOffice", "workflow", "orderform", "workreport", "customer", "clue", "contact", "marketactivity", "contract", "production", "competitor", "price", "form", "placard", "attend", "blog", "email", "personnelContract", "leaveMgt", "messageCenter", "application", "mailList", "mine", "newlyBuild", "LittleE", "room", "meeting", "telephone", "remind", "more", "gateway", "capital", "search", "signcontract", "collaboration", "quote", "relation", "setUp", "reimbursement", "statisticalFigure", "kpi", "crmSummary", "tag", "inc", "cooperation", "cowork", "reportForm", "demonstration", "authentication", "picture", "cloudServer", "hr", "hrm", "investigation", "assets", "Journalism", "satisfied", "executivePlatform", "integrate", "officialDocument", "customerService", "communication", "vehicle", "certification", "pushSettings", "department", "group", "subordinates", "concerned", "share", "teamSharing", "teamWork", "at", "feedback", "unread", "unfinished", "completed", "odoc", "OfficialMgt", "configurationCenter", "basicSetting", "organizationCenterAuthority", "systemLog", "operationLog", "accountSecurity", "upgrade", "importExport", "automatedWorkflow", "eBuilder", "dataSecurity", "operationMaintenancePlatform", "CRM", "question", "problemReport", "auditLog", "financialBudget", "okr", "ESB", "Ctrip", "devPlatform", "multilingual", "mobileMgtPlatform", "thirdPartyPlugin", "workingPortrait", "sendMessage", "eLock", "dispatch", "actuatorMgt", "group02", "addGroup", "edit", "link", "wechatEnterprise", "wechatEnterprise02", "wechatService", "sms", "saleTarget", "salarybill", "staffPosition", "invoice", "market", "scrm", "fna", "record", "crmHomeCustom", "crmHome", "intcenter", "intcenterldap/web", "intexchange", "iaauthclient", "intunifytodo/client_config", "intunifytodo/server_config", "intcenterhr/web", "hrmsalary", "intmail/web", "scene", "wait", "cloudstore", "customerservice", 'intcommon/convertor', 'iaauthserver', 'fnabudget', 'bpm', 'fnabank', 'portrait', 'personnel', 'odocexchange', 'intias', 'intdevice/web', 'docCompared', 'analyze']

const { message } = Dialog;
const prefixCls = 'ui-demo-appIcon'

class IconSplit extends React.Component<any, any> {
  state = {
    moduleColor: ['yellow', 'blue', 'indigo', 'green', 'red'],
    color: this.props.rowData.moduleColor,
  }

  handleClick = () => {
    var oInput = document.createElement('input');
    // oInput.value = `<Icon name={'${iconName}'} />`;
    oInput.value = this.props.rowData.key;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    oInput.className = 'oInput';
    oInput.style.display = 'none';
    message({
      type: 'success', // type: 'info', 'error', 'success'
      content: '复制成功'
    });
  }
  handleChange = (value: any) => {
    this.props.rowData.name = value;
  }
  render() {
    const { children, rowData } = this.props;
    const { color } = this.state;
    return (
      <div onClick={this.handleClick}>
        <Popover
          className={'icon-demo-popover'}
          popup={<span >{rowData}</span>}
          placement={'top'}
        >
          <span className={`icon_box_col`} key={rowData} >
            <span className={`icon_content`}>
              {children}
            </span>
          </span>
        </Popover>
      </div>
    );
  }
}

class BasicDemo extends PureComponent {
  render() {
    return (
      <div>
        <div>
          <h4>线性</h4>
          <div
            style={{
              width: '100%'
            }}
            className={`${prefixCls}_module_box`}
          >
            {
              IconMap.map((icon) => {
                return <IconSplit key={icon} rowData={icon} children={<AppIcon
                  value={icon as AppIconModuleType}
                />} />
              })
            }
          </div>
        </div>
        <div>
          <h4>非线性</h4>
          <div
            style={{
              width: '100%'
            }}
            className={`${prefixCls}_module_box`}
          >
            {
              IconMap.map((icon) => {
                return <IconSplit key={icon} rowData={icon} children={
                  <AppIcon
                    value={icon as AppIconModuleType}
                    noLinear
                  />
                } />
              })
            }
          </div>
        </div>

        <div>
          <h4>线性 + 圆底 </h4>
          <div
            style={{
              width: '100%'
            }}
            className={`${prefixCls}_module_box`}
          >
            {
              IconMap.map((icon) => {
                return <IconSplit key={icon} rowData={icon} children={

                  <AppIcon
                    value={icon as AppIconModuleType}
                    isBg
                  />
                } />
              })
            }
          </div>
        </div>
        <div>
          <h4>线性 + 方底</h4>
          <div
            style={{
              width: '100%'
            }}
            className={`${prefixCls}_module_box`}
          >
            {
              IconMap.map((icon) => {
                return <IconSplit key={icon} rowData={icon} children={
                  <AppIcon
                    value={icon as AppIconModuleType}
                    isBg
                    borderType={'rect'}
                  />
                } />
              })
            }
          </div>
        </div>
        <div>
          <h4>非线性 + 圆底 </h4>
          <div
            style={{
              width: '100%'
            }}
            className={`${prefixCls}_module_box`}
          >
            {
              IconMap.map((icon) => {
                return <IconSplit key={icon} rowData={icon} children={
                  <AppIcon
                    value={icon as AppIconModuleType}
                    noLinear
                    isBg
                  />
                } />
              })
            }
          </div>
        </div>
        <div>
          <h4>非线性 + 方底</h4>
          <div
            style={{
              width: '100%'
            }}
            className={`${prefixCls}_module_box`}
          >
            {
              IconMap.map((icon) => {
                return <IconSplit key={icon} rowData={icon} children={
                  <AppIcon
                    value={icon as AppIconModuleType}
                    noLinear
                    isBg
                    borderType={'rect'}
                  />
                } />
              })
            }
          </div>
        </div>
      </div>
    );
  }
}

export default BasicDemo;
```

### RichAppIcon

RichAppIcon 组件包含的所有图标

```jsx
import React, { PureComponent } from 'react';
import { AppIcon, AppIconModuleType, Popover, Dialog, IconNames } from '@weapp/ui';

const { RichAppIcon } = AppIcon;

const appIcons: IconNames[] = [
  "Icon-@My-new-feedback",
  "Icon-Approval-process",
  "Icon-Business-form",
  "Icon-CRM-statistics",
  "Icon-Cloud-clothing",
  "Icon-Completed-items",
  "Icon-Concerned-colleagues",
  "Icon-Conference-Room",
  "Icon-Document",
  "Icon-Electronic-signature",
  "Icon-Executive-platform",
  "Icon-Female-head",
  "Icon-Group-portrait",
  "Icon-Invoice-cloud",
  "Icon-inc",
  "Icon-Journalism",
  "Icon-Knowledge-document",
  "Icon-Leave-management",
  "Icon-Male-head-portrait",
  "Icon-Marketing-activities",
  "Icon-Message-center",
  "Icon-Mobile-attendance",
  "Icon-My-subordinates",
  "Icon-New-feedback",
  "Icon-Notice",
  "Icon-Personal-collaboration",
  "Icon-Personnel-contract",
  "Icon-Price",
  "Icon-Push-settings",
  "Icon-Reimbursement",
  "Icon-Statistical-chart",
  "Icon-Statistical-report",
  "Icon-Team-sharing",
  "Icon-Team-work-status",
  "Icon-Telephone",
  "Icon-Unfinished-business",
  "Icon-Unread-items",
  "Icon-Voice-Office",
  "Icon-anonymous",
  "Icon-application",
  "Icon-assets",
  "Icon-authentication",
  "Icon-business-opportunity",
  "Icon-capital",
  "Icon-clue",
  "Icon-competitor",
  "Icon-contacts",
  "Icon-contract",
  "Icon-cooperation",
  "Icon-customer-service",
  "Icon-customer",
  "Icon-daily",
  "Icon-demonstration",
  "Icon-department",
  "Icon-gateway",
  "Icon-global-search",
  "Icon-group",
  "Icon-integrate",
  "Icon-investigation",
  "Icon-label",
  "Icon-mail-list",
  "Icon-mail",
  "Icon-more",
  "Icon-my",
  "Icon-newly-build",
  "Icon-order",
  "Icon-performance-appraisal",
  "Icon-personnel-matters",
  "Icon-picture",
  "Icon-product",
  "Icon-project-management",
  "Icon-quoted-price",
  "Icon-relation",
  "Icon-remind",
  "Icon-report-form",
  "Icon-report",
  "Icon-satisfied",
  "Icon-schedule",
  "Icon-set-up",
  "Icon-share",
  "Icon-signal-communication",
  "Icon-task",
  "Icon-to-grant-authorization",
  "Icon-vehicle",
  "Icon-Contact-record",
  "Icon-Duplicate-checking",
  "Icon-international-waters",
  "Icon-Private-arrangements",
  "Icon-Account-security",
  "Icon-upgrade",
  "Icon-Payroll",
  "Icon-position02",
  "Icon-short-message02",
  "Icon-scrm",
  "Icon-market",
  "Icon-WeChat03",
  "Icon-Cloud-reimbursement",
  "Icon-label02",
  "Icon-Cloud-store-o",
  "Icon-Salary-management-o",
  "Icon-ecode-o",
  "Icon-To-do-list-o",
  "Icon-Schedule-meeting-o",
  "Icon-Hrsynchronization-o",
  "Icon-file-management-o",
  "Icon-System-import-and-export-o",
  "Icon-mapping-o",
  "Icon-customerservice2",
  "Icon-Network-IP",
  "Icon-Servicecall-o",
  "Icon-Formengine-o",
  "Icon-set-up"
] as any;

const usageAppIcons: IconNames[] = [
  "Icon-Ask-every-day",
  "Icon-Audit-log",
  "Icon-Automated-workflow",
  "Icon-Basic-settings",
  "Icon-Configuration-center",
  "Icon-Ctrip",
  "Icon-Development-platform",
  "Icon-Document-management",
  "Icon-ESB-Center",
  "Icon-Import-and-export-o",
  "Icon-Management-by-objectives",
  "Icon-Mobile-management-platform",
  "Icon-Multilingual",
  "Icon-Official-document",
  "Icon-Operation-and-maintenance-platform",
  "Icon-Operation-log",
  "Icon-Organization-Center-Authority",
  "Icon-Problem-reporting",
  "Icon-Third-party-plug-in",
  "Icon-Working-portrait",
  "Icon-crm",
  "Icon-data-security",
  "Icon-e-builder",
  "Icon-financial-budget",
  "Icon-okr",
  "Icon-system-log",
  "Icon-crmHome",
  "Icon-Actuator-management",
  "Icon-Send-a-message",
  "Icon-Change-Password",
  "Icon-add-group",
  "Icon-dispatch",
  "Icon-edit",
  "Icon-Hang-up",
  "Icon-link02",
  "Icon-Message-voice",
  "Icon-News-video",
  "Icon-Recording",
  "Icon-Video-off",
  "Icon-Voice-off",
  "Icon-answer-the-phone",
  "Icon-Documentation",
  "Icon-Groupannouncement"
]

const cusAppIcons: IconNames[] = [
  "Icon-custom01",
  "Icon-custom02",
  "Icon-custom03",
  "Icon-custom04",
  "Icon-custom05",
  "Icon-custom06",
  "Icon-custom07",
  "Icon-custom08",
  "Icon-custom09",
  "Icon-custom10",
  "Icon-custom11",
  "Icon-custom12",
  "Icon-custom13",
  "Icon-custom14",
  "Icon-custom15",
  "Icon-custom16",
  "Icon-custom17",
  "Icon-custom18",
  "Icon-custom19",
  "Icon-custom20",
  "Icon-custom21",
  "Icon-custom22",
  "Icon-custom23",
  "Icon-custom24",
  "Icon-custom25",
  "Icon-custom26",
  "Icon-custom27",
  "Icon-custom28",
  "Icon-custom29",
  "Icon-custom30",
  "Icon-custom32",
  "Icon-custom31",
  "Icon-custom33",
  "Icon-custom34",
  "Icon-custom35",
  "Icon-custom36",
  "Icon-custom37",
  "Icon-custom38",
  "Icon-custom39",
  "Icon-custom40",
  "Icon-custom41",
  "Icon-custom42",
  "Icon-custom43",
  "Icon-custom44",
  "Icon-custom45",
  "Icon-custom46",
  "Icon-custom47",
  "Icon-custom48",
  "Icon-custom49",
  "Icon-custom50",
  "Icon-custom51",
  "Icon-custom52",
  "Icon-custom53",
  "Icon-custom54",
  "Icon-custom55",
  "Icon-custom56",
  "Icon-custom57",
  "Icon-custom58",
  "Icon-custom59",
  "Icon-custom60",
  "Icon-custom61",
  "Icon-custom62",
  "Icon-custom63",
  "Icon-custom64"
]

const paymentAppIcons: IconNames[] = [
  "Icon-Ali-nail",
  "Icon-Alipay-card-pack",
  "Icon-Batch-reimbursement",
  "Icon-Corporate-payment",
  "Icon-Corresponding-account-of-bill-item",
  "Icon-Cost-standard",
  "Icon-Ctrip-Travel",
  "Icon-Ctrip-order",
  "Icon-Enterprise-Didi",
  "Icon-Invoice---mail",
  "Icon-Inspection-record",
  "Icon-Invoice---my",
  "Icon-Invoice-inspection",
  "Icon-Invoice-not-checked",
  "Icon-Invoice-photo",
  "Icon-Invoice-statistics",
  "Icon-Invoice-title",
  "Icon-Invoiced",
  "Icon-Jingdong-order",
  "Icon-Little-e",
  "Icon-Loan-application",
  "Icon-Loan-records",
  "Icon-Make-a-note-of-it",
  "Icon-My-work-has-been-done",
  "Icon-Manual-input",
  "Icon-Payment-records",
  "Icon-Reimbursement-records",
  "Icon-Reimbursement-account-maintenance",
  "Icon-Repayment-application",
  "Icon-Scan-invoice-code",
  "Icon-To-be-paid",
  "Icon-To-be-reimbursed",
  "Icon-To-be-repaid",
  "Icon-Travel-expenses-reimbursement",
  "Icon-Travel-in-the-same-city",
  "Icon-Travel-pre-application",
  "Icon-Under-approval",
  "Icon-Valid-checked-invoice",
  "Icon-Waiting-for-me-to-apply",
  "Icon-Wechat-card-package",
  "Icon-Wechat-file",
  "Icon-community",
  "Icon-apply",
  "Icon-draft",
  "Icon-form-management",
  "Icon-invoice",
  "Icon-payment-history",
  "Icon-Invoice-reminder"
]
const IconMap = [...appIcons, ...usageAppIcons, ...cusAppIcons, ...paymentAppIcons]

const { message } = Dialog;
const prefixCls = 'ui-demo-appIcon'

class IconSplit extends React.Component<any, any> {
  state = {
    moduleColor: ['yellow', 'blue', 'indigo', 'green', 'red'],
    color: this.props.rowData.moduleColor,
  }

  handleClick = () => {
    var oInput = document.createElement('input');
    // oInput.value = `<Icon name={'${iconName}'} />`;
    oInput.value = this.props.rowData.key;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    oInput.className = 'oInput';
    oInput.style.display = 'none';
    message({
      type: 'success', // type: 'info', 'error', 'success'
      content: '复制成功'
    });
  }
  handleChange = (value: any) => {
    this.props.rowData.name = value;
  }
  render() {
    const { children, rowData } = this.props;
    const { color } = this.state;
    return (
      <div onClick={this.handleClick}>
        <Popover
          className={'icon-demo-popover'}
          popup={<span >{rowData}</span>}
          placement={'top'}
        >
          <span className={`icon_box_col`} key={rowData} >
            <span className={`icon_content`}>
              {children}
            </span>
          </span>
        </Popover>
      </div>
    );
  }
}

class BasicDemo extends PureComponent {
  render() {
    return (
      <div>
        <div>
          <h4>线性</h4>
          <div
            style={{
              width: '100%'
            }}
            className={`${prefixCls}_module_box`}
          >
            {
              IconMap.map((icon) => {
                return <IconSplit key={icon} rowData={icon}
                  children={<RichAppIcon
                    value={icon}
                  />} />
              })
            }
          </div>
        </div>
        <div>
          <h4>非线性</h4>
          <div
            style={{
              width: '100%'
            }}
            className={`${prefixCls}_module_box`}
          >
            {
              IconMap.map((icon) => {
                return <IconSplit key={icon} rowData={icon} children={
                  <RichAppIcon
                    value={icon}
                    noLinear
                  />
                } />
              })
            }
          </div>
        </div>

        <div>
          <h4>线性 + 圆底 </h4>
          <div
            style={{
              width: '100%'
            }}
            className={`${prefixCls}_module_box`}
          >
            {
              IconMap.map((icon) => {
                return <IconSplit key={icon} rowData={icon} children={
                  <RichAppIcon
                    value={icon}
                    isBg
                  />
                } />
              })
            }
          </div>
        </div>
        <div>
          <h4>线性 + 方底</h4>
          <div
            style={{
              width: '100%'
            }}
            className={`${prefixCls}_module_box`}
          >
            {
              IconMap.map((icon) => {
                return <IconSplit key={icon} rowData={icon} children={
                  <RichAppIcon
                    value={icon}
                    isBg
                    borderType={'rect'}
                  />
                } />
              })
            }
          </div>
        </div>
        <div>
          <h4>非线性 + 圆底 </h4>
          <div
            style={{
              width: '100%'
            }}
            className={`${prefixCls}_module_box`}
          >
            {
              IconMap.map((icon) => {
                return <IconSplit key={icon} rowData={icon} children={
                  <RichAppIcon
                    value={icon}
                    noLinear
                    isBg
                  />
                } />
              })
            }
          </div>
        </div>
        <div>
          <h4>非线性 + 方底</h4>
          <div
            style={{
              width: '100%'
            }}
            className={`${prefixCls}_module_box`}
          >
            {
              IconMap.map((icon) => {
                return <IconSplit key={icon} rowData={icon} children={
                  <RichAppIcon
                    value={icon}
                    noLinear
                    isBg
                    borderType={'rect'}
                  />
                } />
              })
            }
          </div>
        </div>
      </div>
    );
  }
}

export default BasicDemo;
```

## API

#### 使用须知：

RichAppIcon 和 AppIcon api 相同（value 类型不同），RichAppIcon 图标默认无颜色，api 自定义颜色与背景颜色。

> AppIcon 作为 IconSelection 的展示组件使用。
> RichAppIcon 作为 RichIconSelection 的展示组件使用。

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 对应图标 key 值 | number \| appIconModuleType（number 显示自定义图标，appIconModuleType 为对应的模块 id） | 否 | 1 |
| size | 组件大小 | number \| string \| number[] \| string[] | 否 |  |
| noLinear | 非线性图标 | boolean | 否 |  |
| isBg | 是否存在背景 | boolean | 否 |  |
| borderType | 背景类型 | `rect` \| `circle` | 否 | `circle` |
| iconProps | 图标设置，参考 icon 组件 api | IconProps | 否 |  |
| customBgColor | 自定义背景颜色 | string | 否 |  |
| customIconColor | 自定义图标 | string | 否 |  |
> size 组件大小设置方法：`` | `` | `` | ``
> 
> 传递 [] 时，第一个表示组件的 width, 第二个表示组件的 height（width = size0, height = size1)
> 
> 非 [] 时，width = height = size
