摘要：项目中通常会使用作为图标显示的解决方案，这里介绍下如何在项目中配置。准备工作首先配置好项目，关键需要注意前缀和两个配置。当我们配置好项目之后，就可以导出样式文件，复制如下图中的链接中的内容备用。正餐开始创建文件。
项目中通常会使用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://...
阅读 3188·2023-04-26 03:06
阅读 3687·2021-11-22 09:34
阅读 1132·2021-10-08 10:05
阅读 3022·2021-09-22 15:53
阅读 3529·2021-09-14 18:05
阅读 1385·2021-08-05 09:56
阅读 1878·2019-08-30 15:56
阅读 2123·2019-08-29 11:02
