React 引入阿里矢量图标方法

首选将选择好的图标添加入购物车

跳转页面如下,

如图所示,选择 Symbol, 然后点击查看在线链接.
3:
点击生成相关图片的scriptUrl 参数,如下图.注意生成的路径参数中开头的两个斜杠 : “//” 不能丢.

在React中引入,语法如图所示:
变量名称: IconFont 为自定义,可随意指定.

然后在 JSX中使用:

注意: 这里的 IconFont 的属性 type的值也是从阿里图库图标上获取的.如下图,将鼠标放在当前你选择的图上,显示如下.

此时即可生效了.

总结:
语法就两个;
1: let IconFont = Icon.createFromIconfontCN({scriptUrl: ‘//at.alicdn.com/t/font_xxxxxxx_4dbffeyrjrl.js’,});
2: <IconFont type='icon-shangchuan-tianchong'/>

React 引入阿里矢量图标方法相关推荐

前端react引入阿里矢量图标
搜索项目所需的图标选中喜爱的图标并点击加入购物车 (记得登录注册用户) 点击下载素材(根据所需下载) 选中所需颜色下载图片或者代码并引入到项目中
在uni-app里面怎么引入阿里矢量图标库？
最近在学习uni-app,每次在需要用到icon的时候都得下载下来,感觉好麻烦,所以就找到了直接引入阿里矢量图标库的方法,妈妈再也不用担心我为下载icon的样式不规范而发愁了,以下方法供大家参考在图 ...
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历首先在阿里矢量图标库选择自己喜欢的图标加购物车如下图点击右上角的购物车添加到项目这里有坑首先你不选中在线链接你是看不到 @font-f ...
Vue项目中，引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...
react引入阿里字体图标iconfont
移动端开发过程中,字体图标几乎是不可缺的,本文将介绍如何使用阿里字体图标,已方便练手的时候使用. 第一步:制作字体图标 1.首先进入阿里巴巴矢量图网站:http://www.iconfont.cn/ ...
H5引入阿里矢量图标(Symbol)
觉得文字枯燥的,观看我发布在B站的视频: https://www.bilibili.com/video/BV1zp4y1176J?from=search&seid=94031151986432 ...
自己摸索阿里矢量图标iconfont的用法之阿里图标怎么用（最简单）（多图预警）
话不多说,直接先上干货. 第一部分:阿里图标iconfont怎么用. 1,登录阿里图标官网 https://www.iconfont.cn/ 2,登录. 没号可以先注册.用微博或者GitHub登录的. ...
阿里矢量图标iconfont在微信小程序的使用
阿里矢量图标iconfont在微信小程序的使用第一步:进入官网: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 ...
阿里矢量图标(字体图标)使用
一.阿里矢量图标(字体图标) 网址:https://www.iconfont.cn/ #### 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...

React 引入阿里矢量图标方法

React 引入阿里矢量图标方法

React 引入阿里矢量图标方法相关推荐

最新文章

热门文章