经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » React » 查看文章
React优雅的封装SvgIcon组件示例
来源:jb51  时间:2023/2/22 15:20:40  对本文有异议

React如何优雅的封装SvgIcon组件

相信使用过vue的伙伴们,或多或少都接触或使用过vue-element-admin,其中许多封装都不禁让人拍案叫绝,因为本人之前是vue入门前端的,所以对vue-element-admin许多封装印象深刻,现在从vuereact之后,一直想把vue-element-admin里面的封装组件复刻到react当中使用,这次是SvgIcon组件的react封装版本;

第一步:安装svg-sprite-loader

  • npm 安装
  1. npm i svg-sprite-loader -D
  • yarn 安装
  1. yarn add svg-sprite-loader -D

第二步:配置webpack

  1. {
  2. test: /.svg$/,
  3. loader: "svg-sprite-loader",
  4. include: path.resolve(__dirname, "../src/icons"),
  5. options: {
  6. symbolId: "icon-[name]"
  7. }
  8. },
  9. {
  10. test: /.(eot|woff2?|ttf|svg)$/,
  11. exclude: path.resolve(__dirname, "../src/icons"), // 不处理 svg类型文件
  12. use: [
  13. {
  14. loader: "url-loader",
  15. options: {
  16. name: "[name]-[hash:5].min.[ext]",
  17. limit: 10000,
  18. outputPath: "font",
  19. publicPath: "font"
  20. }
  21. }
  22. ]
  23. },

第三步:创建icons/svg文件夹,并且加载所有svg文件

index.ts中方法

  1. const requireAll = (requireContext: __WebpackModuleApi.RequireContext) =>
  2. requireContext.keys().map(requireContext)
  3. const req = require.context('./svg', false, /.svg$/)
  4. requireAll(req)
  5. export {} // 默认到处,ts如若不导出,会警告

第四步:创建 SvgIcon 组件

  1. import React from 'react'
  2. import PropTypes from 'prop-types'
  3. import './index.scss'
  4. const SvgIcon = (props: { iconClass: string; svgClass: string; fill: string ;click: MouseEventHandler<HTMLElement>}) => {
  5. const { iconClass, fill, svgClass,click } = props
  6. return (
  7. <i aria-hidden="true" onClick={click}>
  8. <svg className={`svg-class ${svgClass}`}>
  9. <use xlinkHref={'#icon-' + iconClass} fill={fill} />
  10. </svg>
  11. </i>
  12. )
  13. }
  14. SvgIcon.propTypes = {
  15. // svg名字
  16. iconClass: PropTypes.string.isRequired,
  17. // 自定义类名
  18. svgClass: PropTypes.string,
  19. //自定义方法
  20. click: PropTypes.func,
  21. // 填充颜色
  22. fill: PropTypes.string,
  23. }
  24. SvgIcon.defaultProps = {
  25. fill: 'currentColor',
  26. svgClass: '',
  27. click: () => {},
  28. }
  29. export default SvgIcon

第五步:在组件中使用 SvgIcon

  1. import React from 'react'
  2. import SvgIcon from '@/components/SvgIcon'
  3. const Index = () => {
  4. return (
  5. <div>
  6. <SvgIcon iconClass="矿泉水" />
  7. </div>
  8. )
  9. }
  10. export default Index

最终效果:

注意可能会遇到的bug

如果按照以上步骤操作的话,图表还是不出来,有可能是webpack中的配置出来问题;

一般来说打印requireAll(req)出现以下一个数组才算成功,如果不是,你需要检查下你的webpack是否将svg进行其他操作,导致无法正常解析;

出现以下情况,可能你在你的webpack中配置了一些配置项将svg进行base64转码了,导致svg无法正常解析;

此时检查你的webpack:

总结

以上就是个人在react中模拟vue-element-admin封装SvgIcon组件,以后个人会带来更多的组件封装,更多关于React封装SvgIcon组件的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号