一、将选好的图标加入购物车

二、点击购物车

三、添加至项目

四、添加至选择的项目

五、找到“我的项目”下的symbol

可以看到这里有你刚刚添加的图标

六、点击“复制代码”

会生成一个链接：//at.alicdn.com/t/c/font_3567515_xmfi410loyq.js

七、在React代码中添加如下代码

引入createFromIconfontCN ，注意：确保你已经npm install antv

import { createFromIconfontCN } from '@ant-design/icons';

在render函数内定义IconFont变量

const IconFont = createFromIconfontCN({scriptUrl: [//下面是你在阿里矢量图官网复制的那个链接'//at.alicdn.com/t/c/font_3567515_xmfi410loyq.js', // icon-javascript, icon-java, icon-shoppingcart (overrided)],});

使用IconFont，type的内容就是图标的名称

<IconFont type="icon-yanjing" style={{fontSize:'25px',color:mouse?'white':'rgb(233,123,1)'}} />

八、我的完整示例代码

import React, { Component } from 'react'
import { RiseOutlined } from '@ant-design/icons';
import { Divider } from 'antd';
import { createFromIconfontCN } from '@ant-design/icons';export default class Card extends Component {state = {mouse: false,}handleMouse = (flag) => {return () => {this.setState({mouse: flag})}}render() {const mouse = this.state.mouseconst IconFont = createFromIconfontCN({scriptUrl: ['//at.alicdn.com/t/c/font_3567515_xmfi410loyq.js', // icon-javascript, icon-java, icon-shoppingcart (overrided)],});return (<div style={{ height: '100%', padding: '20px', textAlign: 'left', backgroundColor: mouse ? 'rgb(67,143,254)' : 'white' }} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>{/* top */}<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}><div style={{ width: '30px', height: '30px',lineHeight:'35px',textAlign:'center', backgroundColor: mouse ? 'rgb(85,154,254)' : 'rgb(244,249,241)' }}><IconFont type="icon-yanjing" style={{fontSize:'25px',color:mouse?'white':'rgb(233,123,1)'}} /></div><RiseOutlined style={{ fontSize: '40px', color: mouse ? 'white' : 'rgb(134,192,133)' }} /></div>{/* tag */}<div style={{ marginTop: '-5px' }}><p style={{ fontSize: '12px', color: mouse ? 'white' : 'rgb(200,204,213)' }}>Total Views</p></div>{/* number */}<div style={{ marginTop: '-10px' }}><p style={{ fontSize: '20px', fontWeight: 'bolder', color: mouse ? 'white' : 'black' }}>308.402</p></div>{/* 分割线 */}<div style={{ marginTop: '-12px' }}><Divider style={{ color: 'white' }} /></div>{/* difference */}<div style={{ marginTop: '-18px' }}><p style={{ fontSize: '10px', color: mouse ? 'white' : 'rgb(200,204,213)' }}>Start at 1 Jan 2021</p></div></div>)}
}

如果觉得有用，就收藏加关注吧！

【React】【Ant Design】引入阿里矢量图相关推荐

小程序引入阿里矢量图
大家好,又和大家见面了,今天给大家分享的是小程序如何引入阿里矢量图库,现在想想已近迫不及待拉吧,那么大家跟我来吧! 1.准备:阿里矢量图 http://iconfont.cn/help/detail? ...
vue项目中如何引入阿里矢量图
1.首先去阿里矢量图官网 https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&ty ...
如何引入阿里矢量图的具体方法(一首歌的时间即可学会)
关于阿里矢量图引入的具体方法第一步:去官网阿里巴巴矢量图标库拿头像来举例,如下图所示,将鼠标放在图标上面会有三个选项点击加入购物车,点击(下载代码). 保存到你已经新建好的文件夹.然后解压文件. ...
uni-app线上引入阿里矢量图
1.登录阿里矢量图,选择自己想要的图标,创建项目,并添加到项目中. 2.打开图标管理---我的项目---我发起的项目,选择查看在线链接(若添加新图标需要重新生成在线链接,并替换). 3.复制代码,打开 ...
uni-app引入阿里矢量图在移动端不显示的问题
1.uni-app引入字体图标是不支持本地的, 所以在调用的时候直接复制阿里的在线图标粘贴到vue.app下的style下: 请求头!!!一定要加
在uni-app当中引入本地图片注意事项以及阿里矢量图iconfont.css当中文件查找失败:‘./iconfont.eot解决办法
一.uni-app及其vue项目中引入阿里矢量图iconfont.css无法找到 ./iconfont.eot?t=1606800914535,应该使用绝对路径使用绝对路径二.uni-app引入本 ...
阿里矢量图引入的具体方法，详解！
很多刚入门的小白写站的时候都会碰到一个问题,不知道怎么引入矢量图,今天拿阿里矢量图来给大家简单分享一下具体的方法. 首先,去官网找到你所需要的的图标,拿购物来举例,,如图,将鼠标放到上面会有三个选项, ...
阿里矢量图刷新显示异常
在vue中使用阿里矢量图遇到了刷新丢失问题一开始我使用的是在根html中引入的方式, <link rel="stylesheet" href="./font/ic ...
使用create-react-app搭建TypeScript+React+Ant Design开发环境
一.使用create-react-app创建一个支持TypeScript+React的开发环境: 要创建一个支持TypeScript的Create React App项目,可以运行: npx crea ...

【React】【Ant Design】引入阿里矢量图

一、将选好的图标加入购物车

二、点击购物车

三、添加至项目

四、添加至选择的项目

五、找到“我的项目”下的symbol

六、点击“复制代码”

七、在React代码中添加如下代码

八、我的完整示例代码

【React】【Ant Design】引入阿里矢量图相关推荐

最新文章

热门文章