# IconFont 图标

- 网络
  #icon-wangluo
- 组件分析
  #icon-zujianfenxi
- ECS
  #icon-ecs
- 网络
  #icon-msnui-tree-map
- 云存储
  #icon-yuncunchu
- 安全
  #icon-anquan
- VPN
  #icon-vpn
- 日志
  #icon-rizhi
- 负载均衡
  #icon-fuzaijunheng
- gateway-or
  #icon-gatewayor
- gateway-xor
  #icon-gatewayxor
- vpc
  #icon-vpc
- 弹性公网 IP EIP
  #icon-icon
- 网络
  #icon-iconset0280
- NAT策略
  #icon-natcelve
- 网络
  #icon-wangluo-copy
- 镜像
  #icon-copy-16
- VPN
  #icon-vpn1
- EIP
  #icon-13
- 负载均衡
  #icon-fuzaijunheng38
- 快照
  #icon-kuaizhao
- 实例
  #icon-instance
- 证书
  #icon-zhengshu
- 磁盘
  #icon-ecs-disk
- 高速通道
  #icon-gaosutongdao39
- 安全
  #icon-anquan1
- 安全
  #icon-webicon203
- 快照
  #icon-kuaizhao1
- eip
  #icon-eip
- ecs
  #icon-ecs1
- 网络
  #icon-wangluo1
- 证书
  #icon-zhengshu1
- 云服务器 ECS-无框
  #icon-yunfuwuqiecs33ccff
- 网络
  #icon-wangluo2
- 网络
  #icon-wangluo3
- 网络
  #icon-wangluo4
- nat
  #icon-nat
- ecs
  #icon-ecs2
- gateway
  #icon-gateway
- 镜像
  #icon-jingxiang
- 日志
  #icon-rizhi1
- eip
  #icon-danxinggongwangIPEIP
- 快照
  #icon-kuaizhao2
- 证书
  #icon-zhengshu1-copy
- 日志
  #icon-rizhi2
- vpc
  #icon-siyouwangluoVPC
- 桌面视频
  #icon-zhuomianshipin
- 网络
  #icon-wangluo5
- 网络
  #icon-wangluo6
- 快照
  #icon-kuaizhao3
- 实例列表
  #icon-shililiebiao
- 网络
  #icon-wangluo7
- ecs
  #icon-xingzhuangkaobei
- EPC左导航图标-VPC
  #icon-EPCzuodaohangtubiao-
- 镜像
  #icon-image
- 高速通道
  #icon-gaosutongdao
- VPN
  #icon-p_VPN
- VPN
  #icon-VPN
- svpc_subnet
  #icon-svpc_subnet
- svpc_getway
  #icon-svpc_getway
- svpc_safezone
  #icon-svpc_safezone
- vpn
  #icon-vpn2
- 安全
  #icon-anquan2
- 安全
  #icon-cloud-safety
- 镜像仓库
  #icon-jingxiangcangku
- VPN
  #icon-aistubiaozhizuo-
- 网络
  #icon-dianyinwangwangluojinrong
- 虚拟磁盘
  #icon-xunicipan
- 网络
  #icon-wangluo8
- 网络
  #icon-internet-other
- 安全
  #icon-anquan3
- 高速通道
  #icon-gaosutongdao1
- 专有网络 VPC
  #icon-zhuanyouwangluoVPC
- NAT 网关
  #icon-NATwangguan
- 网关
  #icon-gateway1
- 专有网络 VPC
  #icon-zhuanyouwangluoVPC1
- 私有网络vpc
  #icon-icon-test
- 桌面
  #icon-zhuomian
- 证书
  #icon-zhengshu2
- 媒体
  #icon-meiti
- 云存储
  #icon-yuncunchu1
- 媒体
  #icon-meiti1
- 负载均衡
  #icon-fuzaijunheng1
- 快照
  #icon-kuaizhao4
- 镜像
  #icon-jingxiang1
- 云存储
  #icon-yuncunchu2
- 云存储管理
  #icon-yuncunchuguanli
- 添加实例
  #icon-tianjiashili
- 磁盘列阵
  #icon-cipanliezhen
- Gateway
  #icon-Gateway
- 网关
  #icon-wangguan
- 组件icon_数据探索分析
  #icon-zujianicon_shujutansuofenxi
- 负载均衡
  #icon-fuzaijunheng2
- 网络
  #icon-wangluo9
- nat
  #icon-nat1
- 流程实例
  #icon-process-instance
- 磁盘
  #icon-cipan
- vpc网络
  #icon-vpcwangluo
- EIP弹性ip
  #icon-EIPdanxingip
- gateway
  #icon-gateway2

## symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过`font-size`,`color`来调整样式。
- 兼容性较差，支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般，还不如png。

使用步骤如下：

### 第一步：引入项目下面生成的symbol代码：

    <script src="./iconfont.js"></script>

### 第二步：加入通用css代码（引入一次就行）：

    <style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
    </style>

### 第三步：挑选相应图标并获取类名，应用于页面：

    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-xxx"></use>
    </svg>