React优雅的封装SvgIcon组件示例
React如何优雅的封装SvgIcon组件
相信使用过vue
的伙伴们,或多或少都接触或使用过vue-element-admin
,其中许多封装都不禁让人拍案叫绝,因为本人之前是vue
入门前端的,所以对vue-element-admin
许多封装印象深刻,现在从vue
转react
之后,一直想把vue-element-admin
里面的封装组件复刻到react
当中使用,这次是SvgIcon
组件的react
封装版本;
第一步:安装svg-sprite-loader
- npm 安装
npm i svg-sprite-loader -D
- yarn 安装
yarn add svg-sprite-loader -D
第二步:配置webpack
{ test: /.svg$/, loader: "svg-sprite-loader", include: path.resolve(__dirname, "../src/icons"), options: { symbolId: "icon-[name]" } }, { test: /.(eot|woff2?|ttf|svg)$/, exclude: path.resolve(__dirname, "../src/icons"), // 不处理 svg类型文件 use: [ { loader: "url-loader", options: { name: "[name]-[hash:5].min.[ext]", limit: 10000, outputPath: "font", publicPath: "font" } } ] },
第三步:创建icons/svg文件夹,并且加载所有svg文件
index.ts中方法
const requireAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /.svg$/) requireAll(req) export {} // 默认到处,ts如若不导出,会警告
第四步:创建 SvgIcon 组件
import React from 'react' import PropTypes from 'prop-types' import './index.scss' const SvgIcon = (props: { iconClass: string; svgClass: string; fill: string ;click: MouseEventHandler<HTMLElement>}) => { const { iconClass, fill, svgClass,click } = props return ( <i aria-hidden="true" onClick={click}> <svg className={`svg-class ${svgClass}`}> <use xlinkHref={'#icon-' + iconClass} fill={fill} /> </svg> </i> ) } SvgIcon.propTypes = { // svg名字 iconClass: PropTypes.string.isRequired, // 自定义类名 svgClass: PropTypes.string, //自定义方法 click: PropTypes.func, // 填充颜色 fill: PropTypes.string, } SvgIcon.defaultProps = { fill: 'currentColor', svgClass: '', click: () => {}, } export default SvgIcon
第五步:在组件中使用 SvgIcon
import React from 'react' import SvgIcon from '@/components/SvgIcon' const Index = () => { return ( <div> <SvgIcon iconClass="矿泉水" /> </div> ) } export default Index
最终效果:
注意可能会遇到的bug
如果按照以上步骤操作的话,图表还是不出来,有可能是webpack中的配置出来问题;
一般来说打印requireAll(req)
出现以下一个数组才算成功,如果不是,你需要检查下你的webpack是否将svg进行其他操作,导致无法正常解析;
出现以下情况,可能你在你的webpack中配置了一些配置项将svg进行base64转码了,导致svg无法正常解析;
此时检查你的webpack:
总结
以上就是个人在react中模拟vue-element-admin封装SvgIcon组件,以后个人会带来更多的组件封装,更多关于React封装SvgIcon组件的资料请关注猪先飞其它相关文章!
原文出处:https://juejin.cn/post/7202057129804906551
相关文章
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,本文主要介绍了Vue动态查询规则生成组件,需要的朋友们下面随着小编来一起学习学习吧...2021-05-27
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30
- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 在本篇内容里小编给大家分享的是关于c#使用封装方法以及相关知识点,对此有需要的朋友们可以学习下。...2020-06-25
- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- 这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-19
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下...2021-03-03
- 这篇文章主要为大家详细介绍了vue递归实现自定义tree组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-20
- 这篇文章主要介绍了Vue父子组件传值的一些坑,帮助大家更好的理解和使用vue父子组件,感兴趣的朋友可以了解下...2020-09-16
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要为大家详细介绍了原生JS封装Ajax插件,为大家介绍不同域之间互相请求资源的跨域...2016-05-05