bixi/src/app/shared/components/icons-box/icons-box.component.html

企业级中后台前端解决方案

<div>
  <div nz-row class="icon-selector">
    <nz-radio-group [(ngModel)]="theme" (ngModelChange)="onThemeChange($event)">
      <label nz-radio-button nzValue="outline">
        <i nz-icon>
          <svg>
            <path
              d="M864 64H160C107 64 64 107 64 160v704c0 53 43 96 96 96h704c53 0 96-43 96-96V160c0-53-43-96-96-96z m-12 800H172c-6.6 0-12-5.4-12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4 12 12v680c0 6.6-5.4 12-12 12z">
            </path>
          </svg>
        </i>
        Outlined
      </label>
      <label nz-radio-button nzValue="fill">
        <i nz-icon>
          <svg>
            <path
              d="M864 64H160C107 64 64 107 64 160v704c0 53 43 96 96 96h704c53 0 96-43 96-96V160c0-53-43-96-96-96z">
            </path>
          </svg>
        </i>
        Filled
      </label>
      <label nz-radio-button nzValue="twotone">
        <i nz-icon>
          <svg>
            <path
              d="M16 512c0 273.932 222.066 496 496 496s496-222.068 496-496S785.932 16 512 16 16 238.066 16 512z m496 368V144c203.41 0 368 164.622 368 368 0 203.41-164.622 368-368 368z">
            </path>
          </svg>
        </i>
        Two Tone
      </label>
    </nz-radio-group>
    <nz-input-group [nzSuffix]="suffixIconSearch">
      <input nz-input [(ngModel)]="search" (ngModelChange)="onSearchChange($event)"
        placeholder="在此搜索图标，点击图标可复制代码">
    </nz-input-group>
    <ng-template #suffixIconSearch>
      <i nz-icon nzType="search"></i>
    </ng-template>
  </div>
  <ng-container *ngFor="let item of displayIcons">
    <h3>{{item.cate}}</h3>
    <ul class="anticons-list" nz-row>
      <li *ngFor="let icon of item.icons" nz-col nzXs="12" nzSm="6" nzMd="6" nzLg="6" nzXl="4" nzXXl="3" (click)="onIconClick($event, icon)">
        <i nz-icon [nzType]="icon.path"></i>
        <span class="anticon-class">
          {{ icon.text }}
        </span>
      </li>
    </ul>
  </ng-container>
</div>

<nz-modal [(nzVisible)]="modalVisible" [nzTitle]="null" nzWidth="600" (nzOnCancel)="onModalClose()"
  [nzFooter]="modalFooterTpl">
  <div class="download-icon">
    <div class="icon-preview">
      <i nz-icon [style.fontSize]="'32px'" [nzType]="selectedIcon.path"></i>
    </div>
    <div class="icon-info">
      <div class="icon-info-header">
        <div class="name">{{ selectedIcon.text }}</div>
      </div>
      <div class="icon-info-detail" *ngIf="modalVisible">
        <div class="command" contenteditable="true" spellcheck="false"  >
          <<span class="tag">i nz-icon</span><span class="atn"> nzType</span>="{{ selectedIcon.path.slice(6) }}">&lt;{{'/'}}<span class="tag">i</span>>
        </div>
        <div class="copy" (click)="onCopyCode(selectedIcon)">复制</div>
      </div>
    </div>
  </div>
</nz-modal>

<ng-template #modalFooterTpl>
  <div class="icon-actions">
    <div nz-button nzType="primary" class="btn-opt" (click)="onCopyText(selectedIcon)"><i nz-icon
        nzType="copy"></i>&nbsp;&nbsp;复制名称</div>
    <div nz-button nzType="primary" class="btn-opt" (click)="onCopySvg(selectedIcon)"><i nz-icon
        nzType="copy"></i>&nbsp;&nbsp;复制 SVG</div>
  </div>
</ng-template>