ant design of vue 中引入iconfont

最新推荐文章于 2023-10-08 18:39:53 发布
最新推荐文章于 2023-10-08 18:39:53 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： ant design of vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43899943/article/details/111315121
版权

ant design of vue 中引入iconfont

  1. 在阿里巴巴矢量库创建项目，添加图标，下载项目的zip文件
  2. 将zip包解压，解压的iconfont.js文件放到vue项目中
  3. 在需要使用图标的vue组件的script中：
// 引入项目中的 iconfontjs 文件
import iconfontjs from "../../assets/iconfont/iconfont.js";
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconfontjs,
});

components:{
	IconFont 
}
  1. 然后就可以开始使用iconfont了：
<icon-font type="icon-katongxiaolian" />二刺螈

在这里插入图片描述

IDeaL乄
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于 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 导入功能。这个功能主要是使用 Ant Design Vue 中的 upload 组件来实现导入 excel 文件的功能。 标题： SpringBoot+AntDesignVue 实现 ...
Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战
JEECG官方博客
07-15 9496
JeecgBoot实战 - 引入 ant-design-vue 按需加载方案，减少前端项目大小
解决VUE3使用Ant-Design的图标组件＜a-icon＞使用报错，自己做个＜b-icon＞
学习使我快乐_玉祥
04-04 6855
浏览器控制台报错：不识别a-icon 网上推荐使用循环遍历每一个组件，进行注册 在main.js写这个循环，多少有点奇怪 并且我在下方这行代码就已经报错了，不太懂这个语法。 const icons: any = Icons; 一筹莫展之际，我决定自己写一个a-icon组件。 <template> <span ref="icon" v-html="code" style="width:25px;height:25px;overflow:hidden;">.
基于vue3 + ant-design 自定义SVG图标iconfont的解决方案；ant-design加载本地iconfont.js不显示图标问题
DJCBPL的专栏
09-19 2600
基于vue3 + ant-design 自定义SVG图标iconfont的解决方案；ant-design加载本地iconfont.js不显示图标问题，加载本地资源不成功问题
ant design vue 1.x版本使用iconfont
sj_wl的博客
11-15 1324
本文记录了ant design vue引入iconfont并使用的过程。其中ant design vue为1.x版本。iconfont引用方式为Symbol引用。icon图标注册为全局组件使用。
在ant-design-vue中使用iconfont
qq_43244452的博客
04-11 1741
1、把想要使用的图标添加入库 点击下面的购物车图标，就可以看到想要添加的图标了 2、把图标添加至项目 如果没有项目，就新增项目 3、将图标下载到本地 4、解压下载的文件，里面有一个iconfont.js 5、将iconfont.js文件放到项目中 6、在组件中导入并使用 只有添加到项目的图标才能使用，没有添加到项目的图标是不能用的 <template> <div> <icon-font type="icon-fuwu" /> </di
ant design of vue.zip
07-02
"ant design of vue.zip" 是一个包含Ant Design Vue库的压缩包，它是基于Vue.js框架的前端组件库，由阿里蚂蚁金服团队开发。Ant Design Vue致力于提供一套高质量的UI解决方案，使得开发者能够快速构建美观且功能丰富...
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
Ant Design of Vue v1.7.2 使用教程.pdf
05-23
Ant Design vue v1.7.2 离线文档
VUE3 使用 Ant Design Vue的icon图标
weixin_42902260的博客
04-21 5950
安装： npm install --save @ant-design/icons-vue 2.在main入口文件引入，不想一个个一得导入，可直接循环导入即可 import { createApp } from 'vue' import App from './App.vue' import router from './router' import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' import * as .
vue中使用iconfont
m0_61472704的博客
03-03 1823
方法一 1.找到iconfont官网 2.找到“我的项目” 两种情况： ① 如果有UI已经新建了项目，设计好了图标，就叫他把里加进项目里，你就能看到你们组的项目图标 ② 如果你是自己想用，那就自己新建一个项目，从阿里自带的图表库里把想要的图标加到购物车，然后添加到你的项目里，就像这样： 3.下载项目，并引入 用iconfon命名文件夹，把他们装起来放到assets下，在main.js里引入iconfont.css import '@/assets...
antdesign 动态引入icon
R的博客
02-16 2525
第一步: 创建一个icon.js文件,写一个自定义组件 // ICON.js import { createVNode } from 'vue' import * as $Icon from '@ant-design/icons-vue' export const Icon = props => { const { icon } = props; return createVNode($Icon[icon]); }; 第二步: 视图中引入即可 注意: 引入的icon必须为大写 <t
前端学习（3339）：ant design中加上icon图标
歌谣的博客
09-17 2081
当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。 如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。 ReactDOM.render( <div> <Button type="primary" shape="circle" icon="search" /> <Button type="primary" shape="circle"> .
vue3按需引入Ant Design icon
FormAda的博客
11-30 3599
1.使用Ant Design图表库中的图标 1.1安装 npm install --save @ant-design/icons-vue 1.2修改文档版本 vue3项目使用2.x或3.x。 1.3 使用 （1）点击复制代码 （2）将复制的代码粘贴在你要使用的地方 （3）在script中引入 import { UserOutlined } from '@ant-design/icons-vue'; （4）若使用了setup语法糖即到此结束，没有使用则需要在c...
vue3使用Ant Design Vue库时全局引入iconfont图标
最新发布
qq_49074952的博客
10-08 712
3.在页面需要使用的地方这样使用，其中type为iconfont对应的。1.点击iconfont图标库生成连接，将连接内容保存到本地。2.在main.ts文件中添加以下代码。
ant-design-vue按需引入icon以及组件
热门推荐
你华还是你华
05-12 2万+
大家好，我是Counterrr。 不忘初心 ，砥砺前行。共勉。
Ant Design Vue 组件或图标的引入和使用
WangYan的博客
07-21 2373
AntDesignVue组件或图标的引入和使用。
在antd项目中以Symbol方式引用IconFont图标
大唐锦绣的博客
07-15 2148
前言：IconFont官方有三种引入方式供你选择：SVG Symbol、Unicode 及 Font class。我们推荐在现代浏览器下使用 SVG Symbol 方式引入。SVG 符号引入是现代浏览器未来主流的图标引入方式。其方法是预先加载符号，在合适的地方引入并渲染为矢量图形。有如下特点： 支持多色图标，不再受到单色图标的限制 通过一些技巧，支持像字体那样，通过 font-size、color 来调整样式 支持IE 9+ 及现代浏览器 一、生成图标库代码 首先，搜索.
ant-design 的icons怎么引入到vue3
07-13
要在 Vue 3 中使用 Ant Design 的 Icons，你可以按照以下步骤进行引入： 1. 首先，使用 npm 或者 yarn 安装 `@ant-design/icons-vue`： ``` npm install @ant-design/icons-vue ``` 或 ``` yarn add @ant-design/...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值