react中将svg做成icon组件在其他模块调用
开发前端页面,经常会有很多共用的图标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组件在其他模块调用的更多相关文章
- react使用引入svg的icon;svg图形制作
由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...
- VUE -- 如何快速的写出一个Vue的icon组件?
伴随着Vue的诞生,它似乎就被人寄予厚望,不仅仅是因为其轻量级的MVVM设计方式,而且其实现了组件化开发模式,所以越来越多的人会拿Vue和AngularJS.React Native做比较.具体关于它 ...
- React的JSX语法及组件
最近一个同事很急没有做任何交接就请了陪产假,然后我来维护.说实在的我一开始是一脸懵逼的.因为MV*项目里用的最多的还是Vue:React听说也了解过,但毕竟不熟... 不过不管如何这也是工作:同事也恭 ...
- React 深入系列1:React 中的元素、组件、实例和节点
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...
- React 深入系列2:组件分类
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列2:组件分类 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加 ...
- React 深入系列4:组件的生命周期
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列4:组件的生命周期 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助 ...
- React(17)异步组件
26.异步组件当在React里使用异步组件时,核心知识是两个: webpack 如何异步加载其他模块:通过 require(['xxx'], function(module){})来实现:React ...
- ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别
ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...
- React中的高阶组件,无状态组件,PureComponent
1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...
随机推荐
- 使用Bind提供域名解析服务(反向解析)
小知识: 一般来讲域名比IP地址更加的有含义.也更容易记住,所以通常用户更习惯输入域名来访问网络中的资源,但是计算机主机在互联网中只能通过IP识别对方主机,那么就需要DNS域名解析服务了. DNS域名 ...
- 视口viewport与单位rem的本质
结论: 视口viewport的设置是为了让字的显示在不同的屏幕下保持一致. 单位rem的使用是为了让页面中的布局元素的比例在不同的屏幕下显示的比例保持一致. 现象: 我们看电脑时候的网页的时候的字体大 ...
- Java 干货之深入理解Java泛型
一般的类和方法,只能使用具体的类型,要么是基本类型,要么是自定义的类.如果要编写可以应用多中类型的代码,这种刻板的限制对代码得束缚会就会很大. ---<Thinking in Java> ...
- 如何做seo优化才能获取搜索引擎排名?
现在网络上有很多网站,但是排名和流量都不理想,所以很多企业会很苦恼.所以我们经常思考如何使网站被搜索引擎喜欢,被用户喜欢,有一个良好的排名和流量? 在这个鱼龙混杂的网络中,seo优化实际上是seo网站 ...
- Asp.net Core 系列之--1.事件驱动初探:简单事件总线实现(SimpleEventBus)
ChuanGoing 2019-08-06 前言 开篇之前,简单说明下随笔原因.在园子里游荡了好久,期间也起过要写一些关于.NET的随笔,因各种原因未能付诸实现. 前段时间拜读daxnet的系列文章 ...
- day 2上午 elect 选举 背包
#include<iostream> using namespace std; int n; ; ]; long long p[maxn]; long long dp[maxn][maxn ...
- html5基本页面
html5基本页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- C# web项目中sql数据库转sqlite数据库
最近做了一个小网站,用到了一个使用sql server 2005的.net cms系统,但是现在我所买虚拟主机的服务商,不给虚拟主机提供sql server服务了,那就转数据库吧,转啥好呢,思来想去, ...
- UML简明使用
1.继承 空心三角+实线 2.实现接口 空心三角+虚线 3.关联 箭头+实线 4.聚合 空心菱形+实线+箭头 5.组合 实心菱形+实线+箭头 6.依赖 虚线+箭头 7.关联.聚合.组合.依赖的区别 关 ...
- UML:类图关系总结
UML类图几种关系的总结,泛化 = 实现 > 组合 > 聚合 > 关联 > 依赖在UML类图中,常见的有以下几种关系: 泛化(Generalization), 实现(Reali ...