react项目如何使用iconfont的方法步骤

项目中通常会使用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 (
  <i className={cls} {...others}/>
 );
};

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;
}

然后这样使用

 <Icons type={type} spin />

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • iOS中如何使用iconfont图标实例详解

    iOS中如何使用iconfont图标实例详解

    1.什么是iconfont iconFont拆开来看,就是 Icon + Font,这样估计大家应该都能理解是什么,那两者结合是什么呢?没错!就是 IconFont !让开发者像使用字体一样使用图标.如果自己不会做的话,可以直接去阿里的iconfont图标库下载自己需要的图标. 2.为什么要使用iconfont 在开发项目时,不可避免的会用到各种图标,为了适配不同的设备,通常需要@2x和@3x两套图,例如说我们tabBar上使用的图标.有些app有换肤的需要,还需要多套不同的图来进行匹配不同的主

  • 详解mpvue小程序中怎么引入iconfont字体图标

    前言 iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢? iconfont阿里巴巴矢量图标库 将图标加入购物车 搜索关键词可以是中文也可以是英文 下载素材 点击网站右上角的购物车图标,此处我们选第三个 ps:添加到项目很有用,可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等,此处我们选择加入项目并下载代码 文件解压 一般网页中为了兼容性考虑,我们会留下css/ttf/svg/woff/eot

  • 在vue项目中正确使用iconfont的方法

    1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3.下载至本地 4.把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下(可创建一个css文件或iconfont文件) 5.在main.js中引入iconfont.css样式 import './assets/iconfont/iconfont.css' 6.在在vue文件中引用<i class="iconfont icon-zitigui-xianx

  • iconfont的三种使用方式详解

    在我们项目中经常要使用到iconfont,在此我们使用阿里巴巴矢量库提供的icon图标,此图标库足够为我们提供大量的图标,我们首先需要的事在阿里巴巴矢量图标库新建一个自己的账号,并且新建一个项目,这个项目包含了你所有要用到的图标.我们需要选中需要的图标放到自己的项目中,并下载下来放到自己项目下的iconfont文件夹之下.(需要更新图标时,下载包也需要重新下载更新) 方式一:使用symbol方式(本质是用svg标签构成的) 第一步:为了代码更好的复用,我们封装一个svg-icon组件,代码如下:

  • iOS开发中使用文字图标iconfont的应用示例

    iOS开发中使用文字图标iconfont的应用示例

    在iOS的开发中,各种图标的使用是不可避免的,如果把全部图标做成图片放在项目中,那么随着项目的逐渐庞大起来,图片所占的地方就会越来越大,安装包也就随之变大了,如果图标需要根据不同的场景改变使用不同的颜色,那么,如果做成图片就需要多张不同颜色的图片,对于能更换皮肤的APP来说,安装包也就会更大,为了让APP的安装包瘦身,iconfont就产生了.关于iconfont的介绍与制作方式就暂时不进行介绍了. 第一步:获取iconfont文件. 公司会有UI做图,让他们提供文件就好了,如果自己学习测试或者

  • webpack中使用iconfont字体图标的方法

    入坑webpack,开始加载一些图片.js文件什么的都没有报错,今天正好下了iconfont字体,就出现了错误,所以这里分享一下怎么在webpack中使用iconfont. 1.修改css中字体文件路径 我把css和字体文件放在同级目录下 打开iconfont.css文件,原本的字体文件引用路径是用的css的方式,即下面图片中所示的 同级目录:直接用文件名 上一级目录:../ 但是,我们是在webpack环境下使用,所以要改成webpack引用规则,即改成下面图片所示 同级目录: ./ 上一级目

  • 微信小程序 如何引入外部字体库iconfont的图标

    如何引入外部字体库iconfont的图标,具体如下 直接使用阿里巴巴的网络路径 选择iconfont图标 官网:阿里巴巴矢量字体库 步骤:阿里巴巴字体库使用方法 全局引入app.wxss @font-face { font-family: 'iconfont'; /* project id 518032 */ src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot'); src: url('//at.alicdn.com/t/fo

  • react项目如何使用iconfont的方法步骤

    项目中通常会使用iconfont作为图标显示的解决方案,这里介绍下如何在项目中配置. 准备工作 首先配置好项目,关键需要注意FontClass/Symbol 前缀和Font Family两个配置. 当我们配置好项目之后,就可以导出样式文件,复制如下图中的css链接中的内容备用. 正餐开始 创建Icon.js文件. import React from 'react'; import classNames from 'classnames'; import './iconfont.less'; //

  • React项目如何使用Element的方法步骤

    React项目如何使用Element的方法步骤

    初次在react项目中使用element框架,碰到了一些很简单的问题,但是卡了很久才解决,写篇博客记录一下. 1.安装: 在项目目录下下载: npm i element-react --save npm install element-theme-default --save 注:element官网快速上手中有提到 2.全局引用 在项目跟录下的index.js中全局引入 3.在项目中引用你需要的element组件 可能会报错 解决方式:在项目中下载依赖npm install react-hot-

  • AndroidStudio上传本地项目到码云的方法步骤(OSChina)

    本文介绍了AndroidStudio上传本地项目到码云的方法步骤(OSChina),分享给大家,具体如下: 1.安装Git 2.注册oschina账户.设置ssh等等 在码云创建仓库 打开本地项目,添加Git管理 选你想要管理的目录,一般选项目最外层 此时所有的文件变成红色 右键项目名称点击git -> add 然后所有文件变绿色 点击提交 然后推送 复制你刚才在码云创建的地址,复制HTTPS的 定义默认的远程地址,点OK后输入密码 如果发现没有Define remote 可以在这里设置 点击

  • vue和小程序项目中使用iconfont的方法

    一.vue中使用iconfont 1.百度搜索iconfont或者阿里巴巴矢量图标库官网,注册登录: 2.找到图标管理->新建项目,或者使用已有的项目,用于保存自己的图标: 3.搜索自己需要的icon: 4.添加到购物车中: 5.购物车中就有了相应icon 6.点击购物车,选择添加至项目.就是我们刚才创建的项目或者之前已有的项目 7.点击确定,即可将icon添加到我们的项目中 8.然后点击我的项目,找到自己的项目,即可看到刚才添加的icon 9.点击下载至本地 10.将下载的压缩包进行解压 11

  • IDEA使用Docker插件远程部署项目到云服务器的方法步骤

    IDEA使用Docker插件远程部署项目到云服务器的方法步骤

    1. 打开2375端口 编辑docker.service vim /lib/systemd/system/docker.service 在 ExecStart 后添加配置 -H tcp://0.0.0.0:2375 -H unix://var/run/docker.sock 重启docker网络和docker systemctl daemon-reload systemctl restart-docker Centos7 开放端口 firewall-cmd --zone=public --add

  • docker部署crownblog项目到阿里云的方法步骤

    docker部署crownblog项目到阿里云的方法步骤

    前端项目打包 找到.env.production 修改为自己的ip或者域名地址 执行命令npm run build生成dist文件 把dist文件拷贝到后端项目目录下(使用go自带的http服务来部署前端项目) 后端项目部署 一.服务器的配置 购买阿里云服务器 打开服务器的8085和3306端口 使用Xshell登陆服务器 二.安装docker 官方文档: docs.docker.com/get-docker/ 选择对应的系统进行查看,以ubuntu 18.04 LTS为例 卸载旧版本 sudo

  • vue项目打包发布上线的方法步骤

    vue项目打包发布上线的方法步骤

    目录 一.开发环境到生产环境的转变 二.设置统一的请求路径 三.运行打包命令 vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-cli脚手架生成的项目为例) 一.开发环境到生产环境的转变 项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发路径切换为线上路径. 打开项目中config文件夹里面的 dev.env.js 文件,将后端给的线上路径填入. 'use strict' module.exports = { NODE_E

  • GoLand一键上传项目到远程服务器的方法步骤

    GoLand一键上传项目到远程服务器的方法步骤

    我们开发项目常常将项目上传到linux远程服务器上来运行,查看日志等等,每次连接终端输入命令上传文件总是很烦,最近正好在学go开发项目,用到了goland,整理一下我的配置的步骤分享一下 一.tools->deployment->configuration 二.弹出框点击左上角+号,选择SFTP,弹出框输入一个名字就好了 三.填入ssh configuration,这个就是你用ssh连接的linux的那个名字 例如:zhangsan@10.123.123.13 然后点击test connect

  • GO项目配置与使用的方法步骤

    GO项目配置与使用的方法步骤

    目录 一.Go版本以及GoLand版本 二.环境配置 三.GoLand项目创建 方案一:使用第一种Go(Go modules)创建项目 这里的Go(SDK).GoLand的安装就不多说了,网上自行下载,我们着重讲项目配置,import pkg时能够完美运行 一.Go版本以及GoLand版本 Go版本--------我这里是 Go1.18 GoLand版本--------我这里是2021.2 二.环境配置 在Go开发中,需要配置哪些环境变量 环境量 说明 GOROOT 指定SDK(GO)的安装路径

  • 快速将Vue项目升级到webpack3的方法步骤

    快速将Vue项目升级到webpack3的方法步骤

    前言 由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能对比,如下: 测试目标 以下数据是2天随机时段3部手机各2组数据,每组数据都是30次取平均值,为了测试js的解析能力,排除了网络请求的影响 平台:M5 Note Build/MRA58K 系统:android 6.0 时间 before after 2017-08-10 13:00 920 5

随机推荐