【前端】vuecli项目引入ant-design-vue并用ant-design-vue配置阿里巴巴矢量图标库

1、导入并配置ant-design-vue

官网说的十分清楚，我直接copy官网的操作

npm i --save ant-design-vue

在main.js中完整引入 ant-design-vue

import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;Vue.use(Antd);/* eslint-disable no-new */
new Vue({el: '#app',components: { App },template: '<App/>',
});

2、阿里巴巴矢量图标库创建项目

3、全局配置阿里巴巴矢量图标（也可以局部vue文件使用，单独导入component）

在main.js中

//全局引入阿里巴巴矢量图标
import Icon from 'ant-design-vue/es/icon/index'
const MyIcon = Icon.createFromIconfontCN({scriptUrl: '//at.alicdn.com/t/font_2253742_i247dt9fum.js' // 在 iconfont.cn 上生成
});
Vue.component('MyIcon', MyIcon);

4、使用阿里巴巴矢量图标

直接使用就行了

<my-icon style="color:#686868;font-size:58px;"type="icon-jiantou2"/>

【前端】vuecli项目引入ant-design-vue并用ant-design-vue配置阿里巴巴矢量图标库相关推荐

【vue开发基础】之使用阿里巴巴矢量图标库
❤ 写在前面如果觉得对你有帮助的话,点个小❤❤ 吧,你的支持是对我最大的鼓励~ 第一步准备工作前往阿里巴巴矢量图边库,选择并下载你需要的图标 (1)加入购物车 (2)下载代码 (3)解压并打开文 ...
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
Vue项目引入阿里巴巴矢量图标库
添加图标并下载一.点击图标管理–>我的项目,创建项目简单点~填个项目名即可二.选择一个图标,加入购物车点击右上角购物车的图标,添加至项目(可以直接点击下载代码,不需要创建项目,但是如果是 ...
vue项目引入阿里巴巴矢量图标库图标及其使用教程
添加喜欢的图标方式一:本地方式将图标引入到vue项目在main.js文件中引入阿里巴巴矢量图标库的css文件使用图标,注意加上iconfont前缀效果方式二:使用在线方式引入图标到vue项目 ...
如何在vue中引入阿里巴巴矢量图标库里面的图标
阿里巴巴矢量图标库https://www.iconfont.cn/ 首先进行登录,然后才能下载里面的图标搜索里面的图标并添加到购物车点击右上角购物车将购物车里面的图标添加至项目书写项目名称可随 ...
矢量图标库如何引入html,阿里巴巴矢量图标库 iconfont 的使用方法
做设计的应该会知道"阿里巴巴矢量图标库"这个网站,你可以上传自己设计的图标,也可以下载别人分享的图标. 作为前端,我们也可以更好的利用它,实现网站图标的美化. 首先找到你需要的图标 ...
Element引入Iconfont（阿里巴巴矢量图标库）第三方图标库
最近在使用vue-element-admin开源项目进行系统开发,但是在引入第三方图标库的时候,出现了一些问题,百度找了找,也没有找到自己想要的答案,最后经过多次尝试,将问题解决.所以特此记录一下,以 ...
umi框架：react优雅引入阿里巴巴矢量图标库
进入阿里巴巴矢量图标库,将选入的图标放入购物车. 选择添加至项目,没有项目可新建项目. 封装一个自定义Icon组件,这里推荐React使用函数形式: import React from 'react' ...
vue2引入阿里巴巴矢量图标库字体
1.去阿里巴巴矢量图标库官网下载需要的图标 iconfont-阿里巴巴矢量图标库 2.在vue目录下src/assets创建font文件夹,粘贴所下载的字体文件(例如:我的字体文件是:TsangerY ...

【前端】vuecli项目引入ant-design-vue并用ant-design-vue配置阿里巴巴矢量图标库

1、导入并配置ant-design-vue

2、阿里巴巴矢量图标库创建项目

3、全局配置阿里巴巴矢量图标（也可以局部vue文件使用，单独导入component）

4、使用阿里巴巴矢量图标

【前端】vuecli项目引入ant-design-vue并用ant-design-vue配置阿里巴巴矢量图标库相关推荐

最新文章

热门文章