elementui icon图标大全_el-icon 图标大全

前言

Element内置丰富的图标库，美中不足的是不能适应全部场景。不过我们可以借助第三库来扩展，阿里的icon库就很方便，内部有丰富的图标共选择。

Element 内置图标库

Element内置丰富的图标库，主要有以下2种用法：

1. 设置类名el-icon-xxx，通常使用i元素
2. 在Element部分组件中设置icon属性
3. 官网地址 官网查看更全的icon 图标

代码如下（示例）：

// 设置类名el-icon-xxx，通常使用i元素
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
// 在Element部分组件中设置icon属性
<el-button type="primary" icon="el-icon-search">搜索</el-button>
1
2
3
4
5
6

引入库阿里的icon库

1. 打开阿里icon官网，注册 > 登录
2. 搜索您想要的icon
3. 比如地图 > 选择您想要的图标加入购物车
4. 购物车 》 添加至项目 》 没有项目的先创建项目 》
   
5. 下载到本地 》解压放入项目中
   

引用

CDN 代码如下（示例）：

// 第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
// 第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>
1
2
3
4

vue 代码如下（示例）：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 导入ICon 资源
import './assets/icon/iconfont.css'; 
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
1
2
3
4
5
6
7
8
9
10
11
12
13

vue文件中的使用（示例）：

// 设置类名iconfont icon-xxx
<span class="iconfont icon-kuaijin" />
// 在Element部分组件中设置icon属性
<el-button type="primary" icon="iconfont icon-kuaijin">快进</el-button>
1
2
3
4

总结

以上就是elementui + 阿里Icon 使用的内容，本文仅仅简单介绍了导入阿里icon的使用。而还有其他方式使用， 本文就不做叙述例如 svg 图片 都可以实现