# Vue引用阿里矢量图标库（icon-font）

**Repository Path**: jiang-huachao-ash/vant-use-ali-icon

## Basic Information

- **Project Name**: Vue引用阿里矢量图标库（icon-font）
- **Description**: Vue中使用阿里矢量图标库
- **Primary Language**: Unknown
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-02-08
- **Last Updated**: 2023-02-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: npm, Nodejs, 阿里矢量图标库, Vue, Icon-font

## README

# Vue 引用阿里矢量图标库

#### 介绍

Vue 中使用阿里矢量图标库
注：这里使用的是 icon 图标

## 阿里矢量图标库地址

阿里矢量图标库-点此链接跳转-----> [阿里矢量图标库](https://www.iconfont.cn/)

## 使用教程：

### 1. 打开阿里图标库选择想要的图标然后添加入库

![num1](https://gitee.com/jiang-huachao-ash/vant-use-ali-icon/raw/master/image/num1.png)

### 2. 把选择好的图标添加到我的项目中然后在我的项目中查看

![num2](https://gitee.com/jiang-huachao-ash/vant-use-ali-icon/raw/master/image/num2.png)

### 3. 在我的项目中下载代码

<img src="https://gitee.com/jiang-huachao-ash/vant-use-ali-icon/raw/master/image/num3.png" alt="num3" style="zoom: 50%;" />

### 4. 点击下载到本地，下载之后是一个压缩文件，然后解压打包之后把文件更名为 icon

![num4](https://gitee.com/jiang-huachao-ash/vant-use-ali-icon/raw/master/image/num4.png)

### 5. icon 文件夹添加至 Vue 项目的静态文件夹 src / assets 中。

![num5png](https://gitee.com/jiang-huachao-ash/vant-use-ali-icon/raw/master/image/num1.png)

### 6. 在 main.js 中全局引入这个 css 文件

![num6](https://gitee.com/jiang-huachao-ash/vant-use-ali-icon/raw/master/image/num6.png)

#### 代码如下：

```js
// 引入阿里图标css文件
import '@/assets/icon/iconfont.css'
```

### 7. 在 css 文件中放入阿里图标库中的在线链接并且加入 iconfont 的默认配置--即 iconfont.css 文件，如：

```js
//以下为下载后的代码，下载的图标越多，代码量越高
@font-face {
  font-family: 'iconfont';
  /* Project id  */
  src: url('iconfont.ttf?t=1675858556631') format('truetype');
}

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

.icon-jiarehuoyan-xianxing:before {
  content: '\e7a2';
}

.icon-toutiaoyangshi:before {
  content: '\e622';
}

```

#### ps:如果后期还想加入一些其他的图标的话，重复上边的步骤就行了，然后在我的项目中点击更新代码，直接在项目的 css 文件夹中把@font-face 更新一下就行了

### 8. 就可以直接在项目中使用啦

```js
// 使用阿里icon字体图标
// 开始的iconfont是必须要有的前提class属性
// 后面的 icon-jiarehuoyan-xianxing 则是自定义图标属性
<i class="iconfont iconfont icon-jiarehuoyan-xianxing"></i>
```

##### 如果不知道图标的自定义属性的话可以打开 icon 中的 demo_index.html 文件 查看自定属性的名称

![num7](https://gitee.com/jiang-huachao-ash/vant-use-ali-icon/raw/master/image/num7.png)

#### 欢迎大家参与贡献

1.  Fork 本仓库
2.  新建分支
3.  提交代码
4.  新建 Pull Request
5.  如果本文档有任何问题欢迎大家私信或评论
6.  喜欢的话可以收藏+关注
7.  谢谢

#### 题外

1.  使用 阿里矢量图标库来个性化图标
2.  使用过程中如果同时使用了 Vant 组件库可能会引起图标大小样式的冲突，需要通过修改特定位置的 css 样式来使其大小一致
3.  你可以通过 [https://gitee.com/jiang-huachao-ash](https://gitee.com/jiang-huachao-ash) 这个地址来了解 Ash 的开源项目
4.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
5.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)