React怎么封装SvgIcon组件

本篇内容介绍了“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="https://www.maopiaopiao.com">

import React from 'react'
import SvgIcon from '@/components/SvgIcon'
const Index = () => {
  return (
    <div>
      <SvgIcon iconClass="矿泉水" />
    </div>
  )
}
export default Index

requireAll(req)