批量制作Ant Design of Vue 图标

已于 2022-02-09 15:13:29 修改
阅读量546 收藏 1
点赞数
文章标签： vue.js 前端 javascript
于 2022-02-09 15:11:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42849845/article/details/122842267
版权
首先进入到icon图标界面在这里插入图片描述
然后F12打开控制台

在这里插入图片描述

在控制台输入

var ul = document.getElementsByClassName("anticons-list")

上图中 我是通过下标来获取所有icon 因为我并不是全部都需要

接着输入 ul[0].innerText 获取标签中文字

然后复制出来 导入文本编辑器中 在这里插入图片描述
替换完成后 在前面加上双引号
像这样
在这里插入图片描述

就得到了 想要的icon图标

只吃俩个馒头就够了
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Ant Design (VUE)中使用ECharts
weixin_39277183的博客
03-09 1万+
1.安装echarts依赖 npm install echarts --save 安装完依赖后在package.json文件看到echarts相对应的版本号 2.在main.js中全局中引用 import echarts from 'echarts' Vue.prototype.$echarts = echarts 3.在你需要用到echart的地方先设置一个div的...
Ant Design Vue 中使用 echarts
学而不思则忘，思而不学则die
11-16 3013
1.添加依赖 yarn add echarts 2.在vue项目的main.js中import import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 3.在想要添加图表的页面中进行操作： methods: { drawChart() { // 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document..
【Ant-Design-Vue】6、表格的高级功能
最新发布
weixin_52938153的博客
06-10 576
通过本节的介绍，我们了解了如何在 Ant-Design-Vue 的表格中实现排序、筛选和分页等高级功能。在接下来的章节中，我们将继续探讨表格的事件与交互功能，进一步提升我们的开发能力。在这个综合示例中，我们为 Name 列启用了筛选功能，为 Age 列启用了排序功能，并为表格启用了分页功能。通过这些配置，我们可以实现一个功能丰富的表格，提升用户的交互体验。在这个示例中，我们为 Name 列配置了几个筛选选项，并定义了一个筛选函数。表格的筛选功能允许用户根据某一列的值对表格数据进行筛选。
Vue+Ant Design of Vue+ECharts 图表跟随父元素的宽高变化重新渲染-resize()/element-resize-detector/ResizeObserver-附完整示例
m0_48968874的博客
12-04 2349
目录效果一、介绍 1、官方文档（1）Ant Design Vue（2）echarts（3）element-resize-detector（4）Resize Observer 二、准备工作1、安装依赖包 2、示例版本 三、使用步骤1、ant-design-vue 1.1、在main.ts引入2、ecahrts 2.1、在单页面引入 ' echarts ' 2.2、指定容器并设置容器宽高3、resize 3.1、window的resize事件注：有局限性，
antd 4.x icon动态获取
weixin_43094085的博客
05-20 1172
const menuList = [ { title: '首页', // 菜单标题名称 key: '/home', // 对应的path icon: 'HomeOutlined', // 图标名称 isPublic: true, // 公开的 }, { title: '商品', key: '/products', icon: 'AppstoreOutlined', children: [ // 子菜单列表 {
Ant Design Vue表格（Table）及分页（Pagination ）使用
前端学习笔记
04-06 1万+
最近在写一个新项目，UI框架用的是，因为之前一直用的Element UI，没有用过这个组件库，没想到二者区别这么大，因此踩了不少坑，其中就有Table和Pagination，花了一会时间才弄明白，在此记录并分享一下此次经历。注意：是 Vue3 项目。
基于 Ant Design of Vue 实现的 Ant Design Pro 源码
12-29
基于 Ant Design of Vue 实现的 Ant Design Pro 源码 安装依赖 npm install 开发模式运行 npm run serve 编译项目 npm run build
SpringBoot+AntDesignVue实现excel导入功能
07-20
SpringBoot+AntDesignVue 实现 Excel 导入功能 在本篇文章中，我们将介绍如何使用 SpringBoot 和 AntDesignVue 实现 Excel 导入功能。这个功能主要是使用 Ant Design Vue 中的 upload 组件来实现导入 excel 文件的...
ant design of vue.zip
07-02
"ant design of vue.zip" 是一个包含Ant Design Vue库的压缩包，它是基于Vue.js框架的前端组件库，由阿里蚂蚁金服团队开发。Ant Design Vue致力于提供一套高质量的UI解决方案，使得开发者能够快速构建美观且功能丰富...
Ant Design of Vue v1.7.2 使用教程.pdf
05-23
Ant Design vue v1.7.2 离线文档
ant-design-vue离线文档
09-23
vue ant design的离线文档， 解压后打开目录 npm install 运行 npm start 启动 默认项目地址为 localhost:3000
vite+vue3 icon图标组件批量封装
qq_37167086的博客
04-19 1960
之前写过一个element-plus icon组件的批量注册（element-plus/icons 批量注册，菜单路由icon图标设置_失岸的博客-CSDN博客_element菜单图标），但项目中往往还需要一些其他的图标，该方法可以在引入svg文件时通过传入icon名字即可直接渲染 1.新建icon文件夹 2.新建一个SvgIcon.vue 和一个js文件 index.vue <template> <svg :class="svgClass" ...
ant-design-vue UI组件使用讲解
06-10
通过jeecg-boot项目实战，详细介绍 ant-design-vue UI组件使用，细致的讲解每个组件的用法，教你学会如何看ant-design-vue的官方文档。对于初学入门者来讲，非常实用。
Ant Design Vue通过iconfont构建自定义图标库
八一菜刀的专栏
11-11 6623
虽然Ant Design Vue已经为我们内置了很多icon图标,我们很方便就能使用,但有时候有些图表我们还是系统能实现定义，本文主要介绍根据iconfont图标库创建自定义的icon图表,并在Ant Design Vue中使用 首先在iconfont里面将自己添加的图标添加到自定义项目后，下载压缩包，解压后你应该有如下结构： iconfont.css iconfont.eot iconfont...
使用 ant.design for vue 的tabs切换 G2图表遇到的问题
Salange1的博客
09-08 1336
今天在做一个a-tabs切换G2表格时遇到一个问题，从tabs第二个选项开始的图表都出不来，网上搜了半天 有各种解决办法，但是都没用，正准备放弃的时候，突然想到会不会是两个tab-pane下面的图表容器id相同导致的 果断试了一下，改成不同的id后成功了，第一次写博客，不知道咋写，就想记录一下此刻心情。直接上图吧： ps:猜测是因为使用循环生成tab-pane时，图表在页面初始化时就生成了，因为id的唯一性导致，菜鸡的猜测，错了就当没看见就行。 ...
Vue3.0+ant-design表格自定义展开图标和展开行操作
m0_56026872的博客
06-13 3263
1. vue3.0+ant-design+TypeScript 2. 表格之展开当前点击行，折叠其他行 3. 表格自定义展开图标
Ant Design中建立图表
caoyan0829的博客
04-01 5265
需求： 1.首先我们引入bizcharts ，这是官方推荐的 npm install bizcharts --save 2.页面引入，按需引入 import { G2, Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape, Facet, Util } from "bizcharts"; 3.编写...
Ant Design Pro 使用图表 charts bizcharts
a_靖的博客
01-09 1万+
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 淌了一下午坑，都是辛酸泪 总结：首先要知道， 它不能直接使用charts ，需要安装bizcharts 插件，然后导入bizcharts 中的charts； 点击跳转到 bizcharts 官方文档，建议看完整个流程再跳转 首先，安装bizcharts $ npm instal...
Vue-Ant Design Pro of Vue-数据表格组件S-Table的使用(一)
热门推荐
谷子的博客
05-30 4万+
Table 表格是我们平时在中后台系统中用到最多的组件之一了。在Ant Design Vue中，官方提供了一个Table 表格组件。我们先来介绍一下这个组件 Table 表格组件 https://vue.ant.design/components/table-cn 基础用法 分页组件，部分字段高亮特殊显示等等。详细使用请查阅文档。 筛选排序 当然也可以在列表上方做常规搜索，会在后面的S-Tab...
ant design of vue 使用教程
06-28
Ant Design of Vue 是一个基于 Vue.js 的 UI 组件库，它提供了一系列高质量的组件，可以帮助开发者快速构建美观、易用的 Web 应用程序。 使用 Ant Design of Vue，您需要先安装它。可以通过 npm 或 yarn 安装，具体...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值