开发前端页面,经常会有很多共用的图标icon,那么我们把它单独做成组件,以便后期重复调用!

首先在components 的icons文件夹下创建BaseIcon.js文件。

我们需要先在命令行安装glamorous 和 prop-types

npm install glamorous 或者 yarn add glamorous

prop-types我们就不多做介绍了,glamorous是我们调用svg并改变path的属性时比较重要的插件了。

BaseIcon.js具体内容如下:

import React from 'react';
import PropTypes from 'prop-types';
import glamorous from 'glamorous'; class BaseIcon extends React.PureComponent {
 //定义属性类型
static propTypes = {
SvgIcon: PropTypes.func.isRequired,
color: PropTypes.string,
circleColor: PropTypes.string,
fontSize: PropTypes.string,
}; static defaultProps = {
color: '', //字体颜色
circleColor: '#76829E', //多层path时背景颜色
}; render() {
const {
color, SvgIcon, circleColor, fontSize,
} = this.props;
if (color === '' && circleColor === '') {
return (<SvgIcon {...this.props} />);
} const WrappedSvgIcon = glamorous(SvgIcon)({
'> path': {
fill: color,
width: fontSize, //设置fontSize来改变svg的大小
height: fontSize, //设置fontSize来改变svg的大小
},
'> circle': {
fill: circleColor, //设置带圆背景的icon 圆的颜色,下面会给您截图介绍
},
}); return (<WrappedSvgIcon {...this.props} />);
}
} export default BaseIcon;

区分一下单色icon 和 带圆的多色icon,图下:

序号1中,带圆底色的心形icon 为多色icon,需要传两个颜色。 序号2中 为单色icon ,只需要传一个颜色就可以

新建单色icon的js文件 如Check.js 跟BaseIcon.js并列(只用color来控制颜色的)注意:我们的svg icon都是20*20大小

import React from 'react';
import { Svg, Path } from 'glamorous'; import BaseIcon from './BaseIcon'; // eslint-disable-line const BaseSvg = props => (
<Svg width="1em" height="1em" viewBox="0 0 20 20" {...props}>
<Path fillRule="evenodd" d="M7.288 14.022L3.34 10.074 2 11.414l5.288 5.288L18.65 5.34 17.31 4z" />
</Svg>
); export default props => (
<BaseIcon
{...props}
SvgIcon={BaseSvg}
/>
);

添加其他单色icon时 只需要 覆盖fillRule 和 d中的内容 就可以了!

带圆多色icon js文件(同样很BaseIcon.js并列就可以)如下:

import React from 'react';
import { Svg, Path, Circle } from 'glamorous'; import BaseIcon from './BaseIcon'; // eslint-disable-line const BaseSvg = props => (
<Svg width="1em" height="1em" viewBox="0 0 20 20" {...props}>
<Circle cx="9" cy="9" r="9" />
<Path fillRule="evenodd" d="M9.1 6.283c-.61-1.156-1.787-1.668-3.133-1.43-1.814.32-2.676 2.276-1.855 4.158.928 2.127 3.047 3.63 4.988 4.777 1.94-1.148 4.06-2.65 4.988-4.777.821-1.882-.04-3.837-1.855-4.158-1.346-.238-2.523.274-3.133 1.43z" />
</Svg>
); export default props => (
<BaseIcon
{...props}
SvgIcon={BaseSvg}
/>
);

新增的Circle属性 就是背景圆。

icon js文件创建好后,关于icon组件的调用:

单色组件调用如下图:

多色圆icon组件调用:(调用方法都一样,只不过比单色icon多了一个circleColor属性来控制圆的颜色)

这样 , 公共icon组件就完成了,纯属个人见解,希望对您有帮助...

react中将svg做成icon组件在其他模块调用的更多相关文章

  1. react使用引入svg的icon;svg图形制作

    由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...

  2. VUE -- 如何快速的写出一个Vue的icon组件?

    伴随着Vue的诞生,它似乎就被人寄予厚望,不仅仅是因为其轻量级的MVVM设计方式,而且其实现了组件化开发模式,所以越来越多的人会拿Vue和AngularJS.React Native做比较.具体关于它 ...

  3. React的JSX语法及组件

    最近一个同事很急没有做任何交接就请了陪产假,然后我来维护.说实在的我一开始是一脸懵逼的.因为MV*项目里用的最多的还是Vue:React听说也了解过,但毕竟不熟... 不过不管如何这也是工作:同事也恭 ...

  4. React 深入系列1:React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

  5. React 深入系列2:组件分类

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列2:组件分类 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加 ...

  6. React 深入系列4:组件的生命周期

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列4:组件的生命周期 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助 ...

  7. React(17)异步组件

    26.异步组件当在React里使用异步组件时,核心知识是两个: webpack 如何异步加载其他模块:通过 require(['xxx'], function(module){})来实现:React ...

  8. ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别

    ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...

  9. React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

随机推荐

  1. Nmap的一些常用的nse脚本

    转自freebuf.com/  点击跳转 在这篇文章中,我们将研究最著名的渗透工具之一 Nmap 一款标志性的跨平台扫描器.它的原意为Network Mapper(网络映射器),具有相当强大的扫描功能 ...

  2. Vim 自定义补全利器 Snippet

    Vim Snippet 设置 本人是 vim 用户,可以说能不用 IDE 就不用 IDE. Snippet 是一种支持用户自定义补全的需求,在 vim 中,可以使用 UltiSnips 和 Vim-S ...

  3. 转:java 看好的一些书

    地址 :  http://www.cnblogs.com/xrq730/p/4994545.html

  4. 来了!GitHub for mobile 发布!iOS beta 版已来,Android 版即将发布

    北京时间 2019 年 11 月 14 日,在 GitHub Universe 2019大会上,GitHub 正式发布了 GitHub for mobile,支持 iOS 与 Android 两大移动 ...

  5. 过滤广告(只能发布 [a-zA-z0-9及汉字,;?.]) ,排除其他特殊符号

      /** * 过滤广告(只能发布 [a-zA-z0-9及汉字,;?.]) ,排除其他特殊符号 * Created by 1 on 2015/8/19. */ public class FilterA ...

  6. Jenkins 与Docker/Kubernetes的自动化CI流水(笔记)

    一.CI/CD 持续集成(continuous Integration,CI):代码合并.构建.部署.测试都在一起.不断执行这个过程,并对结果反馈. 持续部署(Continuous Deploymen ...

  7. linux/ubuntu下最简单好用的python opencv安装教程 ( 解决 imshow, SIFT, SURF, CSRT使用问题)

    希望这篇文章能彻底帮你解决python opencv安装和使用中的常见问题. 懒人请直奔这一节, 一条命令安装 opencv 使用python-opencv常用的问题 在linux中使用python版 ...

  8. 『嗨威说』算法设计与分析 - 贪心算法思想小结(HDU 2088 Box of Bricks)

    本文索引目录: 一.贪心算法的基本思想以及个人理解 二.汽车加油问题的贪心选择性质 三.一道贪心算法题点拨升华贪心思想 四.结对编程情况 一.贪心算法的基本思想以及个人理解: 1.1 基本概念: 首先 ...

  9. 如何在 PHP 和 Laravel 中使用 Traits

    事实上,PHP 作为一门编程语言存在的问题之一,就是你只能使用单继承.这意味着一个类只能从另一个类中继承.例如,可能希望从几个不同的类继承方法,以防止代码重复.在 PHP 5.4 中 一个新的语言特性 ...

  10. Linux运维利器之ClusterShell

    一.简介 实验室机房有大概百台的服务器需要管理,加上需要搭建Hadoop以及Spark集群等,因此,一个轻量级的集群管理软件就显得非常有必要了.经过一段时间的了解以及尝试,最终选择了clustersh ...