「React组件封装」「实例」FontAwesome图标组件封装

yuyutoo 2024-10-12 01:15 6 浏览 0 评论

FontAwesome是前端开发常用了一种图标字体。

在React中使用可以使用对应的库，但是感觉不怎么好用。

另一种方式就是通过import 'font-awesome.min.css'，然后

i class="fa fa-times" ></i>

这种使用方式缺点是每次需要引入 font-awesome.min.css，但是如果忘记引入，而且前置页面引入了，有时候也能正常显示，但是如果前置页面没有引入，显示就不正常了。所以即使出现问题了，也不容易发现。

所以如果要封装这个组件，css需要在组件内部引入。(如果使用了webpack的css模块化，这个css文件需要排除)

于是：（预留props：name、color、size、larger、className和其他）

import React, { PureComponent } from 'react';
import '../../../common_css/font_awesome/css/font-awesome.min.css'
 
class Icon extends PureComponent {
 constructor(props) {
 super(props);
 }
 
 render() {
 const {name, color, size, className, larger, ...others} = this.props
 let the_class_name = "fa fa-"+name
 if (className) {
 the_class_name += ' '+className
 }
 if (larger) {
 the_class_name += ' '+'fa-'+larger
 }
 return (
 <i className={the_class_name}
 style={{
 color: color, 
 fontSize: size,
 }}
 {...others}
 >
 {this.props.children}
 </i>
 );
 }
}
 
export default Icon;

fontawesome

上一篇：如何在Axure RP 8 中规范使用 Font Awesome 图标库完成设计
下一篇：一次客户沟通后，我悟出了「B端图标」若干设计点

「React组件封装」「实例」FontAwesome图标组件封装

相关推荐

取消回复欢迎你发表评论:

前端面试:iframe 的优缺点? iframe有那些缺点

带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?

漫学笔记之PHP.ini常用的配置信息

[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗

其实模版网站在开发工作中很重要，推荐几个参考站给大家

推荐7个模板代码和其他游戏源码下载的网址

正在学习使用python搭建自动化测试框架?这个系统包你可能会用到

织梦(Dedecms)建站教程织梦建站详细步骤

2024PHP在线客服系统源码+完全开源带详细搭建教程

【开源分享】2024在线客服系统PHP源码(安装教程+全新UI)

「React组件封装」「实例」FontAwesome图标组件封装

相关推荐

取消回复欢迎 你 发表评论:

前端面试:iframe 的优缺点? iframe有那些缺点

带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?

漫学笔记之PHP.ini常用的配置信息

[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗

其实模版网站在开发工作中很重要，推荐几个参考站给大家

推荐7个模板代码和其他游戏源码下载的网址

正在学习使用python搭建自动化测试框架?这个系统包你可能会用到

织梦(Dedecms)建站教程 织梦建站详细步骤

2024PHP在线客服系统源码+完全开源 带详细搭建教程

【开源分享】2024在线客服系统PHP源码(安装教程+全新UI)

取消回复欢迎你发表评论:

织梦(Dedecms)建站教程织梦建站详细步骤

2024PHP在线客服系统源码+完全开源带详细搭建教程