cearte-react-app中craco中优雅引入svg【自定义宽、高、颜色，仅需5步】

第一步：安装依赖 yarn add -D svg-sprite-loader
在src/assets/icons/svg文件夹放入各种.svg文件和index.js

第二步：index.js 代码

// src/assets/icons/svg/index.js

const requireAll = requireContext => requireContext.keys().map(requireContext);
const svgs = require.context("./", false, /\.svg$/);
requireAll(svgs)

第三步：入口文件index.js  引入所有的svg   

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { ConfigProvider } from 'antd';
import store from './store'

import zh_CN from 'antd/es/locale/zh_CN';
import './index.less';
import App from './App';

import './assets/icons/svg';  // 引入svg

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <Fragment>
      <BrowserRouter>
        <ConfigProvider locale={zh_CN}>
          <App />
        </ConfigProvider>
      </BrowserRouter>
    </Fragment>
  </Provider>
)

第四步：在 src/components 中封装自定义SvgIcon组件 SvgIcon.jsx

// src/components/SvgIcon.jsx

import React from "react";
import "../assets/icons/svg";

const SvgIcon = ({
  name,
  color,
  ...props
}) => {
  const symbolId = `#icon-${name}`
  return (
    <svg {...props} aria-hidden="true">
      <use href={symbolId} fill={color || 'currentColor'} />
    </svg>
  )
}

export default SvgIcon

最后：在页面中使用svg
 

import SvgIcon from "@/components/SvgIcon" // @为自定义的根目录

function App() {
  return (
    <div className="App">

       {/* name里面上svg的文件名，不要后缀，可以自定义宽高和颜色 */}
      <SvgIcon name="ios" className="w-10 h-10" />

    </div>
  );
}

export default App;