企企通产品部V6

Appearance

On this page
icons图标库 ​

icons图标库是公司自研提供的图标库，封装了可变色QIcon、纯色的QSymbolIcon两种组件

  1. QIcon组件

    使用方式：

    vue
    <QIcon :type="icon-q-chat-bi" :size="16" :color="#666"></QIcon>

  2. QSymbolIcon组件

    使用方式：

    vue
    <QSymbolIcon :type="icon-q-chat-bi" :size="16"></QSymbolIcon>

  3. 更新icons图标库

    在iconfont下载解压后，将font里面的文件替换

    image-20240801110657884

重新pnpm run build

提供的样式icons样式库

stylus
@font-face {
  font-family: "iconfont"; /* Project id 4084027 */
  src: url('iconfont.woff2?t=1722481186905') format('woff2'),
       url('iconfont.woff?t=1722481186905') format('woff'),
       url('iconfont.ttf?t=1722481186905') format('truetype'),
       url('iconfont.svg?t=1722481186905#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-q-chat-bi:before {
  content: "\e601";
}

.icon-Q-Value-added-services:before {
  content: "\e706";
}

.icon-Q-tile:before {
  content: "\e704";
}

.icon-Q-polymerization:before {
  content: "\e705";
}

.icon-Q-Someone:before {
  content: "\e702";
}

.icon-Q-unmanned:before {
  content: "\e703";
}

.icon-Q-No-access-permissions:before {
  content: "\e701";
}

.icon-Q-Voice-Assistant:before {
  content: "\e731";
}

.icon-Q-kaibiao:before {
  content: "\e6f9";
}

.icon-Q-qita:before {
  content: "\e6fa";
}

.icon-Q-jiean:before {
  content: "\e6fb";
}

.icon-Q-pingbiao:before {
  content: "\e6fc";
}

.icon-Q-dingbiao:before {
  content: "\e6fd";
}

.icon-Q-yichang:before {
  content: "\e6fe";
}

.icon-Q-toubiao:before {
  content: "\e6ff";
}

.icon-Q-zhaobiao:before {
  content: "\e700";
}

.icon-Q-prompt:before {
  content: "\e6f8";
}

.icon-Q-footprint:before {
  content: "\e757";
}

.icon-Q-purchase-requisition:before {
  content: "\e6f7";
}

.icon-Q-Shopping-Cart:before {
  content: "\e6f1";
}

.icon-Q-collect:before {
  content: "\e6f2";
}

.icon-Q-homepage:before {
  content: "\e6f3";
}

.icon-Q-price-parity:before {
  content: "\e6f5";
}

.icon-a-Frame371775:before {
  content: "\e6f6";
}

.icon-Q-Bidding-logo:before {
  content: "\e6f0";
}

.icon-Q-calibrate:before {
  content: "\e6ed";
}

.icon-Q-bid:before {
  content: "\e6ee";
}

.icon-Q-bid-opening:before {
  content: "\e6ef";
}

.icon-Q-freeze:before {
  content: "\e64c";
}

.icon-Q-sub-entry-regulations:before {
  content: "\e681";
}

.icon-Q-signing-process-management:before {
  content: "\e68f";
}

.icon-bidding-platform:before {
  content: "\e708";
}

.icon-Q-left-arrow:before {
  content: "\eb0a";
}

.icon-Q-No-Data:before {
  content: "\e6e3";
}

.icon-Q-No-permissions:before {
  content: "\e6e4";
}

.icon-Q-success:before {
  content: "\e6e5";
}

.icon-Q-fail:before {
  content: "\e6e6";
}

.icon-Q-no-message:before {
  content: "\e6e7";
}

.icon-Q-502:before {
  content: "\e6e8";
}

.icon-Q-404:before {
  content: "\e6e9";
}

.icon-Q-Network-disconnection:before {
  content: "\e6ea";
}

.icon-Q-Approved:before {
  content: "\e6eb";
}

.icon-Q-tip:before {
  content: "\e6ec";
}

.icon-Q-logo-Decolorization:before {
  content: "\e6e2";
}

.icon-Q-logo-primary-colours:before {
  content: "\e6f4";
}

.icon-Q-0-save:before {
  content: "\e6e0";
}

.icon-Q-Preview:before {
  content: "\e6e1";
}

.icon-Q-Business-components:before {
  content: "\e6dc";
}

.icon-Q-Basic-components:before {
  content: "\e6dd";
}

.icon-Q-Container-components:before {
  content: "\e6de";
}

.icon-Q-SRM-Collaboration:before {
  content: "\e6df";
}

.icon-Q-Rebate-ladder:before {
  content: "\e6db";
}

.icon-Q-return:before {
  content: "\e6da";
}

.icon-Q-save:before {
  content: "\e6d6";
}

.icon-Q-release:before {
  content: "\e6d7";
}

.icon-Q-Submit-for-approval:before {
  content: "\e6d8";
}

.icon-Q-custom:before {
  content: "\e6d9";
}

.icon-Q-Full-screen:before {
  content: "\e6d4";
}

.icon-Q-print:before {
  content: "\e6d5";
}

.icon-Q-list:before {
  content: "\e71d";
}

.icon-Q-card:before {
  content: "\e71e";
}

.icon-secondary-menu:before {
  content: "\e709";
}

.icon-first-level-menu:before {
  content: "\e70a";
}

.icon-Q-Receive-Settings:before {
  content: "\e6d0";
}

.icon-Q-Basic-information:before {
  content: "\e6d1";
}

.icon-Q-security-setting:before {
  content: "\e6d2";
}

.icon-Q-Preferences:before {
  content: "\e6d3";
}

.icon-Q-remove:before {
  content: "\e6ce";
}

.icon-Q-Selected:before {
  content: "\e6cf";
}

.icon-Q-black:before {
  content: "\e6c0";
}

.icon-Q-white:before {
  content: "\e6c1";
}

.icon-Q-Audit-Center:before {
  content: "\e6cd";
}

.icon-Q-Personal-authentication:before {
  content: "\e6c7";
}

.icon-Q-form-recognition:before {
  content: "\e6c8";
}

.icon-Q-Dark-shrinkage:before {
  content: "\e6c9";
}

.icon-Q-Bright-contraction:before {
  content: "\e6ca";
}

.icon-Q-Dark-unfolding:before {
  content: "\e6cb";
}

.icon-Q-Bright-unfolding:before {
  content: "\e6cc";
}

.icon-Q-Quick-application:before {
  content: "\e6c6";
}

.icon-Q-Company-Pages:before {
  content: "\e6c2";
}

.icon-Q-Internal-shopping-mall:before {
  content: "\e6c3";
}

.icon-Q-Financial-Cloud:before {
  content: "\e6c4";
}

.icon-Q-Procurement-website:before {
  content: "\e6c5";
}

.icon-Q-video-text:before {
  content: "\e6ad";
}

.icon-Q-help-text:before {
  content: "\e6ae";
}

.icon-Q-export:before {
  content: "\e6af";
}

.icon-Q-setting:before {
  content: "\e6b0";
}

.icon-Q-import:before {
  content: "\e6b1";
}

.icon-Q-attachment-text:before {
  content: "\e6b2";
}

.icon-Q-add:before {
  content: "\e6b3";
}

.icon-Q-report-center:before {
  content: "\e6b4";
}

.icon-Q-public-service:before {
  content: "\e6b5";
}

.icon-Q-Platform-Management:before {
  content: "\e6b6";
}

.icon-Q-home-page:before {
  content: "\e6b7";
}

.icon-Q-Approva-Center:before {
  content: "\e6b8";
}

.icon-Q-Bidding-platform:before {
  content: "\e6b9";
}

.icon-Q-Business-Kanban:before {
  content: "\e6ba";
}

.icon-Q-Internal-Mall:before {
  content: "\e6bb";
}

.icon-Q-Procurement-Collaboration:before {
  content: "\e6bc";
}

.icon-Q-configuration-center:before {
  content: "\e6bd";
}

.icon-Q-system-management:before {
  content: "\e6be";
}

.icon-Q-Sales-synergy:before {
  content: "\e6bf";
}

.icon-Q-message:before {
  content: "\e6a4";
}

.icon-Q-customer-service:before {
  content: "\e6a5";
}

.icon-Q-chat:before {
  content: "\e6a9";
}