# vue3-0428-iconDemo

**Repository Path**: mrblackant/vue3-0428-icon-demo

## Basic Information

- **Project Name**: vue3-0428-iconDemo
- **Description**: vue3，在线icon使用等
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-27
- **Last Updated**: 2022-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 阿里在线 icon 使用

### 一、打开[阿里 icon 图标库](https://www.iconfont.cn/)，登录；

### 二、新建一个项目：资源管理-我的项目-新建项目;

![新建项目](https://gitee.com/mrblackant/vue3-0428-icon-demo/raw/master/public/img/aliIcon-using/image.png)

### 三、搜索需要的 icon，比如一个天猫的官方 icon 库:[AntChain 蚂蚁链官方图标库](https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=26815)，把需要的 icon 库添加购物车；

![添加](https://gitee.com/mrblackant/vue3-0428-icon-demo/raw/master/public/img/aliIcon-using/image2.png)

如果想把整个 icon 库添加进购物车，那就得打开调试模式，

```
//console面板输入:
var icons = document.querySelectorAll(".icon-gouwuche1");

var auto_click = function (i) {
  if (i < icons.length) {
    setTimeout(function () {
      icons.item(i).click();
      auto_click(i + 1);
    }, 600);
  }
};

auto_click(0);

```

### 四、将购物车 icon 添加进项目：单击右上角“购物车”-加入项目-确定;

![添加到项目](https://gitee.com/mrblackant/vue3-0428-icon-demo/raw/master/public/img/aliIcon-using/image3.png)

### 五、添加进项目之后会跳转至项目界面，点击生成在线代码;

![添加到项目](https://gitee.com/mrblackant/vue3-0428-icon-demo/raw/master/public/img/aliIcon-using/image4.png)

### 六、项目的 index.html 使用

```
//index.html添加
<link rel="stylesheet" href="https://at.alicdn.com/t/font_3363945_0m6rulowxvv.css"/>

//使用
<i class="iconfont icon-bingtutubiao"></i>
```

![效果](https://gitee.com/mrblackant/vue3-0428-icon-demo/raw/master/public/img/aliIcon-using/image5.png)