摘要:项目中通常会使用作为图标显示的解决方案,这里介绍下如何在项目中配置。准备工作首先配置好项目,关键需要注意前缀和两个配置。当我们配置好项目之后,就可以导出样式文件,复制如下图中的链接中的内容备用。正餐开始创建文件。
项目中通常会使用iconfont作为图标显示的解决方案,这里介绍下如何在项目中配置。准备工作
首先配置好项目,关键需要注意FontClass/Symbol 前缀和Font Family两个配置。
当我们配置好项目之后,就可以导出样式文件,复制如下图中的css链接中的内容备用。
正餐开始创建Icon.js文件。
import React from "react"; import classNames from "classnames"; import "./iconfont.less"; // 上文中从iconfont中复制的css文件内容 import "./icon.css"; const Icons = (props) => { const {type, spin, className = "", ...others} = props; const cls = classNames({ "unovo-iconfont": true, [`unovo-iconfont-${type}`]: true, "unovo-iconfont-spin": !!spin, }, className); return ( ); }; export default Icons;
创建iconfont.less。
@keyframes icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @iconfont-css-prefix: unovo-iconfont; .@{iconfont-css-prefix}-spin:before { display: inline-block; animation: icon-spin infinite 1s linear; }
然后这样使用
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/117516.html
摘要:项目中通常会使用作为图标显示的解决方案,这里介绍下如何在项目中配置。准备工作首先配置好项目,关键需要注意前缀和两个配置。当我们配置好项目之后,就可以导出样式文件,复制如下图中的链接中的内容备用。正餐开始创建文件。 项目中通常会使用iconfont作为图标显示的解决方案,这里介绍下如何在项目中配置。 准备工作 首先配置好项目,关键需要注意FontClass/Symbol 前缀和Font ...
摘要:没关系,笔者已经为你们准备好了,请保存到文件中,假设你的文件名叫和你刚才保存的字体文件在一起,方便管理复制字体这个插件包有好多套字体,我们可以需要把自己的也复制到包中对应文件夹,当然了,不可能手动复制,笔者从来都是解放双手的。 字体图标盛行的年代,在项目里使用一套不失真又可以随意改变大小颜色的图标,是多么舒服的一件事。这里要推荐iconfont.cn,超多免费图标,当然了,你的专属美工...
摘要:查阅部分文件,找到相关资料,发现是在纯页面中导入是完全的。但是请注意,咱们将静态资源放置在目录下,中的不可采用。于是,正确做法如下在文件下的或者等文件中写入如下语句即可。第四步介绍使用方法待我研究去吧。。。 hello,各位小伙伴们,很久没写文章了。突然要自己搭建项目了,项目中对于阿里巴巴iconfont的使用,大家都清楚吗? 第一步:将图标加入购物车 showImg(https://...
摘要:查阅部分文件,找到相关资料,发现是在纯页面中导入是完全的。但是请注意,咱们将静态资源放置在目录下,中的不可采用。于是,正确做法如下在文件下的或者等文件中写入如下语句即可。第四步介绍使用方法待我研究去吧。。。 hello,各位小伙伴们,很久没写文章了。突然要自己搭建项目了,项目中对于阿里巴巴iconfont的使用,大家都清楚吗? 第一步:将图标加入购物车 showImg(https://...
阅读 3163·2023-04-26 03:06
阅读 3675·2021-11-22 09:34
阅读 1119·2021-10-08 10:05
阅读 3004·2021-09-22 15:53
阅读 3446·2021-09-14 18:05
阅读 1316·2021-08-05 09:56
阅读 1782·2019-08-30 15:56
阅读 2103·2019-08-29 11:02