@icloud/icon

关于图标库

如需要向图标库中添加图标

• 复制图标到对应的目录，例如 packages/icon/src/assets/icons/object
• 执行 yarn run build:icon
• 将新图标添加到下文

⚠️ 注意：svg 图片大小、颜色(#324558)。

Iconography 图标

语义化的矢量图形。

基础用法

:::demo

基础的图标用法

• 使用 name 属性来指定图标的名称。
• 包含 dark / light / coloured 三种主题色，通过 type 属性来设置。

import Icon from '@ifcloud/icon';

const IconDemo = () => (
  <div className="demo-wrapper icon-demo">
    <div className="icon-container">
      <p className="icon-content">
        <Icon name="refresh" type="dark" size="medium" />
      </p>
      <p className="annotation">dark</p>
    </div>
    <div className="icon-container">
      <p className="icon-content">
        <Icon name="refresh" type="coloured" size="medium" />
      </p>
      <p className="annotation">coloured</p>
    </div>
    <div className="icon-container">
      <p className="icon-content icon-content-light">
        <Icon name="refresh" type="light" size="medium" />
      </p>
      <p className="annotation">light</p>
    </div>
  </div>
);

export default IconDemo;

:::

设置颜色

设置双色图标

• 使用 color 属性来指定图标的颜色。
• color 是一个表示颜色的对象，具有 primary / secondary 属性，分别代表双色图标的主要色和次要色。

import Icon from '@ifcloud/icon';

const IconDemo = () => (
  <div className="demo-wrapper icon-demo">
    <div className="icon-container">
      <p className="icon-content">
        <Icon
          name="refresh"
          size="medium"
          color={{
            primary: '#2191ca',
            secondary: '#41b1ea',
          }}
        />
      </p>
    </div>
    <div className="icon-container">
      <p className="icon-content">
        <Icon
          name="refresh"
          size="medium"
          color={{
            primary: '#d0a406',
            secondary: '#f0c426',
          }}
        />
      </p>
    </div>
    <div className="icon-container">
      <p className="icon-content">
        <Icon
          name="refresh"
          size="medium"
          color={{
            primary: '#ca2621',
            secondary: '#ea4641',
          }}
        />
      </p>
    </div>
  </div>
);

export default IconDemo;

:::

设置大小

:::demo

图标可以设置默认大小以及指定大小

• 包含 small，medium，large 三种默认大小，通过 size 属性来设置。
• 也可以将 size 属性设置为数字来自定义图标大小。

import Icon from '@ifcloud/icon';

const IconDemo = () => (
  <div className="demo-wrapper icon-demo">
    <div className="icon-container">
      <p className="icon-content">
        <Icon name="refresh" type="dark" size="small" />
      </p>
      <p className="annotation">small</p>
    </div>
    <div className="icon-container">
      <p className="icon-content">
        <Icon name="refresh" type="dark" size="medium" />
      </p>
      <p className="annotation">medium</p>
    </div>
    <div className="icon-container">
      <p className="icon-content">
        <Icon name="refresh" type="dark" size="large" />
      </p>
      <p className="annotation">large</p>
    </div>
    <div className="icon-container">
      <p className="icon-content">
        <Icon name="refresh" type="dark" size={48} />
      </p>
      <p className="annotation">48px</p>
    </div>
  </div>
);

export default IconDemo;

:::

图标集合

:::demo

所有可以使用的图标集合

示例：<Icon name="opensuse" type="dark" size={32} />

import Icon from '@ifcloud/icon';

const companyIcons = [
  'qingcloud',
  'aws',
  'vmware',
  'kubernetes',
  'github',
  'google-plus',
  'git',
  'svn',
  'gitlab',
  'istio',
  'openpitrix',
  'kubesphere',
  'etcd',
  'aliyun',
  'power',
  'bitbucket',
  'jenkins',
  'helm',
  'sonarqube',
  'glusterfs',
  'ceph',
];

const osIcons = [
  'ubuntu',
  'debian',
  'centos',
  'fedora',
  'opensuse',
  'arch-linux',
  'coreos',
  'freebsd',
  'windows',
  'oracle-linux',
  'redhat',
  'macos',
  'ios',
  'linux',
];

const operationIcons = [
  'refresh',
  'logout',
  'restart',
  'add',
  'substract',
  'close',
  'check',
  'copy',
  'start',
  'stop',
  'cardview',
  'listview',
  'list-view-write',
  'list-view-green',
  'listview-new',
  'more',
  'vnc',
  'maximize',
  'minimize',
  'download',
  'upload',
  'export',
  'pull',
  'changing-over',
  'link',
  'drag-handle',
  'pause',
  'expand',
  'collapse',
  'shutdown',
  'fit-to-page',
  'full-size',
];

const objectIcons = [
  'home',
  'magnifier',
  'cogwheel',
  'documentation',
  'mail',
  'file',
  'bell',
  'human',
  'key',
  'calendar',
  'clock',
  'eye',
  'hammer',
  'database',
  'bigdata',
  'container',
  'column',
  'earth',
  'picture',
  'dashboard',
  'shield',
  'enterprise',
  'car',
  'ai',
  'laptop',
  'display',
  'increase',
  'broom',
  'folder',
  'image',
  'network',
  'router',
  'ip',
  'scaling',
  'firewall',
  'timed-task',
  'star',
  'storage',
  'camera',
  'thunder',
  'lock',
  'scissors',
  'cart',
  'blockchain',
  'cdn',
  'loadbalancer',
  'information',
  'question',
  'exclamation',
  'ssh',
  'wrench',
  'pen',
  'trash',
  'filter',
  'appcenter',
  'eye-closed',
  'project',
  'creditcard',
  'resource',
  'loudspeaker',
  'cloud',
  'report',
  'monitor',
  'role',
  'passport',
  'group',
  'tag',
  'ticket',
  'wallet',
  'desktop-group',
  'paper',
  'plus-square',
  'minus-square',
  'pin',
  'error',
  'linechart',
  'barchart',
  'cluster',
  'application',
  'components',
  'backup',
  'stateful-set',
  'deamon-set',
  'catalog',
  'nodes',
  'network-router',
  'terminal',
  'coding',
  'pod',
  'cpu',
  'memory',
  'usb-redirection',
  'admin',
  'zone',
  'branch',
  'target',
  'topology',
  'job',
  'cron-job',
  'log',
  'update',
  'abtest',
  'debug',
  'theme',
  'eip',
  'eip-pool',
  'snapshot',
  'eip-group',
  'listener',
  'ip-port',
  'network-card',
  'vsan',
  'vnas',
  'mgmt-node',
  'os-service',
  'os',
  'v2v',
  'data',
  'blue-green-deployment',
  'browser',
  'mirroring',
  'cookie',
  'bird',
  'templet',
  'fuse',
  'api',
  'scheduler',
  'safe-notice',
  'login-servers',
  'login-accounts',
  'insert-chart',
  'pie-chart',
  'table-chart',
  'success',
  'record',
  'item',
  'stretch',
  'starter',
  'textfield',
  'textarea',
  'select',
  'radio',
  'slider',
  'user-overview',
  'acl',
  'licenses',
  'strategy-group',
  'dot',
  'commit',
  'port',
  'step',
  'docker',
  'bm',
  'ssd',
  'layer',
  'jar',
  'war',
  'binary',
  'csv',
  'pdf',
  'xls',
  'gateway',
  'user-profile',
  'area',
  'proportion',
  'dns',
  'vpn',
  'cpe',
  'nat',
  'certification',
  'ipv6',
  'bi',
  'price',
  'bill',
  'deal',
  'discount',
  'client',
  'approve',
  'box',
  'remark',
  'notes',
  'pe',
  'apps',
  'failure',
  'cloud-apps',
  'saas-apps',
  'json',
  'assets',
  'smart-object',
  'edge-cloud',
  'protocol-object',
  'opc-protocol',
  'modbus-protocol',
  'smart-edge',
  'smart-edge-configuration',
  'template',
  'tab',
  'grid-layout',
  'dividing-line',
  'switch',
  'checkbox-group',
  'color-picker',
  'cascade-selection',
  'text',
  'counter',
  'button',
  'silencer',
  'border-router',
  'agreement',
  'computing',
  'backup-object',
  'backup-shared',
  'certificates',
  'cloud-disk',
  'cloudsat',
  'cname-object',
  'customize-data',
  'data-warehouse',
  'dedicated-host',
  'devices-object',
  'eip-object',
  'image-object',
  'instance-groups',
  'ipv4-object',
  'ipv6-object',
  'loadbalancer-policies',
  'neonsan-object',
  'routing-table',
  'security-group',
  'security-policy',
  'traffic-supply',
  'vnic',
  'vpc',
  'waf-object',
  'waf-policy',
  'paper-clip',
  'iscsi',
  'agreement-object',
  'app-management',
  'cpe-order',
  'id-object',
  'line-order',
  'middleware',
  'pie-chart-object',
  'alarm-object',
  'object-storage',
  'operation-log',
  'plate-created',
  'resist',
  'web-security',
  'all-project',
  'authority-group',
  'coupon',
  'event-monitor',
  'invoice',
  'name-space',
  'object-cache',
  'object-load',
  'presentation',
  'ssl-object',
  'ssl-shared',
  'sub-account',
  'work-order',
  'event-alarm',
  'defense-ip',
  'neonsan',
  'paperwork'
];

const directionIcons = [
  'chevron-down',
  'chevron-up',
  'chevron-right',
  'chevron-left',
  'caret-down',
  'caret-up',
  'caret-right',
  'caret-left',
  'next',
  'previous',
  'sort-ascending',
  'sort-descending',
  'triangle-down',
  'triangle-up',
  'triangle-right',
  'triangle-left',
  'ascending',
  'descending',
  'sorting',
  'return',
];

const languageIcons = ['java', 'gradle', 'javascript', 'php', 'python', 'golang', 'nodejs'];

const appCenter = [
  'app-mysql',
  'chronus-db',
  'click-house',
  'deep-learning',
  'elk',
  'hbase',
  'inference-engine',
  'kafka',
  'kyligence',
  'mongo-db',
  'nifi',
  'polon-db',
  'postgre-sql',
  'qing-mr',
  'qke',
  'rabbit-mq',
  'radon-db',
  'redis',
  'rocket-mq',
  'storm',
  'tomcat',
  'zookeeper',
  'memcached',
];

const renderIcons = function renderIcons(icons) {
  const iconColumns = icons.map(icon => (
    <div className="column is-1" key={icon}>
      <Icon name={icon} type="dark" size="large" changeable />
      <p className="annotation">{icon}</p>
    </div>
  ));
  return <div className="columns is-multiline">{iconColumns}</div>;
};

const IconDemo = () => (
  <div className="demo-wrapper icon-demo" style={{ textAlign: 'center' }}>
    <h4>Operation</h4>
    {renderIcons(operationIcons)}
    <h4>Object</h4>
    {renderIcons(objectIcons)}
    <h4>Direction</h4>
    {renderIcons(directionIcons)}
    <h4>Company</h4>
    {renderIcons(companyIcons)}
    <h4>OS</h4>
    {renderIcons(osIcons)}
    <h4>Language</h4>
    {renderIcons(languageIcons)}
    <h4>AppCenter</h4>
    {renderIcons(appCenter)}
  </div>
);

export default IconDemo;

:::

Icon API

| 成员 | 说明 | 类型 | 默认值 | | ---------- | ------------------------------------------------ | --------------- | ------- | | prefix | 图标前缀 | String | qicon | | name | 图标名称 | String | | | type | 主题类型，可选值为 dark / light / coloured | String | dark | | size | 图标大小 | String / Number | small | | color | 图标颜色 | Object | | | className | 自定义类名 | String | | | style | 自定义样式 | String | | | changeable | 是否悬停变色 | Boolean | false | | clickable | 是否可以点击 | Boolean | false | | onClick | 点击回调 | Function(e) | | | disabled | 是否禁用 | Boolean | false |

• 当 Icon 组件的 clickable 属性为 true 时，将 Icon 组件变成图标按钮，使其有悬停和激活状态。

**COPYBY: FE: Alex; Designer: lzy **